• 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,
          stopTimeout: 10,
        },
        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,
      stopTimeout: 10,
    },
    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%',
  });
});