Blog start of feed demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    form {
      text-align: center;
    }

    #myChart {
      min-height: 450px;
    }

    #myChart+div {
      /* center align feed controls */
      text-align: center;
    }


    .feed-control {
      z-index: 1000;
      padding: 10px;
      background: #29b6f6;
      border-style: solid;
      border-width: 0 0 5px 0;
      border-color: #2196f3;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      font-size: 16px;
      transition: .1s;
      margin-left: 15px;
    }

    .feed-control:active {
      border-width: 0 0 2px 0;
      transform: translateY(8px);
      opacity: 0.9;

    }

    .feed-control:focus {
      outline: none !important;
      /* make sure no css conflicts with this demo */
    }
  </style>
</head>

<body>
  <form onSubmit="return window.updateRules(this);">
    <label for="min-threshold">Min</label>
    <input type="number" id="min-threshold" value="55">
    <label for="max-threshold">Max</label>
    <input type="number" id="max-threshold" value="85">
    <label for="min-threshold-color">Min Color</label>
    <input type="color" id="min-threshold-color" value="#F44336">
    <label for="max-threshold-color">Max Color</label>
    <input type="color" id="max-threshold-color" value="#2196F3">
    <button type="submit">Submit Changes</button>
  </form>
  <div id='myChart'></div>
  <div>
    <button id="stop" class="feed-control">Stop</button>
    <button id="start" class="feed-control">Start</button>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // value for feed
    var valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
    var globalMin = 55;
    var globalMax = 85;
    var globalMinColor = '#F44336';
    var globalMaxColor = '#2196F3';
    var myConfig = {
      type: 'bar',
      shapes: [{
        type: 'rectangle',
        height: 10,
        width: 25,
        x: 75,
        y: 5,
        backgroundColor: '#C0C0C0',
        label: {
          text: 'Values Below Min',
          offsetX: 65
        }
      }],
      plot: {
        rules: getColorData()
      },
      tooltip: {
        visible: false
      },
      crosshairX: {
        lineWidth: '100%',
        alpha: .3,
        plotLabel: {
          fontSize: 18,
          padding: 8,
          borderRadius: 5,
          backgroundColor: '#e0e0e0',
          text: '<span style="color:%color">%v°</span>'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        label: {
          text: 'Insert Timestamp'
        }
      },
      scaleY: {
        format: '%v°',
        label: {
          text: 'Degrees In Celcius'
        }
      },
      refresh: {
        type: "feed",
        transport: "js",
        url: "feed()",
        interval: 400,
        resetTimeout: 1000
      },
      series: [{
        values: []
      }]
    }

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });


    /*
     * Feed function to mimick live data coming in
     */
    window.feed = function(callback) {
      var tick = {};
      tick.plot0 = valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
      callback(JSON.stringify(tick));
    };


    function getColorData(min, max, minColor, maxColor) {
      globalMin = typeof min !== 'undefined' ? min : globalMin;
      globalMax = typeof max !== 'undefined' ? max : globalMax;
      globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
      globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
      return [{
        "rule": "%v < " + globalMin,
        "background-color": '#C0C0C0'
      }, {
        "rule": "%v >= " + globalMin + "  && %v <= " + globalMax,
        "background-color": globalMinColor
      }, {
        "rule": "%v > " + globalMax,
        "background-color": globalMaxColor
      }]
    }

    /*
     * Global function at the window level due to example being used in
     * an iframe
     */
    window.updateRules = function(form) {
      try {
        // grab form values
        var minValue = form.querySelector('#min-threshold').value;
        var maxValue = form.querySelector('#max-threshold').value;
        var minColor = form.querySelector('#min-threshold-color').value;
        var maxColor = form.querySelector('#max-threshold-color').value;

        // minimally update the chart by updating the rules only
        zingchart.exec('myChart', 'modify', {
          data: {
            plot: {
              rules: getColorData(minValue, maxValue, minColor, maxColor)
            }
          }
        });
      } catch (e) {
        // make sure if error form doesn't submit
      }

      return false; // return false to prevent default behavior of form submission
    }


    /*
     * assign event listeners for buttons */

    document.getElementById('start').addEventListener('click', startGraph);
    document.getElementById('stop').addEventListener('click', stopGraph);

    function startGraph() {
      zingchart.exec('myChart', 'startfeed');
    }

    function stopGraph() {
      zingchart.exec('myChart', 'stopfeed');
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <form onSubmit="return window.updateRules(this);">
    <label for="min-threshold">Min</label>
    <input type="number" id="min-threshold" value="55">
    <label for="max-threshold">Max</label>
    <input type="number" id="max-threshold" value="85">
    <label for="min-threshold-color">Min Color</label>
    <input type="color" id="min-threshold-color" value="#F44336">
    <label for="max-threshold-color">Max Color</label>
    <input type="color" id="max-threshold-color" value="#2196F3">
    <button type="submit">Submit Changes</button>
  </form>
  <div id='myChart'></div>
  <div>
    <button id="stop" class="feed-control">Stop</button>
    <button id="start" class="feed-control">Start</button>
  </div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

form {
  text-align: center;
}

#myChart {
  min-height: 450px;
}

