javascript - How to fill Charts.js with mysql data? -
below code, , want in xaxis , yaxis display data database.
<script src="../chart.js"></script> <script> var randomscalingfactor = function(){ return math.round(math.random()*100)}; var barchartdata = { labels : <?=json_encode(array_values($count));?>, datasets : [ { fillcolor : "rgba(151,187,205,0.5)", strokecolor : "rgba(151,187,205,0.8)", highlightfill : "rgba(151,187,205,0.75)", highlightstroke : "rgba(151,187,205,1)", data :<?=json_encode(array_values($auditor));?> } ] } window.onload = function(){ var ctx = document.getelementbyid("canvas").getcontext("2d"); window.mybar = new chart(ctx).bar(barchartdata, { responsive : true }); } </script>
my php code this:
<?php $link = mysql_connect('localhost', 'root', '') or die('could not connect: ' . mysql_error()); mysql_select_db('laravel') or die('could not select database'); $auditor = array(); $sql = "select date(created) date, count(auditor_id) 'count' auditor created between '2015-09-01 00:00:00' , '2015-09-31 23:59:59' group date order date"; $result = mysql_query($sql) or die('query failed: ' . mysql_error()); if ($result) { while ($row = mysql_fetch_assoc($result)) { $date = $row["date"]; $count = $row["count"]; //add data array $auditor[$date] = $count; } }
basically want data after grouped display in x axis , y axis
i have made date , count array separately. , convert in json. have used url reference. http://www.chartjs.org/docs/#bar-chart-example-usage
i have not tested code in local. please first test in system. think more idea.
first change in php code.
if ($result) { $dates = array(); $counts = array(); while ($row = mysql_fetch_assoc($result)) { $dates[] = $row["date"]; $counts[] = $row["count"]; } }
now set values in jquery code.
var barchartdata = { labels : <?=json_encode($dates);?>, datasets : [ { fillcolor : "rgba(151,187,205,0.5)", strokecolor : "rgba(151,187,205,0.8)", highlightfill : "rgba(151,187,205,0.75)", highlightstroke : "rgba(151,187,205,1)", data :<?=json_encode($counts);?> } ] }
Comments
Post a Comment