var myConfig = {
"type": "line",
"title":{
"text":"%scale-key-value"
},
"subtitle":{
"text":"the parsed value"
},
"crosshair-x":{
"plot-label":{
"text":"%scale-key-value: $%v",
"decimals":2,
"transform":{
"type":"date",
"all":"%g:%i %A"
}
},
"scale-label":{
"visible":false
}
},
"plot":{
"tooltip":{
"visible":false
},
"rules": [
{
rule: "%scale-key-text > 1457116200000",
lineColor: "red"
}
]
},
"utc":true,
"timezone":-5,
"scale-x":{
"min-value":"1457101800000",
"max-value":"1457125200000",
"step":"30minute",
"transform":{
"type":"date",
"all":"%g:%i"
},
"label":{
"text":"Trading Day"
},
"item":{
"font-size":10
},
"max-items":14,
},
"scale-y":{
"values":"30:34:1",
"format":"$%v",
"label":{
"text":"Price"
},
"item":{
"font-size":10
}
},
"series": [
{
"values":[
[1457101800000,30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
[1457103600000,31.30], //10:00 a.m.
[1457105400000,30.95], //10:30 a.m.
[1457107200000,30.99], //11:00 a.m.
[1457109000000,32.33], //11:30 a.m.
[1457110800000,33.34], //12:00 p.m.
[1457112600000,33.01], //12:30 p.m.
[1457114400000,34], //1:00 p.m.
[1457116200000,33.64], //1:30 p.m.
[1457118000000,32.59], //2:00 p.m.
[1457119800000,32.60], //2:30 p.m.
[1457121600000,31.99], //3:00 p.m.
[1457123400000,31.14], //3:30 p.m.
[1457125200000,32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: "100%"
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
