• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script 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');
    }