Chart using CanvasJS
Dynamic Chart using CanvasJS
HTML
<script src="//canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
JavaScript
var sample_data = [
{
x : 1499659246,
yValue1 : 166.80450428896,
yValue2 : 167.78097280519
},
{
x : 1499655615,
yValue1 : 166.83046498035,
yValue2 : 167.80454495678
},
{
x : 1499652000,
yValue1 : 166.85545383061,
yValue2 : 167.83047193908
}
];
var dataPoints2 = [
{
x : 1499659246,
yValue1 : 166.80450428896,
yValue2 : 167.78097280519
},
{
x : 1499655615,
yValue1 : 166.83046498035,
yValue2 : 167.80454495678
},
{
x : 1499652000,
yValue1 : 166.85545383061,
yValue2 : 167.83047193908
}
];
var updateInterval = 1;
// initial value
var yValue1 = 000;
var yValue2 = 000;
var chart = new CanvasJS.Chart("chartContainer",{
zoomEnabled: true,
title: {
text: "ACE LIVE GOLD PRICE 999.9"
},
toolTip: {
shared: true
},
legend: {
verticalAlign: "top",
horizontalAlign: "center",
fontSize: 14,
fontWeight: "bold",
fontFamily: "calibri",
fontColor: "dimGrey"
},
axisX: {
title: "chart updates every 3 secs"
},
axisY:{
prefix: 'MYR',
includeZero: false
},
data: [{
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "BUY",
dataPoints: sample_data
},
{
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "SELL" ,
dataPoints: dataPoints2
}],
legend:{
cursor:"pointer",
itemclick :...