• Edit
  • Download
  • <!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%',
      });
    });