<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #myChart { margin: 0 auto; height: 380px; width: 98%; box-shadow: 5px 5px 5px #eee; background-color: #fff; border: 1px solid #eee; display: flex; flex-flow: column wrap; } .controls--container { display: flex; align-items: center; justify-content: center; } .controls--container button { margin: 40px; padding: 15px; background-color: #FF4081; border: none; color: #fff; box-shadow: 5px 5px 5px #eee; font-size: 16px; font-family: Roboto; cursor: pointer; transition: .1s; } .controls--container button:hover { opacity: .9; } /*button movement*/ .controls--container button:active { border-width: 0 0 2px 0; transform: translateY(8px); opacity: 0.9; } .zc-ref { display: none; } </style> </head> <body> <!-- CHART CONTAINER --> <div id="myChart"> <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a> </div> <div class="controls--container"> <button id="clear">Clear</button> <button id="stop">Stop</button> <button id="start">Start</button> <button id="random">Randomize Interval</button> <span id="output"></span> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; //real-time feed random math function function realTimeFeed(callback) { var tick = {}; tick.plot0 = parseInt(10 + 90 * Math.random(), 10); tick.plot1 = parseInt(10 + 90 * Math.random(), 10); callback(JSON.stringify(tick)); }; // define top level feed control functions function clearGraph() { zingchart.exec('myChart', 'clearfeed') } function startGraph() { zingchart.exec('myChart', 'startfeed'); } function stopGraph() { zingchart.exec('myChart', 'stopfeed'); } function randomizeInterval() { let interval = Math.floor(Math.random() * (1000 - 50)) + 50; zingchart.exec('myChart', 'setinterval', { interval: interval, update: false }); output.textContent = 'Interval set to: ' + interval; } // 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 //clear start stop click events document.getElementById('clear').addEventListener('click', clearGraph); document.getElementById('start').addEventListener('click', startGraph); document.getElementById('stop').addEventListener('click', stopGraph); document.getElementById('random').addEventListener('click', randomizeInterval); // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ const myConfig = { //chart styling type: 'line', globals: { fontFamily: 'Roboto', }, backgroundColor: '#fff', title: { backgroundColor: '#1565C0', text: 'Real-Time Line Chart', color: '#fff', height: '30x', }, plotarea: { marginTop: '80px' }, crosshairX: { lineWidth: 4, lineStyle: 'dashed', lineColor: '#424242', marker: { visible: true, size: 9 }, plotLabel: { backgroundColor: '#fff', borderColor: '#e3e3e3', borderRadius: 5, padding: 15, fontSize: 15, shadow: true, shadowAlpha: 0.2, shadowBlur: 5, shadowDistance: 4, }, scaleLabel: { backgroundColor: '#424242', padding: 5 } }, scaleY: { guide: { visible: false }, }, tooltip: { visible: false }, //real-time feed refresh: { type: 'feed', transport: 'http', url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=40&plots=1', interval: 200, maxTicks: 10, adjustScale: true }, plot: { shadow: 1, shadowColor: '#eee', shadowDistance: '10px', lineWidth: 5, hoverState: { visible: false }, marker: { visible: false }, aspect: 'spline' }, series: [{ values: [], lineColor: '#2196F3', text: 'Blue Line' }, { values: [], lineColor: '#ff9800', text: 'Orange Line' }] }; // render chart with width and height to // fill the parent container CSS dimensions zingchart.render({ id: 'myChart', data: myConfig, height: '100%', width: '100%', }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <!-- CHART CONTAINER --> <div id="myChart"> <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a> </div> <div class="controls--container"> <button id="clear">Clear</button> <button id="stop">Stop</button> <button id="start">Start</button> <button id="random">Randomize Interval</button> <span id="output"></span> </div> </body> </html>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #myChart { margin: 0 auto; height: 380px; width: 98%; box-shadow: 5px 5px 5px #eee; background-color: #fff; border: 1px solid #eee; display: flex; flex-flow: column wrap; } .controls--container { display: flex; align-items: center; justify-content: center; } .controls--container button { margin: 40px; padding: 15px; background-color: #FF4081; border: none; color: #fff; box-shadow: 5px 5px 5px #eee; font-size: 16px; font-family: Roboto; cursor: pointer; transition: .1s; } .controls--container button:hover { opacity: .9; } /*button movement*/ .controls--container button:active { border-width: 0 0 2px 0; transform: translateY(8px); opacity: 0.9; } .zc-ref { display: none; }
//real-time feed random math function function realTimeFeed(callback) { var tick = {}; tick.plot0 = parseInt(10 + 90 * Math.random(), 10); tick.plot1 = parseInt(10 + 90 * Math.random(), 10); callback(JSON.stringify(tick)); }; // define top level feed control functions function clearGraph() { zingchart.exec('myChart', 'clearfeed') } function startGraph() { zingchart.exec('myChart', 'startfeed'); } function stopGraph() { zingchart.exec('myChart', 'stopfeed'); } function randomizeInterval() { let interval = Math.floor(Math.random() * (1000 - 50)) + 50; zingchart.exec('myChart', 'setinterval', { interval: interval, update: false }); output.textContent = 'Interval set to: ' + interval; } // 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 //clear start stop click events document.getElementById('clear').addEventListener('click', clearGraph); document.getElementById('start').addEventListener('click', startGraph); document.getElementById('stop').addEventListener('click', stopGraph); document.getElementById('random').addEventListener('click', randomizeInterval); // full ZingChart schema can be found here: // https://www.zingchart.com/docs/api/json-configuration/ const myConfig = { //chart styling type: 'line', globals: { fontFamily: 'Roboto', }, backgroundColor: '#fff', title: { backgroundColor: '#1565C0', text: 'Real-Time Line Chart', color: '#fff', height: '30x', }, plotarea: { marginTop: '80px' }, crosshairX: { lineWidth: 4, lineStyle: 'dashed', lineColor: '#424242', marker: { visible: true, size: 9 }, plotLabel: { backgroundColor: '#fff', borderColor: '#e3e3e3', borderRadius: 5, padding: 15, fontSize: 15, shadow: true, shadowAlpha: 0.2, shadowBlur: 5, shadowDistance: 4, }, scaleLabel: { backgroundColor: '#424242', padding: 5 } }, scaleY: { guide: { visible: false }, }, tooltip: { visible: false }, //real-time feed refresh: { type: 'feed', transport: 'http', url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=40&plots=1', interval: 200, maxTicks: 10, adjustScale: true }, plot: { shadow: 1, shadowColor: '#eee', shadowDistance: '10px', lineWidth: 5, hoverState: { visible: false }, marker: { visible: false }, aspect: 'spline' }, series: [{ values: [], lineColor: '#2196F3', text: 'Blue Line' }, { values: [], lineColor: '#ff9800', text: 'Orange Line' }] }; // render chart with width and height to // fill the parent container CSS dimensions zingchart.render({ id: 'myChart', data: myConfig, height: '100%', width: '100%', }); });