I did not see any examples for this combination, and i am not able to get my code to fully functional. The check boxes seems to have no effect but the table/ chat does still draw. So the javascript is not targeting the Jason data correctly. If anyone can point me in the right direction or help out as other people may come across this same scenario.
enter code here
setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $result = $conn->query("SELECT * FROM blah Where blahblah = 'blahblahblah' "); $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'blah0', 'type' => 'string'), array('label' => 'blah1', 'type' => 'number'), array('label' => 'blah2', 'type' => 'number'), array('label' => 'blah3', 'type' => 'number'), array('label' => 'blah4', 'type' => 'number'), array('label' => 'blah5', 'type' => 'number'), array('label' => 'blah6', 'type' => 'number'), array('label' => 'blah7', 'type' => 'number'), array('label' => 'blah8', 'type' => 'number'), array('label' => 'blah9', 'type' => 'number') ); foreach($result as $r) { $temp = array(); $temp[] = array('v' => (string) $r['blah0']); $temp[] = array('v' => (int) $r['blah1']); $temp[] = array('v' => (int) $r['blah2']); $temp[] = array('v' => (int) $r['blah3']); $temp[] = array('v' => (int) $r['blah4']); $temp[] = array('v' => (int) $r['blah5']); $temp[] = array('v' => (int) $r['blah6']); $temp[] = array('v' => (int) $r['blah7']); $temp[] = array('v' => (int) $r['blah8']); $temp[] = array('v' => (int) $r['blah9']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; } catch(PDOException $e) { echo 'ERROR: ' . $e->getMessage(); } ?>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
chart: {
title: '',
subtitle: ''
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
$('#label').find(':checkbox').change(function () {
var cols = [0];
var colors = [];
$('#label').find(':checkbox:checked').each(function () {
console.log(this);
var value = parseInt($(this).attr('value'));
cols.push(value);
colors.push(seriesColors[value - 1]);
console.log(value, 'colors: ', colors);
});
view.setColumns(cols);
chart.draw(view, {
strictFirstColumnType: true,
colors: colors
});
});
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
alert('selected label: ' + selection[0].column);
}
});
}
</script>
</head>
<div>
<center>
<body>
<ul id="label" >
<li><input type="checkbox" name="label" value="1" checked="false" /> Value1</li>
<li><input type="checkbox" name="label" value="2" checked="true" /> V2</li>
<li><input type="checkbox" name="label" value="3" checked="true" /> V3</li>
<li><input type="checkbox" name="label" value="4" checked="true" /> V4</li>
<li><input type="checkbox" name="label" value="5" checked="true" /> V5</li>
<li><input type="checkbox" name="label" value="6" checked="true" /> V6</li>
<li><input type="checkbox" name="label" value="7" checked="true" /> V7</li>
<li><input type="checkbox" name="label" value="8" checked="true" /> V8</li>
<li><input type="checkbox" name="label" value="9" checked="true" /> V9</li>
</ul>
</center>
<p></p>
</div>
<div id="linechart_material"></div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire