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
– dgk, Commented Mar 14, 2017 at 9:41

Aman Kumar · Accepted Answer · 2017-03-14 09:47:44Z

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);
?>

Gurpal Mann · Accepted Answer · 2020-06-11 02:02:57Z

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, 2020 at 2:02

Gurpal Mann

111 bronze badge

Collectives™ on Stack Overflow

create Chart using Chartjs and PHP

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related