Google charts with 2 dataset and 2 charts on same page

JavaScript
1

Hi,

I want to use google charts with 2 datasets and 2 graphs on the same page.

Below is the code example, I see only 1 chart but the second one does not work.

Any solution?


<div>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart1);
    function drawChart1() {
       var data1 = google.visualization.arrayToDataTable([
            ["Product Name", "Page Views Count", { role: "style" } ],
            ["ProductName1", 2, "#3871CF"],
            ["ProductName2", 10, "#3871CF"],
            ["ProductName3", 1, "#3871CF"],
            ["ProductName4", 1, "#3871CF"],
            ["ProductName5", 1, "#3871CF"],
            ["ProductName6", 1, "#3871CF"],
            ["ProductName7", 1, "#3871CF"],
            ["ProductName8", 1, "#3871CF"],
            ["ProductName9", 1, "#3871CF"],
            ["ProductName10", 1, "#3871CF"],
            ["ProductName11", 1, "#3871CF"],
            ["ProductName12", 1, "#3871CF"],
            ["ProductName13", 1, "#3871CF"],
            ["ProductName14", 1, "#3871CF"],
            ["ProductName15", 8, "#3871CF"]
        ]);
        var view1 = new google.visualization.DataView(data1);
        view1.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

        var options1 = {
            title: "Products Page Views Count Chart",
            width: 1110,
            height: 800,
            bar: {groupWidth: "95%"},
            legend: { position: "none" },
        };
        var chart1 = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
        chart1.draw(view1, options1);

    }
    </script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart2);
      function drawChart2() {
        var data2 = google.visualization.arrayToDataTable([
            ['Product Name', 'Page Views Count (in millions)'],
            ["ProductName1", 2],
            ["ProductName2"],
            ["ProductName3", 1],
            ["ProductName4", 1],
            ["ProductName5", 1],
            ["ProductName6", 1],
            ["ProductName7", 1],
            ["ProductName8", 1],
            ["ProductName9", 1],
            ["ProductName11", 1],
            ["ProductName11", 1],
            ["ProductName12", 1],
            ["ProductName13", 1],
            ["ProductName14", 1],
            ["ProductName15",10]
        ]);
		
        var options2 = {
          title: 'Products Page Views Count Chart',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };
        var chart2 = new google.visualization.PieChart(document.getElementById('piechart'));
        chart2.draw(data2, options2);
      }
    </script>
    <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
    <br/>
    <div id="piechart" style="width: 1000px; height: 500px;"></div>
    <br/>
    <div style="padding-bottom:500px">
</div>
1 Like
2

Hi @edge, if you open the console of your browser dev tools you should see something like an

Uncaught (in promise) Error: Row 2 has 1 columns

… caused by ["ProductName2"] in data2; fixing this will draw both charts as expected.

1 Like
3

Thanks. The problem is solved.

1 Like