• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     #myChart {
    18.       margin: 0 auto;
    19.       height: 380px;
    20.       width: 98%;
    21.       box-shadow: 5px 5px 5px #eee;
    22.       background-color: #fff;
    23.       border: 1px solid #eee;
    24.       display: flex;
    25.       flex-flow: column wrap;
    26.     }
    27.  
    28.     .controls--container {
    29.       display: flex;
    30.       align-items: center;
    31.       justify-content: center;
    32.     }
    33.  
    34.     .controls--container button {
    35.       margin: 40px;
    36.       padding: 15px;
    37.       background-color: #FF4081;
    38.       border: none;
    39.       color: #fff;
    40.       box-shadow: 5px 5px 5px #eee;
    41.       font-size: 16px;
    42.       font-family: Roboto;
    43.       cursor: pointer;
    44.       transition: .1s;
    45.     }
    46.  
    47.     .controls--container button:hover {
    48.       opacity: .9;
    49.     }
    50.  
    51.     /*button movement*/
    52.     .controls--container button:active {
    53.       border-width: 0 0 2px 0;
    54.       transform: translateY(8px);
    55.       opacity: 0.9;
    56.     }
    57.  
    58.     .zc-ref {
    59.       display: none;
    60.     }
    61.   </style>
    62. </head>
    63.  
    64. <body>
    65.   <!-- CHART CONTAINER -->
    66.   <div id="myChart">
    67.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    68.   </div>
    69.   <div class="controls--container">
    70.     <button id="clear">Clear</button>
    71.     <button id="stop">Stop</button>
    72.     <button id="start">Start</button>
    73.     <button id="random">Randomize Interval</button>
    74.     <span id="output"></span>
    75.   </div>
    76.   <script>
    77.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; //real-time feed random math function
    78.     function realTimeFeed(callback) {
    79.       var tick = {};
    80.       tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
    81.       tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
    82.       callback(JSON.stringify(tick));
    83.     };
    84.  
    85.     // define top level feed control functions
    86.     function clearGraph() {
    87.       zingchart.exec('myChart', 'clearfeed')
    88.     }
    89.  
    90.     function startGraph() {
    91.       zingchart.exec('myChart', 'startfeed');
    92.     }
    93.  
    94.     function stopGraph() {
    95.       zingchart.exec('myChart', 'stopfeed');
    96.     }
    97.  
    98.     function randomizeInterval() {
    99.       let interval = Math.floor(Math.random() * (1000 - 50)) + 50;
    100.       zingchart.exec('myChart', 'setinterval', {
    101.         interval: interval,
    102.         update: false
    103.       });
    104.       output.textContent = 'Interval set to: ' + interval;
    105.     }
    106.     // window:load event for Javascript to run after HTML
    107.     // because this Javascript is injected into the document head
    108.     window.addEventListener('load', () => {
    109.       // Javascript code to execute after DOM content
    110.  
    111.       //clear start stop click events
    112.       document.getElementById('clear').addEventListener('click', clearGraph);
    113.       document.getElementById('start').addEventListener('click', startGraph);
    114.       document.getElementById('stop').addEventListener('click', stopGraph);
    115.       document.getElementById('random').addEventListener('click', randomizeInterval);
    116.  
    117.       // full ZingChart schema can be found here:
    118.       // https://www.zingchart.com/docs/api/json-configuration/
    119.       const myConfig = {
    120.         //chart styling
    121.         type: 'line',
    122.         globals: {
    123.           fontFamily: 'Roboto',
    124.         },
    125.         backgroundColor: '#fff',
    126.         title: {
    127.           backgroundColor: '#1565C0',
    128.           text: 'Real-Time Line Chart',
    129.           color: '#fff',
    130.           height: '30x',
    131.         },
    132.         plotarea: {
    133.           marginTop: '80px'
    134.         },
    135.         crosshairX: {
    136.           lineWidth: 4,
    137.           lineStyle: 'dashed',
    138.           lineColor: '#424242',
    139.           marker: {
    140.             visible: true,
    141.             size: 9
    142.           },
    143.           plotLabel: {
    144.             backgroundColor: '#fff',
    145.             borderColor: '#e3e3e3',
    146.             borderRadius: 5,
    147.             padding: 15,
    148.             fontSize: 15,
    149.             shadow: true,
    150.             shadowAlpha: 0.2,
    151.             shadowBlur: 5,
    152.             shadowDistance: 4,
    153.           },
    154.           scaleLabel: {
    155.             backgroundColor: '#424242',
    156.             padding: 5
    157.           }
    158.         },
    159.         scaleY: {
    160.           guide: {
    161.             visible: false
    162.           },
    163.         },
    164.         tooltip: {
    165.           visible: false
    166.         },
    167.         //real-time feed
    168.         refresh: {
    169.           type: 'feed',
    170.           transport: 'http',
    171.           url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=40&plots=1',
    172.           interval: 200,
    173.           maxTicks: 10,
    174.           adjustScale: true,
    175.           resetTimeout: 10,
    176.         },
    177.         plot: {
    178.           shadow: 1,
    179.           shadowColor: '#eee',
    180.           shadowDistance: '10px',
    181.           lineWidth: 5,
    182.           hoverState: {
    183.             visible: false
    184.           },
    185.           marker: {
    186.             visible: false
    187.           },
    188.           aspect: 'spline'
    189.         },
    190.         series: [{
    191.           values: [],
    192.           lineColor: '#2196F3',
    193.           text: 'Blue Line'
    194.         }, {
    195.           values: [],
    196.           lineColor: '#ff9800',
    197.           text: 'Orange Line'
    198.         }]
    199.       };
    200.  
    201.       // render chart with width and height to
    202.       // fill the parent container CSS dimensions
    203.       zingchart.render({
    204.         id: 'myChart',
    205.         data: myConfig,
    206.         height: '100%',
    207.         width: '100%',
    208.       });
    209.     });
    210.   </script>
    211. </body>
    212.  
    213. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart">
    13.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    14.   </div>
    15.   <div class="controls--container">
    16.     <button id="clear">Clear</button>
    17.     <button id="stop">Stop</button>
    18.     <button id="start">Start</button>
    19.     <button id="random">Randomize Interval</button>
    20.     <span id="output"></span>
    21.   </div>
    22. </body>
    23.  
    24. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   margin: 0 auto;
    11.   height: 380px;
    12.   width: 98%;
    13.   box-shadow: 5px 5px 5px #eee;
    14.   background-color: #fff;
    15.   border: 1px solid #eee;
    16.   display: flex;
    17.   flex-flow: column wrap;
    18. }
    19.  
    20. .controls--container {
    21.   display: flex;
    22.   align-items: center;
    23.   justify-content: center;
    24. }
    25.  
    26. .controls--container button {
    27.   margin: 40px;
    28.   padding: 15px;
    29.   background-color: #FF4081;
    30.   border: none;
    31.   color: #fff;
    32.   box-shadow: 5px 5px 5px #eee;
    33.   font-size: 16px;
    34.   font-family: Roboto;
    35.   cursor: pointer;
    36.   transition: .1s;
    37. }
    38.  
    39. .controls--container button:hover {
    40.   opacity: .9;
    41. }
    42.  
    43. /*button movement*/
    44. .controls--container button:active {
    45.   border-width: 0 0 2px 0;
    46.   transform: translateY(8px);
    47.   opacity: 0.9;
    48. }
    49.  
    50. .zc-ref {
    51.   display: none;
    52. }
    1. //real-time feed random math function
    2. function realTimeFeed(callback) {
    3.   var tick = {};
    4.   tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
    5.   tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
    6.   callback(JSON.stringify(tick));
    7. };
    8.  
    9. // define top level feed control functions
    10. function clearGraph() {
    11.   zingchart.exec('myChart', 'clearfeed')
    12. }
    13.  
    14. function startGraph() {
    15.   zingchart.exec('myChart', 'startfeed');
    16. }
    17.  
    18. function stopGraph() {
    19.   zingchart.exec('myChart', 'stopfeed');
    20. }
    21.  
    22. function randomizeInterval() {
    23.   let interval = Math.floor(Math.random() * (1000 - 50)) + 50;
    24.   zingchart.exec('myChart', 'setinterval', {
    25.     interval: interval,
    26.     update: false
    27.   });
    28.   output.textContent = 'Interval set to: ' + interval;
    29. }
    30. // window:load event for Javascript to run after HTML
    31. // because this Javascript is injected into the document head
    32. window.addEventListener('load', () => {
    33.   // Javascript code to execute after DOM content
    34.  
    35.   //clear start stop click events
    36.   document.getElementById('clear').addEventListener('click', clearGraph);
    37.   document.getElementById('start').addEventListener('click', startGraph);
    38.   document.getElementById('stop').addEventListener('click', stopGraph);
    39.   document.getElementById('random').addEventListener('click', randomizeInterval);
    40.  
    41.   // full ZingChart schema can be found here:
    42.   // https://www.zingchart.com/docs/api/json-configuration/
    43.   const myConfig = {
    44.     //chart styling
    45.     type: 'line',
    46.     globals: {
    47.       fontFamily: 'Roboto',
    48.     },
    49.     backgroundColor: '#fff',
    50.     title: {
    51.       backgroundColor: '#1565C0',
    52.       text: 'Real-Time Line Chart',
    53.       color: '#fff',
    54.       height: '30x',
    55.     },
    56.     plotarea: {
    57.       marginTop: '80px'
    58.     },
    59.     crosshairX: {
    60.       lineWidth: 4,
    61.       lineStyle: 'dashed',
    62.       lineColor: '#424242',
    63.       marker: {
    64.         visible: true,
    65.         size: 9
    66.       },
    67.       plotLabel: {
    68.         backgroundColor: '#fff',
    69.         borderColor: '#e3e3e3',
    70.         borderRadius: 5,
    71.         padding: 15,
    72.         fontSize: 15,
    73.         shadow: true,
    74.         shadowAlpha: 0.2,
    75.         shadowBlur: 5,
    76.         shadowDistance: 4,
    77.       },
    78.       scaleLabel: {
    79.         backgroundColor: '#424242',
    80.         padding: 5
    81.       }
    82.     },
    83.     scaleY: {
    84.       guide: {
    85.         visible: false
    86.       },
    87.     },
    88.     tooltip: {
    89.       visible: false
    90.     },
    91.     //real-time feed
    92.     refresh: {
    93.       type: 'feed',
    94.       transport: 'http',
    95.       url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=40&plots=1',
    96.       interval: 200,
    97.       maxTicks: 10,
    98.       adjustScale: true,
    99.       resetTimeout: 10,
    100.     },
    101.     plot: {
    102.       shadow: 1,
    103.       shadowColor: '#eee',
    104.       shadowDistance: '10px',
    105.       lineWidth: 5,
    106.       hoverState: {
    107.         visible: false
    108.       },
    109.       marker: {
    110.         visible: false
    111.       },
    112.       aspect: 'spline'
    113.     },
    114.     series: [{
    115.       values: [],
    116.       lineColor: '#2196F3',
    117.       text: 'Blue Line'
    118.     }, {
    119.       values: [],
    120.       lineColor: '#ff9800',
    121.       text: 'Orange Line'
    122.     }]
    123.   };
    124.  
    125.   // render chart with width and height to
    126.   // fill the parent container CSS dimensions
    127.   zingchart.render({
    128.     id: 'myChart',
    129.     data: myConfig,
    130.     height: '100%',
    131.     width: '100%',
    132.   });
    133. });