2👍
✅
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);
?>
0👍
$data = array(
array("label"=> row['id'], "y"=> row['value']),
array("label"=> row['column1'], "y"=> row['value1']),
array("label"=> row['column2'], "y"=> row['value2']),
);
?>
Source:stackexchange.com