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>
<div id="chart"></div>
<div id="chart1"></div>
JavaScript
colors = {'Work':'blue',
'Eat':'red',
'Commute':'blue',
'Watch TV':'green',
'Sleep':'purple',};
function colorsArray(data){
console.log(data, data.length)
var array = [];
for (var i=1;i<data.length;i++){
array.push(colors[data[i][0]]);
}
return array
}
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart1);
function drawChart() {
var chartData = [
['Task', 'Hours per Day'],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: 'My Daily Activities',
backgroundColor: '#ddd',
chartArea: {top:40,width:500,height:200},
colors: colorsArray(chartData)
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
function drawChart1() {
var chartData = [
['Task', 'Hours per Day'],
['Work', 1],
['Eat', 2],
['Commute', 3],
['Watch TV', 4],
['Sleep', 5]
]
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: 'My Daily Activities',
backgroundColor: '#ddd',
chartArea: {top:40,width:500,height:200},
colors: colorsArray(chartData)
};
var chart1= new google.visualization.PieChart(document.getElementById('chart1'));
chart1.draw(data, options);
}