Google Chart API - Answer
Your client, DataSet Corp, has asked for an interactive web based chart showing the change in revenue from 2005 until now. They would also like the overall average revenue to be reflected in the chart. Be sure to add a title, label axes, and reflect the red and black color scheme used by DSC.
HTML
<script src="http://www.google.com/jsapi?ext.js"></script>
<button id="change-btn">change columns</button>
<div id="div_id_1"></div>
<div id="div_id_2"></div>
JavaScript
var testRows = [
['Test-A', 4, 3],
['Test-B', 1, 2],
['Test-C', 3, 4],
['Test-D', 2, 0],
['Test-E', 2, 5]
];
var testRow = ['Test-F', 8, 1];
var data = null;
google.load("visualization", "1", {
packages: ["corechart", 'table']
});
google.setOnLoadCallback(function () {
data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addColumn('number', 'How Sexy');
data.addRows(testRows);
drawChart('tablechart', 'div_id_1', data, null);
drawChart('columnChart', 'div_id_2', data, null);
});
var columnChart, tableChart;
document.getElementById('change-btn').onclick=function() {
data.removeRow(0);
data.insertRows(0, [['Test-A-changed', 14, 13]]);
columnChart.draw(data);
tableChart.draw(data);
}
function drawChart(chartType, containerID, dataTablo, options) {
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);
columnChart = chart;
} else if (chartType.toUpperCase() == 'PIECHART') {
chart = new google.visualization.PieChart(containerDiv);
} else if (chartType.toUpperCase() == 'TABLECHART') {
chart = new google.visualization.Table(containerDiv);
tableChart = chart;
}
if (chart == false) {
return false;
}
chart.draw(dataTablo, options);
}