#myChart+div {
  /* center align feed controls */
  text-align: center;
}


.feed-control {
  z-index: 1000;
  padding: 10px;
  background: #29b6f6;
  border-style: solid;
  border-width: 0 0 5px 0;
  border-color: #2196f3;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: .1s;
  margin-left: 15px;
}

.feed-control:active {
  border-width: 0 0 2px 0;
  transform: translateY(8px);
  opacity: 0.9;

}

.feed-control:focus {
  outline: none !important;
  /* make sure no css conflicts with this demo */
}

// value for feed
var valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
var globalMin = 55;
var globalMax = 85;
var globalMinColor = '#F44336';
var globalMaxColor = '#2196F3';
var myConfig = {
  type: 'bar',
  shapes: [{
    type: 'rectangle',
    height: 10,
    width: 25,
    x: 75,
    y: 5,
    backgroundColor: '#C0C0C0',
    label: {
      text: 'Values Below Min',
      offsetX: 65
    }
  }],
  plot: {
    rules: getColorData()
  },
  tooltip: {
    visible: false
  },
  crosshairX: {
    lineWidth: '100%',
    alpha: .3,
    plotLabel: {
      fontSize: 18,
      padding: 8,
      borderRadius: 5,
      backgroundColor: '#e0e0e0',
      text: '<span style="color:%color">%v°</span>'
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    label: {
      text: 'Insert Timestamp'
    }
  },
  scaleY: {
    format: '%v°',
    label: {
      text: 'Degrees In Celcius'
    }
  },
  refresh: {
    type: "feed",
    transport: "js",
    url: "feed()",
    interval: 400,
    resetTimeout: 1000
  },
  series: [{
    values: []
  }]
}

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});


/*
 * Feed function to mimick live data coming in
 */
window.feed = function(callback) {
  var tick = {};
  tick.plot0 = valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
  callback(JSON.stringify(tick));
};


function getColorData(min, max, minColor, maxColor) {
  globalMin = typeof min !== 'undefined' ? min : globalMin;
  globalMax = typeof max !== 'undefined' ? max : globalMax;
  globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
  globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
  return [{
    "rule": "%v < " + globalMin,
    "background-color": '#C0C0C0'
  }, {
    "rule": "%v >= " + globalMin + "  && %v <= " + globalMax,
    "background-color": globalMinColor
  }, {
    "rule": "%v > " + globalMax,
    "background-color": globalMaxColor
  }]
}

/*
 * Global function at the window level due to example being used in
 * an iframe
 */
window.updateRules = function(form) {
  try {
    // grab form values
    var minValue = form.querySelector('#min-threshold').value;
    var maxValue = form.querySelector('#max-threshold').value;
    var minColor = form.querySelector('#min-threshold-color').value;
    var maxColor = form.querySelector('#max-threshold-color').value;

    // minimally update the chart by updating the rules only
    zingchart.exec('myChart', 'modify', {
      data: {
        plot: {
          rules: getColorData(minValue, maxValue, minColor, maxColor)
        }
      }
    });
  } catch (e) {
    // make sure if error form doesn't submit
  }

  return false; // return false to prevent default behavior of form submission
}


/*
 * assign event listeners for buttons */

document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);

function startGraph() {
  zingchart.exec('myChart', 'startfeed');
}

function stopGraph() {
  zingchart.exec('myChart', 'stopfeed');
}