• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     form {
    19.       text-align: center;
    20.     }
    21.  
    22.     #myChart {
    23.       min-height: 450px;
    24.     }
    25.  
    26.     #myChart+div {
    27.       /* center align feed controls */
    28.       text-align: center;
    29.     }
    30.  
    31.  
    32.     .feed-control {
    33.       z-index: 1000;
    34.       padding: 10px;
    35.       background: #29b6f6;
    36.       border-style: solid;
    37.       border-width: 0 0 5px 0;
    38.       border-color: #2196f3;
    39.       border-radius: 4px;
    40.       color: white;
    41.       cursor: pointer;
    42.       font-size: 16px;
    43.       transition: .1s;
    44.       margin-left: 15px;
    45.     }
    46.  
    47.     .feed-control:active {
    48.       border-width: 0 0 2px 0;
    49.       transform: translateY(8px);
    50.       opacity: 0.9;
    51.  
    52.     }
    53.  
    54.     .feed-control:focus {
    55.       outline: none !important;
    56.       /* make sure no css conflicts with this demo */
    57.     }
    58.   </style>
    59. </head>
    60.  
    61. <body>
    62.   <form onSubmit="return window.updateRules(this);">
    63.     <label for="min-threshold">Min</label>
    64.     <input type="number" id="min-threshold" value="55">
    65.     <label for="max-threshold">Max</label>
    66.     <input type="number" id="max-threshold" value="85">
    67.     <label for="min-threshold-color">Min Color</label>
    68.     <input type="color" id="min-threshold-color" value="#F44336">
    69.     <label for="max-threshold-color">Max Color</label>
    70.     <input type="color" id="max-threshold-color" value="#2196F3">
    71.     <button type="submit">Submit Changes</button>
    72.   </form>
    73.   <div id='myChart'></div>
    74.   <div>
    75.     <button id="stop" class="feed-control">Stop</button>
    76.     <button id="start" class="feed-control">Start</button>
    77.   </div>
    78.   <script>
    79.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // value for feed
    80.     var valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
    81.     var globalMin = 55;
    82.     var globalMax = 85;
    83.     var globalMinColor = '#F44336';
    84.     var globalMaxColor = '#2196F3';
    85.     var myConfig = {
    86.       type: 'bar',
    87.       shapes: [{
    88.         type: 'rectangle',
    89.         height: 10,
    90.         width: 25,
    91.         x: 75,
    92.         y: 5,
    93.         backgroundColor: '#C0C0C0',
    94.         label: {
    95.           text: 'Values Below Min',
    96.           offsetX: 65
    97.         }
    98.       }],
    99.       plot: {
    100.         rules: getColorData()
    101.       },
    102.       tooltip: {
    103.         visible: false
    104.       },
    105.       crosshairX: {
    106.         lineWidth: '100%',
    107.         alpha: .3,
    108.         plotLabel: {
    109.           fontSize: 18,
    110.           padding: 8,
    111.           borderRadius: 5,
    112.           backgroundColor: '#e0e0e0',
    113.           text: '<span style="color:%color">%v°</span>'
    114.         }
    115.       },
    116.       plotarea: {
    117.         margin: 'dynamic'
    118.       },
    119.       scaleX: {
    120.         label: {
    121.           text: 'Insert Timestamp'
    122.         }
    123.       },
    124.       scaleY: {
    125.         format: '%v°',
    126.         label: {
    127.           text: 'Degrees In Celcius'
    128.         }
    129.       },
    130.       refresh: {
    131.         type: "feed",
    132.         transport: "js",
    133.         url: "feed()",
    134.         interval: 400,
    135.         resetTimeout: 1000
    136.       },
    137.       series: [{
    138.         values: []
    139.       }]
    140.     }
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: myConfig,
    145.       height: '100%',
    146.       width: '100%'
    147.     });
    148.  
    149.  
    150.     /*
    151.      * Feed function to mimick live data coming in
    152.      */
    153.     window.feed = function(callback) {
    154.       var tick = {};
    155.       tick.plot0 = valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
    156.       callback(JSON.stringify(tick));
    157.     };
    158.  
    159.  
    160.     function getColorData(min, max, minColor, maxColor) {
    161.       globalMin = typeof min !== 'undefined' ? min : globalMin;
    162.       globalMax = typeof max !== 'undefined' ? max : globalMax;
    163.       globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
    164.       globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
    165.       return [{
    166.         "rule": "%v < " + globalMin,
    167.         "background-color": '#C0C0C0'
    168.       }, {
    169.         "rule": "%v >= " + globalMin + "  && %v <= " + globalMax,
    170.         "background-color": globalMinColor
    171.       }, {
    172.         "rule": "%v > " + globalMax,
    173.         "background-color": globalMaxColor
    174.       }]
    175.     }
    176.  
    177.     /*
    178.      * Global function at the window level due to example being used in
    179.      * an iframe
    180.      */
    181.     window.updateRules = function(form) {
    182.       try {
    183.         // grab form values
    184.         var minValue = form.querySelector('#min-threshold').value;
    185.         var maxValue = form.querySelector('#max-threshold').value;
    186.         var minColor = form.querySelector('#min-threshold-color').value;
    187.         var maxColor = form.querySelector('#max-threshold-color').value;
    188.  
    189.         // minimally update the chart by updating the rules only
    190.         zingchart.exec('myChart', 'modify', {
    191.           data: {
    192.             plot: {
    193.               rules: getColorData(minValue, maxValue, minColor, maxColor)
    194.             }
    195.           }
    196.         });
    197.       } catch (e) {
    198.         // make sure if error form doesn't submit
    199.       }
    200.  
    201.       return false; // return false to prevent default behavior of form submission
    202.     }
    203.  
    204.  
    205.     /*
    206.      * assign event listeners for buttons */
    207.  
    208.     document.getElementById('start').addEventListener('click', startGraph);
    209.     document.getElementById('stop').addEventListener('click', stopGraph);
    210.  
    211.     function startGraph() {
    212.       zingchart.exec('myChart', 'startfeed');
    213.     }
    214.  
    215.     function stopGraph() {
    216.       zingchart.exec('myChart', 'stopfeed');
    217.     }
    218.   </script>
    219. </body>
    220.  
    221. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <form onSubmit="return window.updateRules(this);">
    13.     <label for="min-threshold">Min</label>
    14.     <input type="number" id="min-threshold" value="55">
    15.     <label for="max-threshold">Max</label>
    16.     <input type="number" id="max-threshold" value="85">
    17.     <label for="min-threshold-color">Min Color</label>
    18.     <input type="color" id="min-threshold-color" value="#F44336">
    19.     <label for="max-threshold-color">Max Color</label>
    20.     <input type="color" id="max-threshold-color" value="#2196F3">
    21.     <button type="submit">Submit Changes</button>
    22.   </form>
    23.   <div id='myChart'></div>
    24.   <div>
    25.     <button id="stop" class="feed-control">Stop</button>
    26.     <button id="start" class="feed-control">Start</button>
    27.   </div>
    28. </body>
    29.  
    30. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. form {
    10.   text-align: center;
    11. }
    12.  
    13. #myChart {
    14.   min-height: 450px;
    15. }
    16.  
    17. #myChart+div {
    18.   /* center align feed controls */
    19.   text-align: center;
    20. }
    21.  
    22.  
    23. .feed-control {
    24.   z-index: 1000;
    25.   padding: 10px;
    26.   background: #29b6f6;
    27.   border-style: solid;
    28.   border-width: 0 0 5px 0;
    29.   border-color: #2196f3;
    30.   border-radius: 4px;
    31.   color: white;
    32.   cursor: pointer;
    33.   font-size: 16px;
    34.   transition: .1s;
    35.   margin-left: 15px;
    36. }
    37.  
    38. .feed-control:active {
    39.   border-width: 0 0 2px 0;
    40.   transform: translateY(8px);
    41.   opacity: 0.9;
    42.  
    43. }
    44.  
    45. .feed-control:focus {
    46.   outline: none !important;
    47.   /* make sure no css conflicts with this demo */
    48. }
    1. // value for feed
    2. var valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
    3. var globalMin = 55;
    4. var globalMax = 85;
    5. var globalMinColor = '#F44336';
    6. var globalMaxColor = '#2196F3';
    7. var myConfig = {
    8.   type: 'bar',
    9.   shapes: [{
    10.     type: 'rectangle',
    11.     height: 10,
    12.     width: 25,
    13.     x: 75,
    14.     y: 5,
    15.     backgroundColor: '#C0C0C0',
    16.     label: {
    17.       text: 'Values Below Min',
    18.       offsetX: 65
    19.     }
    20.   }],
    21.   plot: {
    22.     rules: getColorData()
    23.   },
    24.   tooltip: {
    25.     visible: false
    26.   },
    27.   crosshairX: {
    28.     lineWidth: '100%',
    29.     alpha: .3,
    30.     plotLabel: {
    31.       fontSize: 18,
    32.       padding: 8,
    33.       borderRadius: 5,
    34.       backgroundColor: '#e0e0e0',
    35.       text: '<span style="color:%color">%v°</span>'
    36.     }
    37.   },
    38.   plotarea: {
    39.     margin: 'dynamic'
    40.   },
    41.   scaleX: {
    42.     label: {
    43.       text: 'Insert Timestamp'
    44.     }
    45.   },
    46.   scaleY: {
    47.     format: '%v°',
    48.     label: {
    49.       text: 'Degrees In Celcius'
    50.     }
    51.   },
    52.   refresh: {
    53.     type: "feed",
    54.     transport: "js",
    55.     url: "feed()",
    56.     interval: 400,
    57.     resetTimeout: 1000
    58.   },
    59.   series: [{
    60.     values: []
    61.   }]
    62. }
    63.  
    64. zingchart.render({
    65.   id: 'myChart',
    66.   data: myConfig,
    67.   height: '100%',
    68.   width: '100%'
    69. });
    70.  
    71.  
    72. /*
    73.  * Feed function to mimick live data coming in
    74.  */
    75. window.feed = function(callback) {
    76.   var tick = {};
    77.   tick.plot0 = valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
    78.   callback(JSON.stringify(tick));
    79. };
    80.  
    81.  
    82. function getColorData(min, max, minColor, maxColor) {
    83.   globalMin = typeof min !== 'undefined' ? min : globalMin;
    84.   globalMax = typeof max !== 'undefined' ? max : globalMax;
    85.   globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
    86.   globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
    87.   return [{
    88.     "rule": "%v < " + globalMin,
    89.     "background-color": '#C0C0C0'
    90.   }, {
    91.     "rule": "%v >= " + globalMin + "  && %v <= " + globalMax,
    92.     "background-color": globalMinColor
    93.   }, {
    94.     "rule": "%v > " + globalMax,
    95.     "background-color": globalMaxColor
    96.   }]
    97. }
    98.  
    99. /*
    100.  * Global function at the window level due to example being used in
    101.  * an iframe
    102.  */
    103. window.updateRules = function(form) {
    104.   try {
    105.     // grab form values
    106.     var minValue = form.querySelector('#min-threshold').value;
    107.     var maxValue = form.querySelector('#max-threshold').value;
    108.     var minColor = form.querySelector('#min-threshold-color').value;
    109.     var maxColor = form.querySelector('#max-threshold-color').value;
    110.  
    111.     // minimally update the chart by updating the rules only
    112.     zingchart.exec('myChart', 'modify', {
    113.       data: {
    114.         plot: {
    115.           rules: getColorData(minValue, maxValue, minColor, maxColor)
    116.         }
    117.       }
    118.     });
    119.   } catch (e) {
    120.     // make sure if error form doesn't submit
    121.   }
    122.  
    123.   return false; // return false to prevent default behavior of form submission
    124. }
    125.  
    126.  
    127. /*
    128.  * assign event listeners for buttons */
    129.  
    130. document.getElementById('start').addEventListener('click', startGraph);
    131. document.getElementById('stop').addEventListener('click', stopGraph);
    132.  
    133. function startGraph() {
    134.   zingchart.exec('myChart', 'startfeed');
    135. }
    136.  
    137. function stopGraph() {
    138.   zingchart.exec('myChart', 'stopfeed');
    139. }