How To Show Dual Dashboard Google Chart In One Page

44 views

Skip to first unread message

triple venom

unread,

Aug 6, 2018, 4:45:49 AM8/6/18

to Google Visualization API

Want to show dual google chart with different data and different dashboard in one page, but just only one can show in one page?

First Dashboard :

<html>

<head>

<title>Google Charts Tutorial</title>

</script>

google.charts.load('current', {packages: ['corechart']});

</script>

</head>

<body>

</div>

function drawChart() {

// Define the chart to be drawn.

var data = google.visualization.arrayToDataTable([

['Fruit', 'Mount', { role: 'annotation'} ,'weight', { role: 'annotation'}],

['Apple', 1000,'1000', 245, '245'],

['Mango', 1234,'1234', 234,'234'],

['Watermelon', 12345,'12345', 342,'342'],

['Pineapple', 7321,'7321', 545,'545'],

['Grape', 46723,'46723', 2345,'2345'],

['Banana', 9643,'9643', 462,'462'],

['Orange', 4684,'4684', 235,'235']

]);

var options = {title: 'About Fruit', isStacked:true};

// Instantiate and draw the chart.

var chart = new google.visualization.BarChart(document.getElementById('container'));

chart.draw(data, options);

}

google.charts.setOnLoadCallback(drawChart);

</script>

</body>

</html>

Second Dashboard :

<html>

<head>

<title>Google Charts Tutorial</title>

</script>

google.charts.load('current', {packages: ['corechart']});

</script>

</head>

<body>

</div>

function drawChart() {

// Define the chart to be drawn.

var data = google.visualization.arrayToDataTable([

['Vegetables', 'Mount', { role: 'annotation'} ,'Weight', { role: 'annotation'}],

['Cabbage', 117021,'117021', 134, '134'],

['Celery ', 1673407,'1673407', 194,'194'],

['Asparagus', 152139,'152139', 192,'192'],

['Cucumber', 180718,'180718', 216,'216'],

['Onion', 14214,'14214', 168,'168'],

['Pumpkin', 183667,'183667', 215,'215'],

['Sprout ', 15956,'15956', 118,'118']

]);

var options = {title: 'About Vegetables', isStacked:true, is3D: true,};

// Instantiate and draw the chart.

var chart = new google.visualization.BarChart(document.getElementById('container'));

chart.draw(data, options);

}

google.charts.setOnLoadCallback(drawChart);

</script>

</body>

</html>

Presentation1.png

Ray Thomas

unread,

Aug 6, 2018, 10:00:52 PM8/6/18

to Google Visualization API

So far as I know you can have as many charts on one page as you like, but you have to some sort of plan to do it. It is important to remember that you can only have one call to the loader.js. You also need to change some of the function and variable names so that they are unique and each must be drawn in their own div or they will be overwritten.

There's help about this at https://developers.google.com/chart/interactive/docs/basic_multiple_charts

I've also rewritten your code so both charts appear and that's at http://brisray.com/test/google-venom.htm

To illustrate what can be done, https://www.indstate.edu/business/investment-club/portfolio uses one data source and the data table is then manipulated with JavaScript to produce multiple charts. https://www.indstate.edu/business/metrics uses multiple data sources to produce several charts on a page.