• 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 */
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </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');
    }