• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.  
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     let chartConfig = {
    35.       globals: {
    36.         color: '#666',
    37.       },
    38.       backgroundColor: '#fff',
    39.       graphset: [{
    40.           type: 'gauge',
    41.           width: '31.5%',
    42.           height: '50%',
    43.           x: '0px',
    44.           y: '0px',
    45.           title: {
    46.             text: 'Energy Output',
    47.             mediaRules: [{
    48.               maxWidth: '650px',
    49.               visible: false,
    50.             }, ],
    51.           },
    52.           plot: {
    53.             csize: '3%',
    54.             size: '100%',
    55.           },
    56.           plotarea: {
    57.             marginTop: '35%',
    58.           },
    59.           scale: {
    60.             sizeFactor: 1.2,
    61.             mediaRules: [{
    62.               maxWidth: '650px',
    63.               sizeFactor: 1.6,
    64.             }, ],
    65.           },
    66.           scaleR: {
    67.             values: '0:40:10',
    68.             aperture: 130,
    69.             center: {
    70.               borderColor: '#23211E',
    71.               borderWidth: '2px',
    72.               mediaRules: [{
    73.                 maxWidth: '650px',
    74.                 size: '10px',
    75.               }, ],
    76.               size: '20px',
    77.             },
    78.             guide: {
    79.               alpha: 1,
    80.               backgroundColor: '#E3DEDA',
    81.             },
    82.             item: {
    83.               offsetR: 0,
    84.             },
    85.             markers: [{
    86.               type: 'area',
    87.               alpha: 0.95,
    88.               backgroundColor: '#00AE4D',
    89.               range: [0, 35],
    90.             }, ],
    91.             ring: {
    92.               backgroundColor: '#E3DEDA',
    93.               mediaRules: [{
    94.                 maxWidth: '650px',
    95.                 visible: false,
    96.               }, ],
    97.             },
    98.             tick: {
    99.               visible: false,
    100.             },
    101.           },
    102.           tooltip: {
    103.             visible: false,
    104.           },
    105.           mediaRules: [{
    106.               maxWidth: '650px',
    107.               width: '100%',
    108.               height: '20%',
    109.               x: '0px',
    110.               y: '2%',
    111.             },
    112.             {
    113.               minWidth: '651px',
    114.               width: '31.5%',
    115.               height: '50%',
    116.               x: '0px',
    117.               y: '0px',
    118.             },
    119.           ],
    120.           series: [{
    121.             values: [35],
    122.             valueBox: {
    123.               text: '%v',
    124.               fontColor: '#00AE4D',
    125.               fontSize: '14px',
    126.               mediaRules: [{
    127.                 fontSize: '10px',
    128.                 maxWidth: '650px',
    129.               }, ],
    130.               placement: 'center',
    131.             },
    132.             backgroundColor: '#23211E',
    133.           }, ],
    134.         },
    135.         {
    136.           type: 'gauge',
    137.           width: '31.5%',
    138.           height: '50%',
    139.           x: '34.5%',
    140.           y: '0px',
    141.           title: {
    142.             text: 'Energy Recycled',
    143.             mediaRules: [{
    144.               maxWidth: '650px',
    145.               visible: false,
    146.             }, ],
    147.           },
    148.           plot: {
    149.             csize: '3%',
    150.             size: '100%',
    151.           },
    152.           plotarea: {
    153.             marginTop: '35%',
    154.           },
    155.           scale: {
    156.             sizeFactor: 1.2,
    157.             mediaRules: [{
    158.               maxWidth: '650px',
    159.               sizeFactor: 1.6,
    160.             }, ],
    161.           },
    162.           scaleR: {
    163.             values: '0:20:5',
    164.             aperture: 130,
    165.             center: {
    166.               borderColor: '#23211E',
    167.               borderWidth: '2px',
    168.               mediaRules: [{
    169.                 maxWidth: '650px',
    170.                 size: '10px',
    171.               }, ],
    172.               size: '20px',
    173.             },
    174.             guide: {
    175.               alpha: 1,
    176.               backgroundColor: '#E3DEDA',
    177.             },
    178.             item: {
    179.               offsetR: 0,
    180.             },
    181.             markers: [{
    182.               type: 'area',
    183.               alpha: 0.95,
    184.               backgroundColor: '#E2D51A',
    185.               range: [0, 11],
    186.             }, ],
    187.             ring: {
    188.               backgroundColor: '#E3DEDA',
    189.               mediaRules: [{
    190.                 maxWidth: '650px',
    191.                 visible: false,
    192.               }, ],
    193.             },
    194.             tick: {
    195.               visible: false,
    196.             },
    197.           },
    198.           tooltip: {
    199.             visible: false,
    200.           },
    201.           mediaRules: [{
    202.               maxWidth: '650px',
    203.               width: '100%',
    204.               height: '20%',
    205.               x: '0px',
    206.               y: '20%',
    207.             },
    208.             {
    209.               minWidth: '651px',
    210.               width: '31.5%',
    211.               height: '50%',
    212.               x: '34.5%',
    213.               y: '0px',
    214.             },
    215.           ],
    216.           series: [{
    217.             values: [11],
    218.             valueBox: {
    219.               text: '%v',
    220.               fontColor: '#E2D51A',
    221.               fontSize: '14px',
    222.               mediaRules: [{
    223.                 fontSize: '10px',
    224.                 maxWidth: '650px',
    225.               }, ],
    226.               placement: 'center',
    227.             },
    228.             backgroundColor: '#23211E',
    229.           }, ],
    230.         },
    231.         {
    232.           type: 'gauge',
    233.           width: '31.5%',
    234.           height: '50%',
    235.           x: '69%',
    236.           y: '0px',
    237.           title: {
    238.             text: 'Energy Consumed',
    239.             mediaRules: [{
    240.               maxWidth: '650px',
    241.               visible: false,
    242.             }, ],
    243.           },
    244.           plot: {
    245.             csize: '3%',
    246.             size: '100%',
    247.           },
    248.           plotarea: {
    249.             marginTop: '35%',
    250.           },
    251.           scale: {
    252.             sizeFactor: 1.2,
    253.             mediaRules: [{
    254.               maxWidth: '650px',
    255.               sizeFactor: 1.6,
    256.             }, ],
    257.           },
    258.           scaleR: {
    259.             values: '0:100:25',
    260.             aperture: 130,
    261.             center: {
    262.               borderColor: '#23211E',
    263.               borderWidth: '2px',
    264.               mediaRules: [{
    265.                 maxWidth: '650px',
    266.                 size: '10px',
    267.               }, ],
    268.               size: '20px',
    269.             },
    270.             guide: {
    271.               alpha: 1,
    272.               backgroundColor: '#E3DEDA',
    273.             },
    274.             item: {
    275.               offsetR: 0,
    276.             },
    277.             markers: [{
    278.               type: 'area',
    279.               alpha: 0.95,
    280.               backgroundColor: '#FB301E',
    281.               range: [0, 28],
    282.             }, ],
    283.             ring: {
    284.               backgroundColor: '#E3DEDA',
    285.               mediaRules: [{
    286.                 maxWidth: '650px',
    287.                 visible: false,
    288.               }, ],
    289.             },
    290.             tick: {
    291.               visible: false,
    292.             },
    293.           },
    294.           tooltip: {
    295.             visible: false,
    296.           },
    297.           mediaRules: [{
    298.               maxWidth: '650px',
    299.               width: '100%',
    300.               height: '20%',
    301.               x: '0px',
    302.               y: '40%',
    303.             },
    304.             {
    305.               minWidth: '651px',
    306.               width: '31.5%',
    307.               height: '50%',
    308.               x: '69%',
    309.               y: '0px',
    310.             },
    311.           ],
    312.           series: [{
    313.             values: [28],
    314.             valueBox: {
    315.               text: '%v',
    316.               fontColor: '#FB301E',
    317.               fontSize: '14px',
    318.               mediaRules: [{
    319.                 fontSize: '10px',
    320.                 maxWidth: '650px',
    321.               }, ],
    322.               placement: 'center',
    323.             },
    324.             backgroundColor: '#23211E',
    325.           }, ],
    326.         },
    327.         {
    328.           type: 'line',
    329.           width: '100%',
    330.           height: '55%',
    331.           x: '0px',
    332.           y: '45%',
    333.           title: {
    334.             text: 'Meter History',
    335.             adjustLayout: true,
    336.             mediaRules: [{
    337.               fontSize: '14px',
    338.               maxWidth: '650px',
    339.             }, ],
    340.           },
    341.           plot: {
    342.             tooltip: {
    343.               visible: false,
    344.             },
    345.           },
    346.           plotarea: {
    347.             margin: 'dynamic',
    348.             marginRight: '4%',
    349.           },
    350.           scaleX: {
    351.             minValue: 1373045400000,
    352.             step: 3000,
    353.             transform: {
    354.               type: 'date',
    355.               all: '%D<br>%H:%i:%s',
    356.             },
    357.           },
    358.           scaleY: {
    359.             values: '0:100:25',
    360.             item: {
    361.               bold: true,
    362.               fontColor: '#FB301E',
    363.             },
    364.             lineColor: '#FB301E',
    365.             placement: 'default',
    366.             tick: {
    367.               lineColor: '#FB301E',
    368.             },
    369.           },
    370.           scaleY2: {
    371.             values: '0:20:5',
    372.             item: {
    373.               bold: true,
    374.               fontColor: '#E2D51A',
    375.             },
    376.             lineColor: '#E2D51A',
    377.             placement: 'default',
    378.             tick: {
    379.               lineColor: '#E2D51A',
    380.             },
    381.           },
    382.           scaleY3: {
    383.             values: '0:40:10',
    384.             item: {
    385.               bold: true,
    386.               fontColor: '#00AE4D',
    387.             },
    388.             lineColor: '#00AE4D',
    389.             placement: 'default',
    390.             tick: {
    391.               lineColor: '#00AE4D',
    392.             },
    393.           },
    394.           crosshairX: {
    395.             lineColor: '#23211E',
    396.             plotLabel: {
    397.               backgroundColor: '#f0ece8',
    398.               borderColor: '#000',
    399.               borderWidth: '1px',
    400.               fontColor: '#414042',
    401.             },
    402.             scaleLabel: {
    403.               backgroundColor: '#E3DEDA',
    404.               fontColor: '#414042',
    405.             },
    406.           },
    407.           mediaRules: [{
    408.             maxWidth: '650px',
    409.             width: '100%',
    410.             height: '40%%',
    411.             x: '0px',
    412.             y: '60%',
    413.           }, ],
    414.           series: [{
    415.               text: 'Energy Output',
    416.               values: [35, 38, 40, 35, 38, 40, 35, 38, 40],
    417.               lineColor: '#00AE4D',
    418.               marker: {
    419.                 type: 'circle',
    420.                 backgroundColor: '#fff',
    421.                 borderColor: '#00AE4D',
    422.                 borderWidth: '2px',
    423.               },
    424.               scales: 'scale-x, scale-y-3',
    425.             },
    426.             {
    427.               text: 'Energy Recycled',
    428.               values: [11, 15, 19, 11, 15, 19, 11, 15, 19],
    429.               lineColor: '#E2D51A',
    430.               marker: {
    431.                 type: 'triangle',
    432.                 backgroundColor: '#fff',
    433.                 borderColor: '#E2D51A',
    434.                 borderWidth: '2px',
    435.                 size: '5px',
    436.               },
    437.               scales: 'scale-x, scale-y-2',
    438.             },
    439.             {
    440.               text: 'Energy Consumed',
    441.               values: [28, 21, 30, 28, 21, 30, 28, 21, 30],
    442.               lineColor: '#FB301E',
    443.               marker: {
    444.                 type: 'square',
    445.                 backgroundColor: '#fff',
    446.                 borderColor: '#FB301E',
    447.                 borderWidth: '2px',
    448.               },
    449.               scales: 'scale-x, scale-y',
    450.             },
    451.           ],
    452.         },
    453.       ],
    454.     };
    455.  
    456.     zingchart.render({
    457.       id: 'myChart',
    458.       data: chartConfig,
    459.       height: '100%',
    460.       width: '100%',
    461.     });
    462.  
    463.     /*
    464.      * SetInterval is used to simulate live input. We also have
    465.      * a feed attribute that takes in http requests, websockets,
    466.      * and return value from a JS function.
    467.      */
    468.     setInterval(() => {
    469.       let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
    470.       let Marker = (bgColor, ceiling) => {
    471.         return {
    472.           type: 'area',
    473.           range: [0, ceiling],
    474.           backgroundColor: bgColor,
    475.           alpha: 0.95,
    476.         };
    477.       };
    478.       let randomOffset0 = [-5, 5, 3, -3, 2, -2];
    479.       let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
    480.       let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
    481.       let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
    482.       let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);
    483.  
    484.       // 1) update gauge values
    485.       zingchart.exec('myChart', 'appendseriesdata', {
    486.         graphid: 0,
    487.         plotindex: 0,
    488.         update: false,
    489.         data: {
    490.           values: [output0],
    491.         },
    492.       });
    493.       zingchart.exec('myChart', 'appendseriesdata', {
    494.         graphid: 1,
    495.         plotindex: 0,
    496.         update: false,
    497.         data: {
    498.           values: [output1],
    499.         },
    500.       });
    501.       zingchart.exec('myChart', 'appendseriesdata', {
    502.         graphid: 2,
    503.         plotindex: 0,
    504.         update: false,
    505.         data: {
    506.           values: [output2],
    507.         },
    508.       });
    509.  
    510.       // 2) update guage markers
    511.       zingchart.exec('myChart', 'modify', {
    512.         graphid: 0,
    513.         update: false,
    514.         data: {
    515.           scaleR: {
    516.             markers: [Marker(colors[0], output0)],
    517.           },
    518.         },
    519.       });
    520.       zingchart.exec('myChart', 'modify', {
    521.         graphid: 1,
    522.         update: false,
    523.         data: {
    524.           scaleR: {
    525.             markers: [Marker(colors[1], output1)],
    526.           },
    527.         },
    528.       });
    529.       zingchart.exec('myChart', 'modify', {
    530.         graphid: 2,
    531.         update: false,
    532.         data: {
    533.           scaleR: {
    534.             markers: [Marker(colors[2], output2)],
    535.           },
    536.         },
    537.       });
    538.  
    539.       // 3) update line graph
    540.       zingchart.exec('myChart', 'appendseriesvalues', {
    541.         graphid: 3,
    542.         update: false,
    543.         values: [
    544.           [output0],
    545.           [output1],
    546.           [output2]
    547.         ],
    548.       });
    549.  
    550.       // batch update all chart modifications
    551.       zingchart.exec('myChart', 'update');
    552.     }, 1500);
    553.   </script>
    554. </body>
    555.  
    556. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let chartConfig = {
    2.   globals: {
    3.     color: '#666',
    4.   },
    5.   backgroundColor: '#fff',
    6.   graphset: [{
    7.       type: 'gauge',
    8.       width: '31.5%',
    9.       height: '50%',
    10.       x: '0px',
    11.       y: '0px',
    12.       title: {
    13.         text: 'Energy Output',
    14.         mediaRules: [{
    15.           maxWidth: '650px',
    16.           visible: false,
    17.         }, ],
    18.       },
    19.       plot: {
    20.         csize: '3%',
    21.         size: '100%',
    22.       },
    23.       plotarea: {
    24.         marginTop: '35%',
    25.       },
    26.       scale: {
    27.         sizeFactor: 1.2,
    28.         mediaRules: [{
    29.           maxWidth: '650px',
    30.           sizeFactor: 1.6,
    31.         }, ],
    32.       },
    33.       scaleR: {
    34.         values: '0:40:10',
    35.         aperture: 130,
    36.         center: {
    37.           borderColor: '#23211E',
    38.           borderWidth: '2px',
    39.           mediaRules: [{
    40.             maxWidth: '650px',
    41.             size: '10px',
    42.           }, ],
    43.           size: '20px',
    44.         },
    45.         guide: {
    46.           alpha: 1,
    47.           backgroundColor: '#E3DEDA',
    48.         },
    49.         item: {
    50.           offsetR: 0,
    51.         },
    52.         markers: [{
    53.           type: 'area',
    54.           alpha: 0.95,
    55.           backgroundColor: '#00AE4D',
    56.           range: [0, 35],
    57.         }, ],
    58.         ring: {
    59.           backgroundColor: '#E3DEDA',
    60.           mediaRules: [{
    61.             maxWidth: '650px',
    62.             visible: false,
    63.           }, ],
    64.         },
    65.         tick: {
    66.           visible: false,
    67.         },
    68.       },
    69.       tooltip: {
    70.         visible: false,
    71.       },
    72.       mediaRules: [{
    73.           maxWidth: '650px',
    74.           width: '100%',
    75.           height: '20%',
    76.           x: '0px',
    77.           y: '2%',
    78.         },
    79.         {
    80.           minWidth: '651px',
    81.           width: '31.5%',
    82.           height: '50%',
    83.           x: '0px',
    84.           y: '0px',
    85.         },
    86.       ],
    87.       series: [{
    88.         values: [35],
    89.         valueBox: {
    90.           text: '%v',
    91.           fontColor: '#00AE4D',
    92.           fontSize: '14px',
    93.           mediaRules: [{
    94.             fontSize: '10px',
    95.             maxWidth: '650px',
    96.           }, ],
    97.           placement: 'center',
    98.         },
    99.         backgroundColor: '#23211E',
    100.       }, ],
    101.     },
    102.     {
    103.       type: 'gauge',
    104.       width: '31.5%',
    105.       height: '50%',
    106.       x: '34.5%',
    107.       y: '0px',
    108.       title: {
    109.         text: 'Energy Recycled',
    110.         mediaRules: [{
    111.           maxWidth: '650px',
    112.           visible: false,
    113.         }, ],
    114.       },
    115.       plot: {
    116.         csize: '3%',
    117.         size: '100%',
    118.       },
    119.       plotarea: {
    120.         marginTop: '35%',
    121.       },
    122.       scale: {
    123.         sizeFactor: 1.2,
    124.         mediaRules: [{
    125.           maxWidth: '650px',
    126.           sizeFactor: 1.6,
    127.         }, ],
    128.       },
    129.       scaleR: {
    130.         values: '0:20:5',
    131.         aperture: 130,
    132.         center: {
    133.           borderColor: '#23211E',
    134.           borderWidth: '2px',
    135.           mediaRules: [{
    136.             maxWidth: '650px',
    137.             size: '10px',
    138.           }, ],
    139.           size: '20px',
    140.         },
    141.         guide: {
    142.           alpha: 1,
    143.           backgroundColor: '#E3DEDA',
    144.         },
    145.         item: {
    146.           offsetR: 0,
    147.         },
    148.         markers: [{
    149.           type: 'area',
    150.           alpha: 0.95,
    151.           backgroundColor: '#E2D51A',
    152.           range: [0, 11],
    153.         }, ],
    154.         ring: {
    155.           backgroundColor: '#E3DEDA',
    156.           mediaRules: [{
    157.             maxWidth: '650px',
    158.             visible: false,
    159.           }, ],
    160.         },
    161.         tick: {
    162.           visible: false,
    163.         },
    164.       },
    165.       tooltip: {
    166.         visible: false,
    167.       },
    168.       mediaRules: [{
    169.           maxWidth: '650px',
    170.           width: '100%',
    171.           height: '20%',
    172.           x: '0px',
    173.           y: '20%',
    174.         },
    175.         {
    176.           minWidth: '651px',
    177.           width: '31.5%',
    178.           height: '50%',
    179.           x: '34.5%',
    180.           y: '0px',
    181.         },
    182.       ],
    183.       series: [{
    184.         values: [11],
    185.         valueBox: {
    186.           text: '%v',
    187.           fontColor: '#E2D51A',
    188.           fontSize: '14px',
    189.           mediaRules: [{
    190.             fontSize: '10px',
    191.             maxWidth: '650px',
    192.           }, ],
    193.           placement: 'center',
    194.         },
    195.         backgroundColor: '#23211E',
    196.       }, ],
    197.     },
    198.     {
    199.       type: 'gauge',
    200.       width: '31.5%',
    201.       height: '50%',
    202.       x: '69%',
    203.       y: '0px',
    204.       title: {
    205.         text: 'Energy Consumed',
    206.         mediaRules: [{
    207.           maxWidth: '650px',
    208.           visible: false,
    209.         }, ],
    210.       },
    211.       plot: {
    212.         csize: '3%',
    213.         size: '100%',
    214.       },
    215.       plotarea: {
    216.         marginTop: '35%',
    217.       },
    218.       scale: {
    219.         sizeFactor: 1.2,
    220.         mediaRules: [{
    221.           maxWidth: '650px',
    222.           sizeFactor: 1.6,
    223.         }, ],
    224.       },
    225.       scaleR: {
    226.         values: '0:100:25',
    227.         aperture: 130,
    228.         center: {
    229.           borderColor: '#23211E',
    230.           borderWidth: '2px',
    231.           mediaRules: [{
    232.             maxWidth: '650px',
    233.             size: '10px',
    234.           }, ],
    235.           size: '20px',
    236.         },
    237.         guide: {
    238.           alpha: 1,
    239.           backgroundColor: '#E3DEDA',
    240.         },
    241.         item: {
    242.           offsetR: 0,
    243.         },
    244.         markers: [{
    245.           type: 'area',
    246.           alpha: 0.95,
    247.           backgroundColor: '#FB301E',
    248.           range: [0, 28],
    249.         }, ],
    250.         ring: {
    251.           backgroundColor: '#E3DEDA',
    252.           mediaRules: [{
    253.             maxWidth: '650px',
    254.             visible: false,
    255.           }, ],
    256.         },
    257.         tick: {
    258.           visible: false,
    259.         },
    260.       },
    261.       tooltip: {
    262.         visible: false,
    263.       },
    264.       mediaRules: [{
    265.           maxWidth: '650px',
    266.           width: '100%',
    267.           height: '20%',
    268.           x: '0px',
    269.           y: '40%',
    270.         },
    271.         {
    272.           minWidth: '651px',
    273.           width: '31.5%',
    274.           height: '50%',
    275.           x: '69%',
    276.           y: '0px',
    277.         },
    278.       ],
    279.       series: [{
    280.         values: [28],
    281.         valueBox: {
    282.           text: '%v',
    283.           fontColor: '#FB301E',
    284.           fontSize: '14px',
    285.           mediaRules: [{
    286.             fontSize: '10px',
    287.             maxWidth: '650px',
    288.           }, ],
    289.           placement: 'center',
    290.         },
    291.         backgroundColor: '#23211E',
    292.       }, ],
    293.     },
    294.     {
    295.       type: 'line',
    296.       width: '100%',
    297.       height: '55%',
    298.       x: '0px',
    299.       y: '45%',
    300.       title: {
    301.         text: 'Meter History',
    302.         adjustLayout: true,
    303.         mediaRules: [{
    304.           fontSize: '14px',
    305.           maxWidth: '650px',
    306.         }, ],
    307.       },
    308.       plot: {
    309.         tooltip: {
    310.           visible: false,
    311.         },
    312.       },
    313.       plotarea: {
    314.         margin: 'dynamic',
    315.         marginRight: '4%',
    316.       },
    317.       scaleX: {
    318.         minValue: 1373045400000,
    319.         step: 3000,
    320.         transform: {
    321.           type: 'date',
    322.           all: '%D<br>%H:%i:%s',
    323.         },
    324.       },
    325.       scaleY: {
    326.         values: '0:100:25',
    327.         item: {
    328.           bold: true,
    329.           fontColor: '#FB301E',
    330.         },
    331.         lineColor: '#FB301E',
    332.         placement: 'default',
    333.         tick: {
    334.           lineColor: '#FB301E',
    335.         },
    336.       },
    337.       scaleY2: {
    338.         values: '0:20:5',
    339.         item: {
    340.           bold: true,
    341.           fontColor: '#E2D51A',
    342.         },
    343.         lineColor: '#E2D51A',
    344.         placement: 'default',
    345.         tick: {
    346.           lineColor: '#E2D51A',
    347.         },
    348.       },
    349.       scaleY3: {
    350.         values: '0:40:10',
    351.         item: {
    352.           bold: true,
    353.           fontColor: '#00AE4D',
    354.         },
    355.         lineColor: '#00AE4D',
    356.         placement: 'default',
    357.         tick: {
    358.           lineColor: '#00AE4D',
    359.         },
    360.       },
    361.       crosshairX: {
    362.         lineColor: '#23211E',
    363.         plotLabel: {
    364.           backgroundColor: '#f0ece8',
    365.           borderColor: '#000',
    366.           borderWidth: '1px',
    367.           fontColor: '#414042',
    368.         },
    369.         scaleLabel: {
    370.           backgroundColor: '#E3DEDA',
    371.           fontColor: '#414042',
    372.         },
    373.       },
    374.       mediaRules: [{
    375.         maxWidth: '650px',
    376.         width: '100%',
    377.         height: '40%%',
    378.         x: '0px',
    379.         y: '60%',
    380.       }, ],
    381.       series: [{
    382.           text: 'Energy Output',
    383.           values: [35, 38, 40, 35, 38, 40, 35, 38, 40],
    384.           lineColor: '#00AE4D',
    385.           marker: {
    386.             type: 'circle',
    387.             backgroundColor: '#fff',
    388.             borderColor: '#00AE4D',
    389.             borderWidth: '2px',
    390.           },
    391.           scales: 'scale-x, scale-y-3',
    392.         },
    393.         {
    394.           text: 'Energy Recycled',
    395.           values: [11, 15, 19, 11, 15, 19, 11, 15, 19],
    396.           lineColor: '#E2D51A',
    397.           marker: {
    398.             type: 'triangle',
    399.             backgroundColor: '#fff',
    400.             borderColor: '#E2D51A',
    401.             borderWidth: '2px',
    402.             size: '5px',
    403.           },
    404.           scales: 'scale-x, scale-y-2',
    405.         },
    406.         {
    407.           text: 'Energy Consumed',
    408.           values: [28, 21, 30, 28, 21, 30, 28, 21, 30],
    409.           lineColor: '#FB301E',
    410.           marker: {
    411.             type: 'square',
    412.             backgroundColor: '#fff',
    413.             borderColor: '#FB301E',
    414.             borderWidth: '2px',
    415.           },
    416.           scales: 'scale-x, scale-y',
    417.         },
    418.       ],
    419.     },
    420.   ],
    421. };
    422.  
    423. zingchart.render({
    424.   id: 'myChart',
    425.   data: chartConfig,
    426.   height: '100%',
    427.   width: '100%',
    428. });
    429.  
    430. /*
    431.  * SetInterval is used to simulate live input. We also have
    432.  * a feed attribute that takes in http requests, websockets,
    433.  * and return value from a JS function.
    434.  */
    435. setInterval(() => {
    436.   let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
    437.   let Marker = (bgColor, ceiling) => {
    438.     return {
    439.       type: 'area',
    440.       range: [0, ceiling],
    441.       backgroundColor: bgColor,
    442.       alpha: 0.95,
    443.     };
    444.   };
    445.   let randomOffset0 = [-5, 5, 3, -3, 2, -2];
    446.   let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
    447.   let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
    448.   let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
    449.   let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);
    450.  
    451.   // 1) update gauge values
    452.   zingchart.exec('myChart', 'appendseriesdata', {
    453.     graphid: 0,
    454.     plotindex: 0,
    455.     update: false,
    456.     data: {
    457.       values: [output0],
    458.     },
    459.   });
    460.   zingchart.exec('myChart', 'appendseriesdata', {
    461.     graphid: 1,
    462.     plotindex: 0,
    463.     update: false,
    464.     data: {
    465.       values: [output1],
    466.     },
    467.   });
    468.   zingchart.exec('myChart', 'appendseriesdata', {
    469.     graphid: 2,
    470.     plotindex: 0,
    471.     update: false,
    472.     data: {
    473.       values: [output2],
    474.     },
    475.   });
    476.  
    477.   // 2) update guage markers
    478.   zingchart.exec('myChart', 'modify', {
    479.     graphid: 0,
    480.     update: false,
    481.     data: {
    482.       scaleR: {
    483.         markers: [Marker(colors[0], output0)],
    484.       },
    485.     },
    486.   });
    487.   zingchart.exec('myChart', 'modify', {
    488.     graphid: 1,
    489.     update: false,
    490.     data: {
    491.       scaleR: {
    492.         markers: [Marker(colors[1], output1)],
    493.       },
    494.     },
    495.   });
    496.   zingchart.exec('myChart', 'modify', {
    497.     graphid: 2,
    498.     update: false,
    499.     data: {
    500.       scaleR: {
    501.         markers: [Marker(colors[2], output2)],
    502.       },
    503.     },
    504.   });
    505.  
    506.   // 3) update line graph
    507.   zingchart.exec('myChart', 'appendseriesvalues', {
    508.     graphid: 3,
    509.     update: false,
    510.     values: [
    511.       [output0],
    512.       [output1],
    513.       [output2]
    514.     ],
    515.   });
    516.  
    517.   // batch update all chart modifications
    518.   zingchart.exec('myChart', 'update');
    519. }, 1500);