Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var updateInterval = 50000;
var dataPoints1 = [{"x":1550078659000, "y":67},{"x":1550079659000, "y":87}];//and so on
var dataPoints2 = [{"x":1550078659000, "y":5},{"x":1550079659000, "y":2}];
var yValue1 = 100;
var yValue2 = 100;
var xValue = 1550084671000;
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
title: {
text: "Nombre de Sites HS"
},
axisX: {
title: "chart updates every 5 mins",
intervalType: "minute",
ValueFormatString: "YYYY-MMM-DD hh:mm:ss",
interval: 5
},
axisY:{
suffix: " ",
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
verticalAlign: "top",
fontSize: 22,
fontColor: "dimGrey",
itemclick : toggleDataSeries
},
data: [{
type: "line",
name: "Cumulés",
xValueType: "dateTime",
yValueFormatString: "#,### sites",
xValueFormatString: "YYYY-MM-DD hh:mm:ss",
showInLegend: true,
legendText: "{name} " ,
dataPoints: dataPoints1
},
{
type: "line",
name: "Nouveaux" ,
xValueType: "dateTime",
yValueFormatString: "#,### sites",
showInLegend: true,
legendText: "{name} ",
dataPoints: dataPoints2
}]
});
...