I am trying out a sample of google chart. Below is the code that I have implemented:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
chart3();
}
function chart3() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', '7522819-A-123');
dataTable.addColumn('number', '7523098-L-352');
dataTable.addColumn('number', '7522819-A-138');
dataTable.addColumn('number', '7522819-A-186');
dataTable.addColumn('number', '7522819-L-107');
dataTable.addRows([
['6-Apr-15', 5.994, 4.451, .2, 4.555, 3.728],
['7-Apr-15',6.217, 3.351, 5.142, 5.992, 3.662],
['8-Apr-15', 6.48, 3.603, 3.916, 5.256, 5.092],
['9-Apr-15', 6.24, 4.816, 3.948, 5.149, 5.838],
['10-Apr-15', 5.397, 4.465, 4.273, 6.252, 6.302],
['11-Apr-15', 5.995, 5.797, 6.022, 4.358, 3.890],
['12-Apr-15', 6.335, 7.2, 4.263, 5.772, 5.206]
]);
var options = {
legend: { textStyle: {fontSize: 9}},
title:'Machine Utilization Comparison (last 7 days)',
titleTextStyle: {fontSize: 15},
vAxis: {title: 'Usage (Hours)'},
hAxis: {
slantedText:true,
slantedTextAngle:30
} ,
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart3'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="chart3" style="width: 620px; height: 300px;"></div>
<div id="days" style="position: relative; left:40px; width: 70%;top: 40px;" >
<table cellpadding="0" style="width:100%; left:0px; border-collapse:collapse;font-size:70%;color:black;">
<tr align="left">
<td><input id="day1" type="checkbox" value="1" class="days" />1</td>
<td><input id="day2" type="checkbox" value="2" class="days" />2</td>
<td><input id="day3" type="checkbox" value="3" class="days" />3</td>
<td><input id="day4" type="checkbox" value="4" class="days" />4</td>
<td><input id="day5" type="checkbox" value="5" class="days" />5</td>
<td><input id="day6" type="checkbox" value="6" class="days" />6</td>
<td><input id="day7" type="checkbox" value="7" class="days" />7</td>
<td><input id="day8" type="checkbox" value="8" class="days" />8</td>
<td><input id="day9" type="checkbox" value="9" class="days" />9</td>
<td><input id="day10" type="checkbox" value="10" class="days" />10</td>
<td><input id="day11" type="checkbox" value="11" class="days" />11</td>
<td><input id="day12" type="checkbox" value="12" class="days" />12</td>
<td><input id="day13" type="checkbox" value="13" class="days" />13</td>
<td><input id="day14" type="checkbox" value="14" class="days" />14</td>
<td><input id="day15" type="checkbox" value="15" class="days" />15</td>
<td><input id="day16" type="checkbox" value="16" class="days" />16</td>
<td><input id="day17" type="checkbox" value="17" class="days" />17</td>
<td><input id="day18" type="checkbox" value="18" class="days" />18</td>
<td><input id="day19" type="checkbox" value="19" class="days" />19</td>
<td><input id="day20" type="checkbox" value="20" class="days" />20</td>
<td><input id="day21" type="checkbox" value="21" class="days" />21</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
What I want here is that when user select checkbox1, then color of column one of the line chart should become grey. Like wise if user selects checkbox2 then column 2's color should change to grey and so on.
I am unable to do this. Need Help.
Thanks in advance.