• 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.   </div>
    74.   <script>
    75.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; //real-time feed random math function
    76.     function realTimeFeed(callback) {
    77.       var tick = {};
    78.       tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
    79.       tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
    80.       callback(JSON.stringify(tick));
    81.     };
    82.  
    83.     // define top level feed control functions
    84.     function clearGraph() {
    85.       zingchart.exec('myChart', 'clearfeed')
    86.     }
    87.  
    88.     function startGraph() {
    89.       zingchart.exec('myChart', 'startfeed');
    90.     }
    91.  
    92.     function stopGraph() {
    93.       zingchart.exec('myChart', 'stopfeed');
    94.     }
    95.  
    96.     // window:load event for Javascript to run after HTML
    97.     // because this Javascript is injected into the document head
    98.     window.addEventListener('load', () => {
    99.       // Javascript code to execute after DOM content
    100.  
    101.       //clear start stop click events
    102.       document.getElementById('clear').addEventListener('click', clearGraph);
    103.       document.getElementById('start').addEventListener('click', startGraph);
    104.       document.getElementById('stop').addEventListener('click', stopGraph);
    105.  
    106.       // full ZingChart schema can be found here:
    107.       // https://www.zingchart.com/docs/api/json-configuration/
    108.       const myConfig = {
    109.         //chart styling
    110.         type: 'line',
    111.         globals: {
    112.           fontFamily: 'Roboto',
    113.         },
    114.         backgroundColor: '#fff',
    115.         title: {
    116.           backgroundColor: '#1565C0',
    117.           text: 'Real-Time Line Chart',
    118.           color: '#fff',
    119.           height: '30x',
    120.         },
    121.         plotarea: {
    122.           marginTop: '80px'
    123.         },
    124.         crosshairX: {
    125.           lineWidth: 4,
    126.           lineStyle: 'dashed',
    127.           lineColor: '#424242',
    128.           marker: {
    129.             visible: true,
    130.             size: 9
    131.           },
    132.           plotLabel: {
    133.             backgroundColor: '#fff',
    134.             borderColor: '#e3e3e3',
    135.             borderRadius: 5,
    136.             padding: 15,
    137.             fontSize: 15,
    138.             shadow: true,
    139.             shadowAlpha: 0.2,
    140.             shadowBlur: 5,
    141.             shadowDistance: 4,
    142.           },
    143.           scaleLabel: {
    144.             backgroundColor: '#424242',
    145.             padding: 5
    146.           }
    147.         },
    148.         scaleY: {
    149.           guide: {
    150.             visible: false
    151.           },
    152.         },
    153.         tooltip: {
    154.           visible: false
    155.         },
    156.         //real-time feed
    157.         refresh: {
    158.           type: 'feed',
    159.           transport: 'websockets',
    160.           url: 'wss://zingchart-ws-demo.glitch.me',
    161.           method: 'push'
    162.         },
    163.         plot: {
    164.           shadow: 1,
    165.           shadowColor: '#eee',
    166.           shadowDistance: '10px',
    167.           lineWidth: 5,
    168.           hoverState: {
    169.             visible: false
    170.           },
    171.           marker: {
    172.             visible: false
    173.           },
    174.           aspect: 'spline'
    175.         },
    176.         series: [{
    177.           values: [],
    178.           lineColor: '#2196F3',
    179.           text: 'Blue Line'
    180.         }, {
    181.           values: [],
    182.           lineColor: '#ff9800',
    183.           text: 'Orange Line'
    184.         }]
    185.       };
    186.  
    187.       // render chart with width and height to
    188.       // fill the parent container CSS dimensions
    189.       zingchart.render({
    190.         id: 'myChart',
    191.         data: myConfig,
    192.         height: '100%',
    193.         width: '100%',
    194.       });
    195.     });
    196.   </script>
    197. </body>
    198.  
    199. </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.   </div>
    20. </body>
    21.  
    22. </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. // window:load event for Javascript to run after HTML
    23. // because this Javascript is injected into the document head
    24. window.addEventListener('load', () => {
    25.   // Javascript code to execute after DOM content
    26.  
    27.   //clear start stop click events
    28.   document.getElementById('clear').addEventListener('click', clearGraph);
    29.   document.getElementById('start').addEventListener('click', startGraph);
    30.   document.getElementById('stop').addEventListener('click', stopGraph);
    31.  
    32.   // full ZingChart schema can be found here:
    33.   // https://www.zingchart.com/docs/api/json-configuration/
    34.   const myConfig = {
    35.     //chart styling
    36.     type: 'line',
    37.     globals: {
    38.       fontFamily: 'Roboto',
    39.     },
    40.     backgroundColor: '#fff',
    41.     title: {
    42.       backgroundColor: '#1565C0',
    43.       text: 'Real-Time Line Chart',
    44.       color: '#fff',
    45.       height: '30x',
    46.     },
    47.     plotarea: {
    48.       marginTop: '80px'
    49.     },
    50.     crosshairX: {
    51.       lineWidth: 4,
    52.       lineStyle: 'dashed',
    53.       lineColor: '#424242',
    54.       marker: {
    55.         visible: true,
    56.         size: 9
    57.       },
    58.       plotLabel: {
    59.         backgroundColor: '#fff',
    60.         borderColor: '#e3e3e3',
    61.         borderRadius: 5,
    62.         padding: 15,
    63.         fontSize: 15,
    64.         shadow: true,
    65.         shadowAlpha: 0.2,
    66.         shadowBlur: 5,
    67.         shadowDistance: 4,
    68.       },
    69.       scaleLabel: {
    70.         backgroundColor: '#424242',
    71.         padding: 5
    72.       }
    73.     },
    74.     scaleY: {
    75.       guide: {
    76.         visible: false
    77.       },
    78.     },
    79.     tooltip: {
    80.       visible: false
    81.     },
    82.     //real-time feed
    83.     refresh: {
    84.       type: 'feed',
    85.       transport: 'websockets',
    86.       url: 'wss://zingchart-ws-demo.glitch.me',
    87.       method: 'push'
    88.     },
    89.     plot: {
    90.       shadow: 1,
    91.       shadowColor: '#eee',
    92.       shadowDistance: '10px',
    93.       lineWidth: 5,
    94.       hoverState: {
    95.         visible: false
    96.       },
    97.       marker: {
    98.         visible: false
    99.       },
    100.       aspect: 'spline'
    101.     },
    102.     series: [{
    103.       values: [],
    104.       lineColor: '#2196F3',
    105.       text: 'Blue Line'
    106.     }, {
    107.       values: [],
    108.       lineColor: '#ff9800',
    109.       text: 'Orange Line'
    110.     }]
    111.   };
    112.  
    113.   // render chart with width and height to
    114.   // fill the parent container CSS dimensions
    115.   zingchart.render({
    116.     id: 'myChart',
    117.     data: myConfig,
    118.     height: '100%',
    119.     width: '100%',
    120.   });
    121. });