Hi, I would like to create a Line chart which only display the selected items in the list box. Here is the code the I tried but it didn't work. Thanks a lot for helping.
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init(){
var rowData1 = [['Year', 'Sales']
['2003', 100.00],
['2004', 90.29],
['2005', 241.03],
['2006', 134.61],
['2007', 151.06],
['2008', 133.96],
['2009', 103.20,],
['2010', 110.00],
['2011', 115.53],
['2012', 242.44],];
var rowData2 = [['Year', 'Marketing'],
['2003', 100.00],
['2004', 94.22],
['2005', 81.85],
['2006', 108.01],
['2007', 88.44],
['2008', 88.07],
['2009', 108.40],
['2010', 149.01],
['2011', 156.29],
['2012', 130.15],];
var rowData3 = [['Year', 'Expenses'],
['2003', 100.00],
['2004', 194.22],
['2005', 41.85],
['2006', 128.01],
['2007', 98.44],
['2008', 128.07],
['2009', 148.40],
['2010', 139.01],
['2011', 196.29],
['2012', 230.15],];
//var data = [];
//data[0] = google.visualization.arrayToDataTable(rowData1);
//data[1] = google.visualization.arrayToDataTable(rowData2);
//data[2] = google.visualization.arrayToDataTable(rowData3);
var options = {
width: 700,
height: 400,
vAxis: {title: "Amount"},
hAxis: {title: "Year"},
animation:{
duration: 1000,
easing: 'out'
},
};
}
function drawMultiChart(){
var listBox=document.getElementById("selectMultiple");
var count=0;
var itemToDraw=Array();
itemToDraw(0) = google.visualization.arrayToDataTable(rowData1);
itemToDraw(1) = google.visualization.arrayToDataTable(rowData2);
itemToDraw(2) = google.visualization.arrayToDataTable(rowData3);
for (var i=0;i<listBox.options.length;i++){
if (listBox.options[i].selected==true){
itemToDraw.push(listBox.options[i].value);
}
}
for (var j=0;j<itemToDraw.length;j++){
count+=drawOneByOne(listBox,itemToDraw[j]);
}
}
function drawOneByOne(listBox,itamToDraw){
var drawed=0;
for(var k=0;k<listBox.options.length;k++){
if(listBox.options[k].value==itemToDraw){
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
view = new google.visualization.DataView(data);
chart.draw(data, options);
drawed =1;
break;
}
}
return drawed;
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<table border="0">
<tr>
<td align="right">Select One Industry</td>
<td align="left">
<select name="selectMultiple" size="10" multiple="multiple" id="selectMultiple">
<option value="Sales">Sales</option>
<option value="Marketing">Marketing</option>
<option value="Expenses">Expenses</option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="submitBtn" type="button" id="submitBtn" value="Submit" onClick="javaScript:drawMultiChart();" /></td>
</tr>
</table>
</body>
