1. Write the following code in index.html page and run in browser.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>-->
<script src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average', 'Average2', 'Average2'],
['2004/05', 165, 938, 522, 998, 450, 614.6, 614.6, 214.6],
['2005/06', 135, 1120, 599, 1268, 288, 682, 414.6, 314.6],
['2006/07', 157, 1167, 587, 807, 397, 623, 414.6, 414.6],
['2007/08', 139, 1110, 615, 968, 215, 609.4, 304.6, 514.6],
['2008/09', 136, 691, 629, 1026, 366, 569.6, 604.6, 614.6]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: { title: 'Cups' },
hAxis: { title: 'Month' },
seriesType: 'bars',
series: { 5: { type: 'line' }, 6: { type: 'line' }, 7: { type: 'line' } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<title>Chard Example</title>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
 |
| Example |
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>-->
<script src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average', 'Average2', 'Average2'],
['2004/05', 165, 938, 522, 998, 450, 614.6, 614.6, 214.6],
['2005/06', 135, 1120, 599, 1268, 288, 682, 414.6, 314.6],
['2006/07', 157, 1167, 587, 807, 397, 623, 414.6, 414.6],
['2007/08', 139, 1110, 615, 968, 215, 609.4, 304.6, 514.6],
['2008/09', 136, 691, 629, 1026, 366, 569.6, 604.6, 614.6]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: { title: 'Cups' },
hAxis: { title: 'Month' },
seriesType: 'bars',
series: { 5: { type: 'line' }, 6: { type: 'line' }, 7: { type: 'line' } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<title>Chard Example</title>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Nice
ReplyDelete