Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add two Google charts on the one page?

What I've done

I've added Google chart to the head of my page. This returns an image of a chart.

What I need to do

I simply need to add a second chart to the same page.

The problem

The code for the second chart is ignored. I largely suspect this is due to me incorrectly combining the code for each chart.

The code

First chart (line):

    <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">    // Load the Visualization API and the piechart package.   google.load('visualization', '1.0', {'packages':['corechart']});    // Set a callback to run when the Google Visualization API is loaded.   google.setOnLoadCallback(drawChart);    // Callback that creates and populates a data table,   // instantiates the pie chart, passes in the data and   // draws it.   function drawChart() {      var data = new google.visualization.DataTable();     data.addColumn('string', 'Month');     data.addColumn('number', 'Apples');     data.addColumn('number', 'Oranges');     data.addRows([       ['Oct 11', 20, 0],       ['Nov 11', 0, 0],       ['Dec 12',  0, 20],       ['Jan 12', 0, 10],       ['Feb 12', 0, 10],       ['March 12', 10, 10]     ]);      // Set chart options     var options = {'width':960,                    'height':300};      // Instantiate and draw our chart, passing in some options.     var chart = new google.visualization.LineChart(document.getElementById('line_chart'));     chart.draw(data, options);   }  </script> 

Second chart (pie):

    <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">    // Load the Visualization API and the piechart package.   google.load('visualization', '1.0', {'packages':['corechart']});    // Set a callback to run when the Google Visualization API is loaded.   google.setOnLoadCallback(drawChart);    // Callback that creates and populates a data table,   // instantiates the pie chart, passes in the data and   // draws it.   function drawChart() {      // Create the data table.     var data = new google.visualization.DataTable();     data.addColumn('string', 'Topping');     data.addColumn('number', 'Slices');     data.addRows([       ['Mushrooms', 3],       ['Onions', 1],       ['Olives', 1],       ['Zucchini', 1],       ['Pepperoni', 2]     ]);      // Set chart options     var options = {'title':'How Much Pizza I Ate Last Night',                    'width':400,                    'height':300};      // Instantiate and draw our chart, passing in some options.     var chart = new google.visualization.PieChart(document.getElementById('chart_div'));     chart.draw(data, options);   } </script> 

Each of the charts are called in the body using a container div with a unique id:

<div id="chart_div"></div> 

My question

How do I stitch these two blocks of code together? I've tried copying drawChart() and specifying unique function names and variables but to no avail.

like image 423
Dominor Novus Avatar asked Mar 27 '12 11:03

Dominor Novus


People also ask

What is Series in Google chart?

Overview. A chart that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area. To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.


2 Answers

Solution

I now have a working solution. It involved discerning which parts of the example code to duplicate and what not to duplicate (as suggested by Oofpez). The data, options and chart variables for EACH of your charts are defined within the ONE drawChart() function.

Here is a working example (just copy and paste into a HTML document):

...This example further demonstrates how to combine different chart types i.e. pie and line...

<html>       <head>         <!--Load the AJAX API-->         <script type="text/javascript" src="https://www.google.com/jsapi"></script>         <script type="text/javascript">            // Load the Visualization API and the piechart package.           google.load('visualization', '1.0', {'packages':['corechart']});            // Set a callback to run when the Google Visualization API is loaded.           google.setOnLoadCallback(drawChart);            // Callback that creates and populates a data table,           // instantiates the pie chart, passes in the data and           // draws it.           function drawChart() {              // Create the data table.             var data = new google.visualization.DataTable();             data.addColumn('string', 'Topping');                 data.addColumn('number', 'Slices');             data.addRows([               ['Mushrooms', 3],               ['Onions', 1],               ['Olives', 1],               ['Zucchini', 1],               ['Pepperoni', 2]             ]);             // Create the data table.             var data2 = new google.visualization.DataTable();             data2.addColumn('string', 'Topping');             data2.addColumn('number', 'Slices');             data2.addRows([               ['Mushrooms', 3],               ['Onions', 1],               ['Olives', 15],               ['Zucchini', 1],               ['Pepperoni', 2]             ]);              var data3 = new google.visualization.DataTable();             data3.addColumn('string', 'Year');             data3.addColumn('number', 'Sales');             data3.addColumn('number', 'Expenses');             data3.addRows([               ['2004', 1000, 400],               ['2005', 1170, 460],               ['2006',  860, 580],               ['2007', 1030, 540]             ]);              // Set chart options             var options = {'title':'How Much Pizza I Ate Last Night',                            'width':400,                            'height':300};             // Set chart options             var options2 = {'title':'How Much Pizza You Ate Last Night',                            'width':400,                            'height':300};             // Set chart options             var options3 = {'title':'Line chart',                            'width':400,                            'height':300};              // Instantiate and draw our chart, passing in some options.             var chart = new google.visualization.PieChart(document.getElementById('chart_div'));             chart.draw(data, options);             var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));             chart2.draw(data2, options2);             var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));             chart3.draw(data3, options3);            }         </script>       </head>        <body>         <!--Divs that will hold the charts-->         <div id="chart_div"></div>         <div id="chart_div2"></div>         <div id="chart_div3"></div>       </body>     </html> 
like image 119
Dominor Novus Avatar answered Oct 11 '22 16:10

Dominor Novus


Basically you can wrap function drawChart for parameters to pass on like:

function drawChart(chartType, containerID, dataArray, options) 

and

call google.setOnLoadCallback(function() {     drawChart('barChart', 'div_id_1', test_array, null); });  

as many times as much you want to render graphs:

var test_array = [     ['Name', 'Count-A', 'Count-B'],     ['Test-A', 4, 3],     ['Test-B', 1, 2],     ['Test-C', 3, 4],     ['Test-D', 2, 0],     ['Test-E', 2, 5] ];  google.load("visualization", "1", {packages: ["corechart",'table']});  google.setOnLoadCallback(function() {     drawChart('barChart', 'div_id_1', test_array, null); });  google.setOnLoadCallback(function() {     drawChart('columnChart', 'div_id_2', test_array, null); });   function drawChart(chartType, containerID, dataArray, options) {     var data = google.visualization.arrayToDataTable(dataArray);     var containerDiv = document.getElementById(containerID);     var chart = false;      if (chartType.toUpperCase() == 'BARCHART') {         chart = new google.visualization.BarChart(containerDiv);     }     else if (chartType.toUpperCase() == 'COLUMNCHART') {         chart = new google.visualization.ColumnChart(containerDiv);     }     else if (chartType.toUpperCase() == 'PIECHART') {         chart = new google.visualization.PieChart(containerDiv);     }     else if (chartType.toUpperCase() == 'TABLECHART')     {         chart = new google.visualization.Table(containerDiv);     }      if (chart == false) {         return false;     }      chart.draw(data, options); } 
like image 45
Pankaj Garg Avatar answered Oct 11 '22 15:10

Pankaj Garg