<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style></style> </head> <body> <div id='myChart'></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var myConfig = { "type": "area", "crosshair-x": { "plot-label": { "text": "Stock price was<br>$%v<br>at %kv.", "decimals": 2, "transform": { "type": "date", "all": "%g:%i %a" }, "text-align": "center", "font-family": "Georgia", "font-size": 12, "font-color": "#666699", "padding": "10%", "border-radius": "5px", "callout": true, "placement": "node-top", //Set to "node-top" "multiple": true, //Set to true "offset-y": -5, //Adjust as needed "background-color": "transparent", }, "scale-label": { "visible": false }, "marker": { "type": "circle", "size": 5, "background-color": "white", "border-color": "#666699", "border-width": 1 }, "line-color": "white", "line-width": 2 }, "utc": true, "timezone": -5, //EST time "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:36:2", "format": "$%v", "label": { "text": "Price" }, "item": { "font-size": 10 }, "guide": { "line-style": "solid" } }, "plot": { "tooltip": { "visible": false } }, "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%" }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id='myChart'></div> </body> </html>
var myConfig = { "type": "area", "crosshair-x": { "plot-label": { "text": "Stock price was<br>$%v<br>at %kv.", "decimals": 2, "transform": { "type": "date", "all": "%g:%i %a" }, "text-align": "center", "font-family": "Georgia", "font-size": 12, "font-color": "#666699", "padding": "10%", "border-radius": "5px", "callout": true, "placement": "node-top", //Set to "node-top" "multiple": true, //Set to true "offset-y": -5, //Adjust as needed "background-color": "transparent", }, "scale-label": { "visible": false }, "marker": { "type": "circle", "size": 5, "background-color": "white", "border-color": "#666699", "border-width": 1 }, "line-color": "white", "line-width": 2 }, "utc": true, "timezone": -5, //EST time "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:36:2", "format": "$%v", "label": { "text": "Price" }, "item": { "font-size": 10 }, "guide": { "line-style": "solid" } }, "plot": { "tooltip": { "visible": false } }, "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%" });