api-methods-getinterval, -setinterval

<!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="get">get</button>
    <button id="set">Set</button>
    <span id="output">Interval is: 500</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 getInterval() {
      let interval = zingchart.exec('myChart', 'getinterval');
      output.textContent = `Interval is: ${interval}`;
    }
 
    function setInterval() {
      let interval = Math.floor(Math.random() * (1000 - 50)) + 50;
      zingchart.exec('myChart', 'setinterval', {
        interval: interval,
        update: false
      });
      output.textContent = `Interval is: ${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('get').addEventListener('click', getInterval);
      document.getElementById('set').addEventListener('click', setInterval);
 
      // 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
          },
          values: '0:100:25'
        },
        tooltip: {
          visible: false
        },
        //real-time feed
        refresh: {
          type: 'feed',
          transport: 'js',
          url: 'realTimeFeed()',
          interval: 500,
        },
        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="get">get</button>
    <button id="set">Set</button>
    <span id="output">Interval is: 500</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 getInterval() {
  let interval = zingchart.exec('myChart', 'getinterval');
  output.textContent = `Interval is: ${interval}`;
}
 
function setInterval() {
  let interval = Math.floor(Math.random() * (1000 - 50)) + 50;
  zingchart.exec('myChart', 'setinterval', {
    interval: interval,
    update: false
  });
  output.textContent = `Interval is: ${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('get').addEventListener('click', getInterval);
  document.getElementById('set').addEventListener('click', setInterval);
 
  // 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
      },
      values: '0:100:25'
    },
    tooltip: {
      visible: false
    },
    //real-time feed
    refresh: {
      type: 'feed',
      transport: 'js',
      url: 'realTimeFeed()',
      interval: 500,
    },
    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%',
  });
});