Chart.js - Getting data from database using mysql and php -
i'm trying convert static data using database results. i'll using mysql , php.
this example code have
var randomscalingfactor = function(){ return math.round(math.random()*100)}; var linechartdata = { labels : ["january","february","march","april","may","june","july"], datasets : [ { label: "my first dataset", fillcolor : "rgba(220,220,220,0.2)", strokecolor : "rgba(220,220,220,1)", pointcolor : "rgba(220,220,220,1)", pointstrokecolor : "#fff", pointhighlightfill : "#fff", pointhighlightstroke : "rgba(220,220,220,1)", data : [randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor()] }, { label: "my second dataset", fillcolor : "rgba(151,187,205,0.2)", strokecolor : "rgba(151,187,205,1)", pointcolor : "rgba(151,187,205,1)", pointstrokecolor : "#fff", pointhighlightfill : "#fff", pointhighlightstroke : "rgba(151,187,205,1)", data : [randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor(),randomscalingfactor()] } ] } window.onload = function(){ var ctx = document.getelementbyid("canvas").getcontext("2d"); window.myline = new chart(ctx).line(linechartdata, { responsive: true }); }
below php/msql
$result = mysql_query("select count(*) customer month='january'") or die(mysql_error()); $row1 = mysql_fetch_array( $result ); $result = mysql_query("select count(*) customer month='february'") or die(mysql_error()); $row2 = mysql_fetch_array( $result ); $result = mysql_query("select count(*) customer month='march'") or die(mysql_error()); $row3 = mysql_fetch_array( $result );
how use count mysql query , implement datasets on chartjs? labels generated mysql query too. should loop datasets inside jquery code?
this plugin i'm using : http://www.chartjs.org/docs/#line-chart-introduction
please place php code file called api.php
, use $.ajax
these data json format. convert data json format data should use json_encode()
php function.
i have set sample example can see here.
please refer below code example:
api.php
$arrlabels = array("january","february","march","april","may","june","july"); $arrdatasets = array('label' => "my first dataset",'fillcolor' => "rgba(220,220,220,0.2)", 'strokecolor' => "rgba(220,220,220,1)", 'pointcolor' => "rgba(220,220,220,1)", 'pointstrokecolor' => "#fff", 'pointhighlightfill' => "#fff", 'pointhighlightstroke' => "rgba(220,220,220,1)", 'data' => array('28', '48', '40', '19', '86', '27', '90')); $arrreturn = array(array('labels' => $arrlabels, 'datasets' => $arrdatasets)); print (json_encode($arrreturn));
example.html
$.ajax({ type: 'post', url: 'api.php', success: function (data) { linechartdata = data;//alert(json.stringify(data)); var myline = new chart(document.getelementbyid("canvas").getcontext("2d")).line(linechartdata); var ctx = document.getelementbyid("canvas").getcontext("2d"); window.myline = new chart(ctx).line(linechartdata, {responsive: true}); } });
please note should pass value of randomscalingfactor()
@ api.php
.
please check , let me know if require further help.
Comments
Post a Comment