<!DOCTYPE html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> .zc-html, .zc-body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; } </style> </head> <body class="zc-body"> <!-- CHART CONTAINER --> <div id="myChart" class="chart--container"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ let chartConfig = { "graphset": [{ animateType: 'initial', "type": "area", "scale-x": { zooming: true, "transform": { "type": "date", "all": "%m/%d/%y<br>%h:%i %A" } }, "plot": { "animation": { active: false, onChange: false, "effect": "ANIMATION_EXPAND_VERTICAL", "method": "ANIMATION_REGULAR_EASE_OUT", "sequence": "ANIMATION_BY_PLOT", "speed": 500 } }, "series": [{ "values": [ [1587438788993, 125], [1587439295588, 175], [1587439867234, 375], [1587440076168, 300], [1588287335393, 275], [1588792869740, 300] ], "line-color": "#8da0cb", "background-color": "#8da0cb" }] }] }; // render chart zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); }); </script> </body> </html>
<!DOCTYPE html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body class="zc-body"> <!-- CHART CONTAINER --> <div id="myChart" class="chart--container"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> </body> </html>
.zc-html, .zc-body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; }
// window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ let chartConfig = { "graphset": [{ animateType: 'initial', "type": "area", "scale-x": { zooming: true, "transform": { "type": "date", "all": "%m/%d/%y<br>%h:%i %A" } }, "plot": { "animation": { active: false, onChange: false, "effect": "ANIMATION_EXPAND_VERTICAL", "method": "ANIMATION_REGULAR_EASE_OUT", "sequence": "ANIMATION_BY_PLOT", "speed": 500 } }, "series": [{ "values": [ [1587438788993, 125], [1587439295588, 175], [1587439867234, 375], [1587440076168, 300], [1588287335393, 275], [1588792869740, 300] ], "line-color": "#8da0cb", "background-color": "#8da0cb" }] }] }; // render chart zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); });