将图表类型参数传递给自定义函数作为谷歌图表功能

Question

Currently i am creating chart using google chart. for this i have created one custom function called myJchart as below.

    function myJChart(ChartPackage,ChartType,ChartData,ChartTitel,ChartSubtitle,Chart3D,ChartHeight,ChartWidth,ChartDivID){

        google.load("visualization", "1", {packages:[ChartPackage]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable(ChartData);
            var options = {
                title: ChartTitel,
                subtitle: ChartSubtitle,
                is3D: true,
                height: ChartHeight,
                width: ChartWidth               
                };


        var chart = new google.visualization.PieChart(document.getElementById(ChartDivID));
            chart.draw(data, options);
      }

    }

And Calling function

myJChart('corechart','PieChart',<?php echo $jsonTable;?>,'test','test again',true,'600','800','chart_div'); 

this above function is working good. now the problem is that when i pass the ChartType parameter to google google.visualization.ChartType i am getting below error message

Uncaught TypeError: google.visualization.ChartType is not a function

i used [ChartType] but i got this error Unexpected token [ any suggestion will help.

Answer 1

I would suggest using the ChartWrapper Class for this...

mainly because you only want to call google.load once.

ChartWrapper will dynamically load what it needs depending on the chart type.

google.load("visualization", "1.1", {packages:["controls"]});
google.setOnLoadCallback(googleLoaded);

// test data
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea','Rwanda', 'Average'],
                ['2004/05', 165, 938, 522, 998, 450, 114.6],
                ['2005/06', 135, 1120, 599, 1268, 288, 382],
                ['2006/07', 157, 1167, 587, 807, 397, 623],
                ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                ['2008/09', 136, 691, 629, 1026, 366, 569.6]];

function googleLoaded() {
    myJChart('corechart', 'BarChart', rowData1, 'test', 'test again', true, 600, 800, 'chart_div');
}

function myJChart(ChartPackage, ChartType, ChartData, ChartTitel, ChartSubtitle, Chart3D, ChartHeight, ChartWidth, ChartDivID){
    chart = new google.visualization.ChartWrapper({
        chartType: ChartType,
        containerId: ChartDivID,
        dataTable: google.visualization.arrayToDataTable(ChartData),
        options: {
            title: ChartTitel,
            subtitle: ChartSubtitle,
            is3D: Chart3D,
            height: ChartHeight,
            width: ChartWidth
        }
    });

    chart.draw();
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

</div>