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