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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -