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