• 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.     #myChart,
    11.     body,
    12.     html {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.  
    17.     .zc-ref {
    18.       display: none;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <button id="ZCPauseFeed">Pause Feed</button>
    25.   <button id="ZCStartFeed">Start Feed</button>
    26.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    27.   <script>
    28.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    29.     var minScaleValue = 1373045400000;
    30.     var myConfig = {
    31.       backgroundColor: "#fff",
    32.       globals: {
    33.         color: "#666"
    34.       },
    35.       graphset: [{
    36.         type: "line",
    37.         title: {
    38.           text: "Meter History 1",
    39.           adjustLayout: true,
    40.           "media-rules": [{
    41.             "max-width": 650,
    42.             "fontSize": 14
    43.           }]
    44.         },
    45.         width: "100%",
    46.         "media-rules": [{
    47.           "max-width": 650,
    48.           "x": 0,
    49.           "y": "60%",
    50.           "width": '100%',
    51.           "height": "40%%",
    52.         }],
    53.         scaleX: {
    54.           step: 3000,
    55.           transform: {
    56.             type: "date",
    57.             all: "%D<br>%H:%i:%s"
    58.           }
    59.         },
    60.         "scale-y": {
    61.           values: "0:100:25",
    62.           placement: "default",
    63.           lineColor: "#FB301E",
    64.           tick: {
    65.             lineColor: "#FB301E"
    66.           },
    67.           item: {
    68.             fontColor: "#FB301E",
    69.             bold: true
    70.           }
    71.         },
    72.         "scale-y-2": {
    73.           values: "0:20:5",
    74.           placement: "default",
    75.           lineColor: "#E2D51A",
    76.           tick: {
    77.             lineColor: "#E2D51A"
    78.           },
    79.           item: {
    80.             fontColor: "#E2D51A",
    81.             bold: true
    82.           }
    83.         },
    84.         "scale-y-3": {
    85.           values: "0:40:10",
    86.           placement: "default",
    87.           lineColor: "#00AE4D",
    88.           tick: {
    89.             lineColor: "#00AE4D",
    90.           },
    91.           item: {
    92.             fontColor: "#00AE4D",
    93.             bold: true
    94.           }
    95.         },
    96.         plotarea: {
    97.           margin: "dynamic",
    98.           marginRight: "4%"
    99.         },
    100.         crosshairX: {
    101.           shared: true,
    102.           lineColor: "#23211E",
    103.           scaleLabel: {
    104.             backgroundColor: "#E3DEDA",
    105.             fontColor: "#414042"
    106.           },
    107.           plotLabel: {
    108.             backgroundColor: "#f0ece8",
    109.             fontColor: "#414042",
    110.             borderWidth: 1,
    111.             borderColor: "#000"
    112.           }
    113.         },
    114.         tooltip: {
    115.           visible: false
    116.         },
    117.         series: [{
    118.           values: [
    119.             [minScaleValue, 15],
    120.             [minScaleValue + 3000, 15]
    121.           ],
    122.           lineColor: "#00AE4D",
    123.           text: "Energy Output",
    124.           scales: "scale-x, scale-y-3",
    125.           marker: {
    126.             borderWidth: 2,
    127.             borderColor: "#00AE4D",
    128.             backgroundColor: "#fff",
    129.             type: "circle"
    130.           }
    131.         }, {
    132.           values: [
    133.             [minScaleValue, 25],
    134.             [minScaleValue + 3000, 15]
    135.           ],
    136.           lineColor: "#E2D51A",
    137.           text: "Energy Recycled",
    138.           scales: "scale-x, scale-y-2",
    139.           marker: {
    140.             borderWidth: 2,
    141.             borderColor: "#E2D51A",
    142.             backgroundColor: "#fff",
    143.             type: "triangle",
    144.             size: 5
    145.           }
    146.         }, {
    147.           values: [
    148.             [minScaleValue, 35],
    149.             [minScaleValue + 3000, 25]
    150.           ],
    151.           lineColor: "#FB301E",
    152.           text: "Energy Consumed",
    153.           scales: "scale-x, scale-y",
    154.           marker: {
    155.             borderWidth: 2,
    156.             borderColor: "#FB301E",
    157.             backgroundColor: "#fff",
    158.             type: "square"
    159.           }
    160.         }]
    161.       }, {
    162.         type: "line",
    163.         title: {
    164.           text: "Meter History 2",
    165.           adjustLayout: true,
    166.           "media-rules": [{
    167.             "max-width": 650,
    168.             "fontSize": 14
    169.           }]
    170.         },
    171.         width: "100%",
    172.         "media-rules": [{
    173.           "max-width": 650,
    174.           "x": 0,
    175.           "y": "60%",
    176.           "width": '100%',
    177.           "height": "40%%",
    178.         }],
    179.         scaleX: {
    180.  
    181.           step: 3000,
    182.           transform: {
    183.             type: "date",
    184.             all: "%D<br>%H:%i:%s"
    185.           }
    186.         },
    187.         "scale-y": {
    188.           values: "0:100:25",
    189.           placement: "default",
    190.           lineColor: "#FB301E",
    191.           tick: {
    192.             lineColor: "#FB301E"
    193.           },
    194.           item: {
    195.             fontColor: "#FB301E",
    196.             bold: true
    197.           }
    198.         },
    199.         "scale-y-2": {
    200.           values: "0:20:5",
    201.           placement: "default",
    202.           lineColor: "#E2D51A",
    203.           tick: {
    204.             lineColor: "#E2D51A"
    205.           },
    206.           item: {
    207.             fontColor: "#E2D51A",
    208.             bold: true
    209.           }
    210.         },
    211.         "scale-y-3": {
    212.           values: "0:40:10",
    213.           placement: "default",
    214.           lineColor: "#00AE4D",
    215.           tick: {
    216.             lineColor: "#00AE4D",
    217.           },
    218.           item: {
    219.             fontColor: "#00AE4D",
    220.             bold: true
    221.           }
    222.         },
    223.         plotarea: {
    224.           margin: "dynamic",
    225.           marginRight: "4%"
    226.         },
    227.         crosshairX: {
    228.           shared: true,
    229.           lineColor: "#23211E",
    230.           scaleLabel: {
    231.             backgroundColor: "#E3DEDA",
    232.             fontColor: "#414042"
    233.           },
    234.           plotLabel: {
    235.             backgroundColor: "#f0ece8",
    236.             fontColor: "#414042",
    237.             borderWidth: 1,
    238.             borderColor: "#000"
    239.           }
    240.         },
    241.         tooltip: {
    242.           visible: false
    243.         },
    244.         series: [{
    245.           values: [
    246.             [minScaleValue, 25],
    247.             [minScaleValue + 3000, 15]
    248.           ],
    249.           lineColor: "#00AE4D",
    250.           text: "Energy Output",
    251.           scales: "scale-x, scale-y-3",
    252.           marker: {
    253.             borderWidth: 2,
    254.             borderColor: "#00AE4D",
    255.             backgroundColor: "#fff",
    256.             type: "circle"
    257.           }
    258.         }, {
    259.           values: [
    260.             [minScaleValue, 10],
    261.             [minScaleValue + 3000, 13]
    262.           ],
    263.           lineColor: "#E2D51A",
    264.           text: "Energy Recycled",
    265.           scales: "scale-x, scale-y-2",
    266.           marker: {
    267.             borderWidth: 2,
    268.             borderColor: "#E2D51A",
    269.             backgroundColor: "#fff",
    270.             type: "triangle",
    271.             size: 5
    272.           }
    273.         }, {
    274.           values: [
    275.             [minScaleValue, 15],
    276.             [minScaleValue + 3000, 15]
    277.           ],
    278.           lineColor: "#FB301E",
    279.           text: "Energy Consumed",
    280.           scales: "scale-x, scale-y",
    281.           marker: {
    282.             borderWidth: 2,
    283.             borderColor: "#FB301E",
    284.             backgroundColor: "#fff",
    285.             type: "square"
    286.           }
    287.         }]
    288.       }]
    289.     };
    290.  
    291.     zingchart.render({
    292.       id: 'myChart',
    293.       data: myConfig,
    294.       height: "100%",
    295.       width: '100%'
    296.     });
    297.  
    298.     /*
    299.      * SetInterval is used to simulate live input. We also have
    300.      * a feed attribute that takes in http requests, websockets,
    301.      * and return value from a JS function.
    302.      */
    303.     var feedInterval = null;
    304.     minScaleValue += 3000;
    305.  
    306.     function feedFunction() {
    307.       minScaleValue += 3000;
    308.       var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
    309.       var randomOffset0 = [-5, 5, 3, -3, 2, -2];
    310.       var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
    311.       var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
    312.       var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
    313.       var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    314.  
    315.  
    316.       // 3) update line graph
    317.       zingchart.exec('myChart', 'appendseriesvalues', {
    318.         graphid: 0,
    319.         update: false,
    320.         'max-values': 15,
    321.         values: [
    322.           [output0],
    323.           [output1],
    324.           [output2]
    325.         ]
    326.       });
    327.  
    328.       output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
    329.       output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
    330.       output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    331.  
    332.       zingchart.exec('myChart', 'appendseriesvalues', {
    333.         graphid: 1,
    334.         update: false,
    335.         'max-values': 15,
    336.         values: [
    337.           [output0],
    338.           [output1],
    339.           [output2]
    340.         ]
    341.       });
    342.  
    343.       // batch all updates
    344.       zingchart.exec('myChart', 'update');
    345.     }
    346.  
    347.     function startFeed() {
    348.       // start feed
    349.       if (!feedInterval)
    350.         feedInterval = setInterval(feedFunction, 1100);
    351.     }
    352.  
    353.     document.getElementById('ZCPauseFeed').addEventListener('click', function() {
    354.       clearInterval(feedInterval);
    355.       feedInterval = null;
    356.     });
    357.  
    358.     document.getElementById('ZCStartFeed').addEventListener('click', function() {
    359.       startFeed();
    360.     });
    361.  
    362.     // start feed
    363.     startFeed();
    364.   </script>
    365. </body>
    366.  
    367. </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.   <button id="ZCPauseFeed">Pause Feed</button>
    13.   <button id="ZCStartFeed">Start Feed</button>
    14.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    15. </body>
    16.  
    17. </html>
    1. #myChart,
    2. body,
    3. html {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    7.  
    8. .zc-ref {
    9.   display: none;
    10. }
    1. var minScaleValue = 1373045400000;
    2. var myConfig = {
    3.   backgroundColor: "#fff",
    4.   globals: {
    5.     color: "#666"
    6.   },
    7.   graphset: [{
    8.     type: "line",
    9.     title: {
    10.       text: "Meter History 1",
    11.       adjustLayout: true,
    12.       "media-rules": [{
    13.         "max-width": 650,
    14.         "fontSize": 14
    15.       }]
    16.     },
    17.     width: "100%",
    18.     "media-rules": [{
    19.       "max-width": 650,
    20.       "x": 0,
    21.       "y": "60%",
    22.       "width": '100%',
    23.       "height": "40%%",
    24.     }],
    25.     scaleX: {
    26.       step: 3000,
    27.       transform: {
    28.         type: "date",
    29.         all: "%D<br>%H:%i:%s"
    30.       }
    31.     },
    32.     "scale-y": {
    33.       values: "0:100:25",
    34.       placement: "default",
    35.       lineColor: "#FB301E",
    36.       tick: {
    37.         lineColor: "#FB301E"
    38.       },
    39.       item: {
    40.         fontColor: "#FB301E",
    41.         bold: true
    42.       }
    43.     },
    44.     "scale-y-2": {
    45.       values: "0:20:5",
    46.       placement: "default",
    47.       lineColor: "#E2D51A",
    48.       tick: {
    49.         lineColor: "#E2D51A"
    50.       },
    51.       item: {
    52.         fontColor: "#E2D51A",
    53.         bold: true
    54.       }
    55.     },
    56.     "scale-y-3": {
    57.       values: "0:40:10",
    58.       placement: "default",
    59.       lineColor: "#00AE4D",
    60.       tick: {
    61.         lineColor: "#00AE4D",
    62.       },
    63.       item: {
    64.         fontColor: "#00AE4D",
    65.         bold: true
    66.       }
    67.     },
    68.     plotarea: {
    69.       margin: "dynamic",
    70.       marginRight: "4%"
    71.     },
    72.     crosshairX: {
    73.       shared: true,
    74.       lineColor: "#23211E",
    75.       scaleLabel: {
    76.         backgroundColor: "#E3DEDA",
    77.         fontColor: "#414042"
    78.       },
    79.       plotLabel: {
    80.         backgroundColor: "#f0ece8",
    81.         fontColor: "#414042",
    82.         borderWidth: 1,
    83.         borderColor: "#000"
    84.       }
    85.     },
    86.     tooltip: {
    87.       visible: false
    88.     },
    89.     series: [{
    90.       values: [
    91.         [minScaleValue, 15],
    92.         [minScaleValue + 3000, 15]
    93.       ],
    94.       lineColor: "#00AE4D",
    95.       text: "Energy Output",
    96.       scales: "scale-x, scale-y-3",
    97.       marker: {
    98.         borderWidth: 2,
    99.         borderColor: "#00AE4D",
    100.         backgroundColor: "#fff",
    101.         type: "circle"
    102.       }
    103.     }, {
    104.       values: [
    105.         [minScaleValue, 25],
    106.         [minScaleValue + 3000, 15]
    107.       ],
    108.       lineColor: "#E2D51A",
    109.       text: "Energy Recycled",
    110.       scales: "scale-x, scale-y-2",
    111.       marker: {
    112.         borderWidth: 2,
    113.         borderColor: "#E2D51A",
    114.         backgroundColor: "#fff",
    115.         type: "triangle",
    116.         size: 5
    117.       }
    118.     }, {
    119.       values: [
    120.         [minScaleValue, 35],
    121.         [minScaleValue + 3000, 25]
    122.       ],
    123.       lineColor: "#FB301E",
    124.       text: "Energy Consumed",
    125.       scales: "scale-x, scale-y",
    126.       marker: {
    127.         borderWidth: 2,
    128.         borderColor: "#FB301E",
    129.         backgroundColor: "#fff",
    130.         type: "square"
    131.       }
    132.     }]
    133.   }, {
    134.     type: "line",
    135.     title: {
    136.       text: "Meter History 2",
    137.       adjustLayout: true,
    138.       "media-rules": [{
    139.         "max-width": 650,
    140.         "fontSize": 14
    141.       }]
    142.     },
    143.     width: "100%",
    144.     "media-rules": [{
    145.       "max-width": 650,
    146.       "x": 0,
    147.       "y": "60%",
    148.       "width": '100%',
    149.       "height": "40%%",
    150.     }],
    151.     scaleX: {
    152.  
    153.       step: 3000,
    154.       transform: {
    155.         type: "date",
    156.         all: "%D<br>%H:%i:%s"
    157.       }
    158.     },
    159.     "scale-y": {
    160.       values: "0:100:25",
    161.       placement: "default",
    162.       lineColor: "#FB301E",
    163.       tick: {
    164.         lineColor: "#FB301E"
    165.       },
    166.       item: {
    167.         fontColor: "#FB301E",
    168.         bold: true
    169.       }
    170.     },
    171.     "scale-y-2": {
    172.       values: "0:20:5",
    173.       placement: "default",
    174.       lineColor: "#E2D51A",
    175.       tick: {
    176.         lineColor: "#E2D51A"
    177.       },
    178.       item: {
    179.         fontColor: "#E2D51A",
    180.         bold: true
    181.       }
    182.     },
    183.     "scale-y-3": {
    184.       values: "0:40:10",
    185.       placement: "default",
    186.       lineColor: "#00AE4D",
    187.       tick: {
    188.         lineColor: "#00AE4D",
    189.       },
    190.       item: {
    191.         fontColor: "#00AE4D",
    192.         bold: true
    193.       }
    194.     },
    195.     plotarea: {
    196.       margin: "dynamic",
    197.       marginRight: "4%"
    198.     },
    199.     crosshairX: {
    200.       shared: true,
    201.       lineColor: "#23211E",
    202.       scaleLabel: {
    203.         backgroundColor: "#E3DEDA",
    204.         fontColor: "#414042"
    205.       },
    206.       plotLabel: {
    207.         backgroundColor: "#f0ece8",
    208.         fontColor: "#414042",
    209.         borderWidth: 1,
    210.         borderColor: "#000"
    211.       }
    212.     },
    213.     tooltip: {
    214.       visible: false
    215.     },
    216.     series: [{
    217.       values: [
    218.         [minScaleValue, 25],
    219.         [minScaleValue + 3000, 15]
    220.       ],
    221.       lineColor: "#00AE4D",
    222.       text: "Energy Output",
    223.       scales: "scale-x, scale-y-3",
    224.       marker: {
    225.         borderWidth: 2,
    226.         borderColor: "#00AE4D",
    227.         backgroundColor: "#fff",
    228.         type: "circle"
    229.       }
    230.     }, {
    231.       values: [
    232.         [minScaleValue, 10],
    233.         [minScaleValue + 3000, 13]
    234.       ],
    235.       lineColor: "#E2D51A",
    236.       text: "Energy Recycled",
    237.       scales: "scale-x, scale-y-2",
    238.       marker: {
    239.         borderWidth: 2,
    240.         borderColor: "#E2D51A",
    241.         backgroundColor: "#fff",
    242.         type: "triangle",
    243.         size: 5
    244.       }
    245.     }, {
    246.       values: [
    247.         [minScaleValue, 15],
    248.         [minScaleValue + 3000, 15]
    249.       ],
    250.       lineColor: "#FB301E",
    251.       text: "Energy Consumed",
    252.       scales: "scale-x, scale-y",
    253.       marker: {
    254.         borderWidth: 2,
    255.         borderColor: "#FB301E",
    256.         backgroundColor: "#fff",
    257.         type: "square"
    258.       }
    259.     }]
    260.   }]
    261. };
    262.  
    263. zingchart.render({
    264.   id: 'myChart',
    265.   data: myConfig,
    266.   height: "100%",
    267.   width: '100%'
    268. });
    269.  
    270. /*
    271.  * SetInterval is used to simulate live input. We also have
    272.  * a feed attribute that takes in http requests, websockets,
    273.  * and return value from a JS function.
    274.  */
    275. var feedInterval = null;
    276. minScaleValue += 3000;
    277.  
    278. function feedFunction() {
    279.   minScaleValue += 3000;
    280.   var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
    281.   var randomOffset0 = [-5, 5, 3, -3, 2, -2];
    282.   var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
    283.   var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
    284.   var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
    285.   var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    286.  
    287.  
    288.   // 3) update line graph
    289.   zingchart.exec('myChart', 'appendseriesvalues', {
    290.     graphid: 0,
    291.     update: false,
    292.     'max-values': 15,
    293.     values: [
    294.       [output0],
    295.       [output1],
    296.       [output2]
    297.     ]
    298.   });
    299.  
    300.   output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
    301.   output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
    302.   output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    303.  
    304.   zingchart.exec('myChart', 'appendseriesvalues', {
    305.     graphid: 1,
    306.     update: false,
    307.     'max-values': 15,
    308.     values: [
    309.       [output0],
    310.       [output1],
    311.       [output2]
    312.     ]
    313.   });
    314.  
    315.   // batch all updates
    316.   zingchart.exec('myChart', 'update');
    317. }
    318.  
    319. function startFeed() {
    320.   // start feed
    321.   if (!feedInterval)
    322.     feedInterval = setInterval(feedFunction, 1100);
    323. }
    324.  
    325. document.getElementById('ZCPauseFeed').addEventListener('click', function() {
    326.   clearInterval(feedInterval);
    327.   feedInterval = null;
    328. });
    329.  
    330. document.getElementById('ZCStartFeed').addEventListener('click', function() {
    331.   startFeed();
    332. });
    333.  
    334. // start feed
    335. startFeed();