create Chart using Chartjs and PHP

Question

I need to create a chart using chartJS which gets the data from mysql, below is a sample output from mysql table:

+----+------------+----------+-----------------+----------
| ID | DATE       | Time     | Create | Delete | Product |
+----+------------+----------+-----------------+---------+
|  1 | 03/12/2017 | 09:00:00 |     28 |   1264 |      59 |

ive managed to put the data in JSON format, using the toturial here, below is the PHP file:

get.php

<?php

$DB_NAME = 'testDB';
$DB_HOST = 'localhost';
$db_port = '3306';
$DB_USER = 'test';
$DB_PASS = 'mysql';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }

  $result = $mysqli->query('Select * from (SELECT * FROM Stats ORDER BY id DESC LIMIT 48)t ORDER BY id ASC');
  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
   array('label' => 'ProductCreate', 'type' => 'number'),
   array('label' => 'ProductDelete', 'type' => 'number'),
   array('label' => 'ProductRenew', 'type' => 'number')

);
    foreach($result as $r) {

      $temp = array();

      $temp[] = array('v' => (string) $r['Time']); 
      $temp[] = array('v' => (int) $r['Create']);
      $temp[] = array('v' => (int) $r['Delete']);
      $temp[] = array('v' => (int) $r['Renew']);

      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$SubsStats = json_encode($table);
echo $SubsStats;


?>

My question now is how can I include the PHP output into my HTML file and draw the chart using ChartJS?

Thanks, Ali

Use above "SubsStats" json data and pass to javacript function for creating chart with help of chartJS supported function. — dgk, Mar 14 '17 at 09:41

score 2 · Accepted Answer · answered Mar 14 '17 at 09:47

Check Example

var data = {
 labels : ["January","February","March",
              "April","May","June",
              "July","Agost","September",
              "October","November","December"],
 datasets : [
  {
   fillColor : "rgba(252,233,79,0.5)",
   strokeColor : "rgba(82,75,25,1)",
   pointColor : "rgba(166,152,51,1)",
   pointStrokeColor : "#fff",
   data : <?php echo $res; ?>
  }
 ]
}


var options={     
 //Boolean - If we show the scale above the chart data   
 scaleOverlay : false,
 
 //Boolean - If we want to override with a hard coded scale
 scaleOverride : true,
 
 //** Required if scaleOverride is true **
 //Number - The number of steps in a hard coded scale
 scaleSteps : 14,
 //Number - The value jump in the hard coded scale
 scaleStepWidth : 5,
 //Number - The scale starting value
 scaleStartValue : 55,
 //String - Colour of the scale line 
 scaleLineColor : "rgba(20,20,20,.7)",
 
 //Number - Pixel width of the scale line 
 scaleLineWidth : 1,

 //Boolean - Whether to show labels on the scale 
 scaleShowLabels : true,
 
 //Interpolated JS string - can access value
 scaleLabel : "<%=value%>",
 
 //String - Scale label font declaration for the scale label
 scaleFontFamily : "'Arial'",
 
 //Number - Scale label font size in pixels 
 scaleFontSize : 12,
 
 //String - Scale label font weight style 
 scaleFontStyle : "normal",
 
 //String - Scale label font colour 
 scaleFontColor : "#666", 
 
 ///Boolean - Whether grid lines are shown across the chart
 scaleShowGridLines : true,
 
 //String - Colour of the grid lines
 scaleGridLineColor : "rgba(0,0,0,.3)",
 
 //Number - Width of the grid lines
 scaleGridLineWidth : 1, 
 
 //Boolean - Whether the line is curved between points
 bezierCurve : true,
 
 //Boolean - Whether to show a dot for each point
 pointDot : true,
 
 //Number - Radius of each point dot in pixels
 pointDotRadius : 5,
 
 //Number - Pixel width of point dot stroke
 pointDotStrokeWidth : 1,
 
 //Boolean - Whether to show a stroke for datasets
 datasetStroke : true,
 
 //Number - Pixel width of dataset stroke
 datasetStrokeWidth : 2,
 
 //Boolean - Whether to fill the dataset with a colour
 datasetFill : true,
 
 //Boolean - Whether to animate the chart
 animation : false,

 //Number - Number of animation steps
 animationSteps : 60,
 
 //String - Animation easing effect
 animationEasing : "easeOutQuart",

 //Function - Fires when the animation is complete
 onAnimationComplete : null
};


//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");


new Chart(ctx).Line(data,options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>

PHP code :- (above js code)

<?php 

$array = array(65,68,75,81,95,105,130,120,105,90,75,70);

$res = json_encode($array);
?>

score 0 · Answer 2 · answered Jun 11 '20 at 02:02

0

$data = array(
    array("label"=> row['id'], "y"=> row['value']),
    array("label"=> row['column1'], "y"=> row['value1']),
    array("label"=> row['column2'], "y"=> row['value2']),
        );

?>

answered Jun 11 '20 at 02:02

Gurpal Mann

11
1

create Chart using Chartjs and PHP

2 Answers2