• 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>
        #myChart,
        body,
        html {
          height: 100%;
          width: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <button id="ZCPauseFeed">Pause Feed</button>
      <button id="ZCStartFeed">Start Feed</button>
      <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var minScaleValue = 1373045400000;
        var myConfig = {
          backgroundColor: "#fff",
          globals: {
            color: "#666"
          },
          graphset: [{
            type: "line",
            title: {
              text: "Meter History 1",
              adjustLayout: true,
              "media-rules": [{
                "max-width": 650,
                "fontSize": 14
              }]
            },
            width: "100%",
            "media-rules": [{
              "max-width": 650,
              "x": 0,
              "y": "60%",
              "width": '100%',
              "height": "40%%",
            }],
            scaleX: {
              step: 3000,
              transform: {
                type: "date",
                all: "%D<br>%H:%i:%s"
              }
            },
            "scale-y": {
              values: "0:100:25",
              placement: "default",
              lineColor: "#FB301E",
              tick: {
                lineColor: "#FB301E"
              },
              item: {
                fontColor: "#FB301E",
                bold: true
              }
            },
            "scale-y-2": {
              values: "0:20:5",
              placement: "default",
              lineColor: "#E2D51A",
              tick: {
                lineColor: "#E2D51A"
              },
              item: {
                fontColor: "#E2D51A",
                bold: true
              }
            },
            "scale-y-3": {
              values: "0:40:10",
              placement: "default",
              lineColor: "#00AE4D",
              tick: {
                lineColor: "#00AE4D",
              },
              item: {
                fontColor: "#00AE4D",
                bold: true
              }
            },
            plotarea: {
              margin: "dynamic",
              marginRight: "4%"
            },
            crosshairX: {
              shared: true,
              lineColor: "#23211E",
              scaleLabel: {
                backgroundColor: "#E3DEDA",
                fontColor: "#414042"
              },
              plotLabel: {
                backgroundColor: "#f0ece8",
                fontColor: "#414042",
                borderWidth: 1,
                borderColor: "#000"
              }
            },
            tooltip: {
              visible: false
            },
            series: [{
              values: [
                [minScaleValue, 15],
                [minScaleValue + 3000, 15]
              ],
              lineColor: "#00AE4D",
              text: "Energy Output",
              scales: "scale-x, scale-y-3",
              marker: {
                borderWidth: 2,
                borderColor: "#00AE4D",
                backgroundColor: "#fff",
                type: "circle"
              }
            }, {
              values: [
                [minScaleValue, 25],
                [minScaleValue + 3000, 15]
              ],
              lineColor: "#E2D51A",
              text: "Energy Recycled",
              scales: "scale-x, scale-y-2",
              marker: {
                borderWidth: 2,
                borderColor: "#E2D51A",
                backgroundColor: "#fff",
                type: "triangle",
                size: 5
              }
            }, {
              values: [
                [minScaleValue, 35],
                [minScaleValue + 3000, 25]
              ],
              lineColor: "#FB301E",
              text: "Energy Consumed",
              scales: "scale-x, scale-y",
              marker: {
                borderWidth: 2,
                borderColor: "#FB301E",
                backgroundColor: "#fff",
                type: "square"
              }
            }]
          }, {
            type: "line",
            title: {
              text: "Meter History 2",
              adjustLayout: true,
              "media-rules": [{
                "max-width": 650,
                "fontSize": 14
              }]
            },
            width: "100%",
            "media-rules": [{
              "max-width": 650,
              "x": 0,
              "y": "60%",
              "width": '100%',
              "height": "40%%",
            }],
            scaleX: {
    
              step: 3000,
              transform: {
                type: "date",
                all: "%D<br>%H:%i:%s"
              }
            },
            "scale-y": {
              values: "0:100:25",
              placement: "default",
              lineColor: "#FB301E",
              tick: {
                lineColor: "#FB301E"
              },
              item: {
                fontColor: "#FB301E",
                bold: true
              }
            },
            "scale-y-2": {
              values: "0:20:5",
              placement: "default",
              lineColor: "#E2D51A",
              tick: {
                lineColor: "#E2D51A"
              },
              item: {
                fontColor: "#E2D51A",
                bold: true
              }
            },
            "scale-y-3": {
              values: "0:40:10",
              placement: "default",
              lineColor: "#00AE4D",
              tick: {
                lineColor: "#00AE4D",
              },
              item: {
                fontColor: "#00AE4D",
                bold: true
              }
            },
            plotarea: {
              margin: "dynamic",
              marginRight: "4%"
            },
            crosshairX: {
              shared: true,
              lineColor: "#23211E",
              scaleLabel: {
                backgroundColor: "#E3DEDA",
                fontColor: "#414042"
              },
              plotLabel: {
                backgroundColor: "#f0ece8",
                fontColor: "#414042",
                borderWidth: 1,
                borderColor: "#000"
              }
            },
            tooltip: {
              visible: false
            },
            series: [{
              values: [
                [minScaleValue, 25],
                [minScaleValue + 3000, 15]
              ],
              lineColor: "#00AE4D",
              text: "Energy Output",
              scales: "scale-x, scale-y-3",
              marker: {
                borderWidth: 2,
                borderColor: "#00AE4D",
                backgroundColor: "#fff",
                type: "circle"
              }
            }, {
              values: [
                [minScaleValue, 10],
                [minScaleValue + 3000, 13]
              ],
              lineColor: "#E2D51A",
              text: "Energy Recycled",
              scales: "scale-x, scale-y-2",
              marker: {
                borderWidth: 2,
                borderColor: "#E2D51A",
                backgroundColor: "#fff",
                type: "triangle",
                size: 5
              }
            }, {
              values: [
                [minScaleValue, 15],
                [minScaleValue + 3000, 15]
              ],
              lineColor: "#FB301E",
              text: "Energy Consumed",
              scales: "scale-x, scale-y",
              marker: {
                borderWidth: 2,
                borderColor: "#FB301E",
                backgroundColor: "#fff",
                type: "square"
              }
            }]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: "100%",
          width: '100%'
        });
    
        /*
         * SetInterval is used to simulate live input. We also have
         * a feed attribute that takes in http requests, websockets,
         * and return value from a JS function.
         */
        var feedInterval = null;
        minScaleValue += 3000;
    
        function feedFunction() {
          minScaleValue += 3000;
          var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
          var randomOffset0 = [-5, 5, 3, -3, 2, -2];
          var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
          var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
          var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
          var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    
    
          // 3) update line graph
          zingchart.exec('myChart', 'appendseriesvalues', {
            graphid: 0,
            update: false,
            'max-values': 15,
            values: [
              [output0],
              [output1],
              [output2]
            ]
          });
    
          output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
          output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
          output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    
          zingchart.exec('myChart', 'appendseriesvalues', {
            graphid: 1,
            update: false,
            'max-values': 15,
            values: [
              [output0],
              [output1],
              [output2]
            ]
          });
    
          // batch all updates
          zingchart.exec('myChart', 'update');
        }
    
        function startFeed() {
          // start feed
          if (!feedInterval)
            feedInterval = setInterval(feedFunction, 1100);
        }
    
        document.getElementById('ZCPauseFeed').addEventListener('click', function() {
          clearInterval(feedInterval);
          feedInterval = null;
        });
    
        document.getElementById('ZCStartFeed').addEventListener('click', function() {
          startFeed();
        });
    
        // start feed
        startFeed();
      </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>
      <button id="ZCPauseFeed">Pause Feed</button>
      <button id="ZCStartFeed">Start Feed</button>
      <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    </body>
    
    </html>
    #myChart,
    body,
    html {
      height: 100%;
      width: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    var minScaleValue = 1373045400000;
    var myConfig = {
      backgroundColor: "#fff",
      globals: {
        color: "#666"
      },
      graphset: [{
        type: "line",
        title: {
          text: "Meter History 1",
          adjustLayout: true,
          "media-rules": [{
            "max-width": 650,
            "fontSize": 14
          }]
        },
        width: "100%",
        "media-rules": [{
          "max-width": 650,
          "x": 0,
          "y": "60%",
          "width": '100%',
          "height": "40%%",
        }],
        scaleX: {
          step: 3000,
          transform: {
            type: "date",
            all: "%D<br>%H:%i:%s"
          }
        },
        "scale-y": {
          values: "0:100:25",
          placement: "default",
          lineColor: "#FB301E",
          tick: {
            lineColor: "#FB301E"
          },
          item: {
            fontColor: "#FB301E",
            bold: true
          }
        },
        "scale-y-2": {
          values: "0:20:5",
          placement: "default",
          lineColor: "#E2D51A",
          tick: {
            lineColor: "#E2D51A"
          },
          item: {
            fontColor: "#E2D51A",
            bold: true
          }
        },
        "scale-y-3": {
          values: "0:40:10",
          placement: "default",
          lineColor: "#00AE4D",
          tick: {
            lineColor: "#00AE4D",
          },
          item: {
            fontColor: "#00AE4D",
            bold: true
          }
        },
        plotarea: {
          margin: "dynamic",
          marginRight: "4%"
        },
        crosshairX: {
          shared: true,
          lineColor: "#23211E",
          scaleLabel: {
            backgroundColor: "#E3DEDA",
            fontColor: "#414042"
          },
          plotLabel: {
            backgroundColor: "#f0ece8",
            fontColor: "#414042",
            borderWidth: 1,
            borderColor: "#000"
          }
        },
        tooltip: {
          visible: false
        },
        series: [{
          values: [
            [minScaleValue, 15],
            [minScaleValue + 3000, 15]
          ],
          lineColor: "#00AE4D",
          text: "Energy Output",
          scales: "scale-x, scale-y-3",
          marker: {
            borderWidth: 2,
            borderColor: "#00AE4D",
            backgroundColor: "#fff",
            type: "circle"
          }
        }, {
          values: [
            [minScaleValue, 25],
            [minScaleValue + 3000, 15]
          ],
          lineColor: "#E2D51A",
          text: "Energy Recycled",
          scales: "scale-x, scale-y-2",
          marker: {
            borderWidth: 2,
            borderColor: "#E2D51A",
            backgroundColor: "#fff",
            type: "triangle",
            size: 5
          }
        }, {
          values: [
            [minScaleValue, 35],
            [minScaleValue + 3000, 25]
          ],
          lineColor: "#FB301E",
          text: "Energy Consumed",
          scales: "scale-x, scale-y",
          marker: {
            borderWidth: 2,
            borderColor: "#FB301E",
            backgroundColor: "#fff",
            type: "square"
          }
        }]
      }, {
        type: "line",
        title: {
          text: "Meter History 2",
          adjustLayout: true,
          "media-rules": [{
            "max-width": 650,
            "fontSize": 14
          }]
        },
        width: "100%",
        "media-rules": [{
          "max-width": 650,
          "x": 0,
          "y": "60%",
          "width": '100%',
          "height": "40%%",
        }],
        scaleX: {
    
          step: 3000,
          transform: {
            type: "date",
            all: "%D<br>%H:%i:%s"
          }
        },
        "scale-y": {
          values: "0:100:25",
          placement: "default",
          lineColor: "#FB301E",
          tick: {
            lineColor: "#FB301E"
          },
          item: {
            fontColor: "#FB301E",
            bold: true
          }
        },
        "scale-y-2": {
          values: "0:20:5",
          placement: "default",
          lineColor: "#E2D51A",
          tick: {
            lineColor: "#E2D51A"
          },
          item: {
            fontColor: "#E2D51A",
            bold: true
          }
        },
        "scale-y-3": {
          values: "0:40:10",
          placement: "default",
          lineColor: "#00AE4D",
          tick: {
            lineColor: "#00AE4D",
          },
          item: {
            fontColor: "#00AE4D",
            bold: true
          }
        },
        plotarea: {
          margin: "dynamic",
          marginRight: "4%"
        },
        crosshairX: {
          shared: true,
          lineColor: "#23211E",
          scaleLabel: {
            backgroundColor: "#E3DEDA",
            fontColor: "#414042"
          },
          plotLabel: {
            backgroundColor: "#f0ece8",
            fontColor: "#414042",
            borderWidth: 1,
            borderColor: "#000"
          }
        },
        tooltip: {
          visible: false
        },
        series: [{
          values: [
            [minScaleValue, 25],
            [minScaleValue + 3000, 15]
          ],
          lineColor: "#00AE4D",
          text: "Energy Output",
          scales: "scale-x, scale-y-3",
          marker: {
            borderWidth: 2,
            borderColor: "#00AE4D",
            backgroundColor: "#fff",
            type: "circle"
          }
        }, {
          values: [
            [minScaleValue, 10],
            [minScaleValue + 3000, 13]
          ],
          lineColor: "#E2D51A",
          text: "Energy Recycled",
          scales: "scale-x, scale-y-2",
          marker: {
            borderWidth: 2,
            borderColor: "#E2D51A",
            backgroundColor: "#fff",
            type: "triangle",
            size: 5
          }
        }, {
          values: [
            [minScaleValue, 15],
            [minScaleValue + 3000, 15]
          ],
          lineColor: "#FB301E",
          text: "Energy Consumed",
          scales: "scale-x, scale-y",
          marker: {
            borderWidth: 2,
            borderColor: "#FB301E",
            backgroundColor: "#fff",
            type: "square"
          }
        }]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: "100%",
      width: '100%'
    });
    
    /*
     * SetInterval is used to simulate live input. We also have
     * a feed attribute that takes in http requests, websockets,
     * and return value from a JS function.
     */
    var feedInterval = null;
    minScaleValue += 3000;
    
    function feedFunction() {
      minScaleValue += 3000;
      var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
      var randomOffset0 = [-5, 5, 3, -3, 2, -2];
      var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
      var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
      var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
      var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    
    
      // 3) update line graph
      zingchart.exec('myChart', 'appendseriesvalues', {
        graphid: 0,
        update: false,
        'max-values': 15,
        values: [
          [output0],
          [output1],
          [output2]
        ]
      });
    
      output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
      output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
      output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
    
      zingchart.exec('myChart', 'appendseriesvalues', {
        graphid: 1,
        update: false,
        'max-values': 15,
        values: [
          [output0],
          [output1],
          [output2]
        ]
      });
    
      // batch all updates
      zingchart.exec('myChart', 'update');
    }
    
    function startFeed() {
      // start feed
      if (!feedInterval)
        feedInterval = setInterval(feedFunction, 1100);
    }
    
    document.getElementById('ZCPauseFeed').addEventListener('click', function() {
      clearInterval(feedInterval);
      feedInterval = null;
    });
    
    document.getElementById('ZCStartFeed').addEventListener('click', function() {
      startFeed();
    });
    
    // start feed
    startFeed();