• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/2.7.2/zingchart.min.js"></script>
      <style>
        zing-grid[loading] {
          height: 400px;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart1'></div>
      <div id='myChart2'></div>
      <script>
        // zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    
        var valueArray1 = [
          [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
          [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
          [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
          [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
        ];
    
        var i = 0;
    
        window.feed = function(callback) {
          var tick = {};
    
          if ((i + 1) > (valueArray1[0].length - 1))
            i = 0;
          tick.plot0 = valueArray1[0][i];
          tick.plot1 = valueArray1[0][i];
          tick.plot2 = valueArray1[1][i];
          tick.plot3 = valueArray1[2][i];
          tick.plot4 = valueArray1[3][i];
          i++;
          //tick.plot1 = Math.floor(Math.random() * 2) + 2;
          callback(JSON.stringify(tick));
        };
    
    
        var myConfig1 = {
          "graphset": [{
            "backgroundColor": "#fff",
            "globals": {
              "shadow": false,
              "fontFamily": "Helvetica"
            },
            "type": "stream",
            "title": {
              "text": "Bandwidth for All Sites",
              "fontColor": "#5f5f5f",
              "backgroundColor": "transparent",
              "textAlign": "left",
              "padding": "15px 15px",
              "fontSize": "20px"
            },
            "scaleY": {
              "short": true,
              "lineColor": "#5f5f5f",
              "lineWidth": "1px",
              "tick": {
                "lineColor": "#5f5f5f",
                "lineWidth": "1px"
              },
              "guide": {
                "lineStyle": "solid",
                "lineColor": "#626262"
              },
              "item": {
                "fontColor": "#5f5f5f"
              }
            },
            "tooltip": {
              "visible": false
            },
            "crosshairX": {
              "scaleLabel": {
                "backgroundColor": "#fff",
                "fontColor": "black"
              },
              "plotLabel": {
                "backgroundColor": "#434343",
                "fontColor": "#FFF",
                "thousandsSeparator": ",",
                "borderRadius": "5px",
                "_text": "Number of hits : %v"
              }
            },
            "plot": {
    
              "alphaArea": 1,
              "lineWidth": "0"
            },
            "refresh": {
              "type": "feed",
              "transport": "js",
              "url": "feed()",
              "maxTicks": 10,
              "interval": 400,
              "resetTimeout": 1000
            },
            "series": [{
                "text": "All Sites",
                "values": [],
                "backgroundColor": "#E84F28",
                "lineColor": "#E84F28"
              },
              {
                "text": "www.zingchart.com",
                "values": [],
                "backgroundColor": "#45C392",
                "lineColor": "#45C392"
              },
              {
                "text": "blog.zingchart.com",
                "values": [],
                "backgroundColor": "#28C2D1",
                "lineColor": "#28C2D1"
              },
              {
                "text": "help.zingchart.com",
                "values": [],
                "backgroundColor": "#FBA645",
                "lineColor": "#FBA645"
              }
            ]
          }]
        };
    
    
        var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
        myConfig2.graphset[0].type = 'vstream';
        myConfig2.graphset[0].plotarea = {};
        myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
    
        zingchart.loadModules('stream', function() {
          zingchart.render({
            id: 'myChart1',
            data: myConfig1,
            height: 400,
            width: '100%'
          });
    
          zingchart.render({
            id: 'myChart2',
            data: myConfig2,
            height: 800,
            width: 400
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/2.7.2/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart1'></div>
      <div id='myChart2'></div>
    </body>
    
    </html>
    
          
    // zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    
    var valueArray1 = [
      [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
      [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
      [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
      [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
    ];
    
    var i = 0;
    
    window.feed = function(callback) {
      var tick = {};
    
      if ((i + 1) > (valueArray1[0].length - 1))
        i = 0;
      tick.plot0 = valueArray1[0][i];
      tick.plot1 = valueArray1[0][i];
      tick.plot2 = valueArray1[1][i];
      tick.plot3 = valueArray1[2][i];
      tick.plot4 = valueArray1[3][i];
      i++;
      //tick.plot1 = Math.floor(Math.random() * 2) + 2;
      callback(JSON.stringify(tick));
    };
    
    
    var myConfig1 = {
      "graphset": [{
        "backgroundColor": "#fff",
        "globals": {
          "shadow": false,
          "fontFamily": "Helvetica"
        },
        "type": "stream",
        "title": {
          "text": "Bandwidth for All Sites",
          "fontColor": "#5f5f5f",
          "backgroundColor": "transparent",
          "textAlign": "left",
          "padding": "15px 15px",
          "fontSize": "20px"
        },
        "scaleY": {
          "short": true,
          "lineColor": "#5f5f5f",
          "lineWidth": "1px",
          "tick": {
            "lineColor": "#5f5f5f",
            "lineWidth": "1px"
          },
          "guide": {
            "lineStyle": "solid",
            "lineColor": "#626262"
          },
          "item": {
            "fontColor": "#5f5f5f"
          }
        },
        "tooltip": {
          "visible": false
        },
        "crosshairX": {
          "scaleLabel": {
            "backgroundColor": "#fff",
            "fontColor": "black"
          },
          "plotLabel": {
            "backgroundColor": "#434343",
            "fontColor": "#FFF",
            "thousandsSeparator": ",",
            "borderRadius": "5px",
            "_text": "Number of hits : %v"
          }
        },
        "plot": {
    
          "alphaArea": 1,
          "lineWidth": "0"
        },
        "refresh": {
          "type": "feed",
          "transport": "js",
          "url": "feed()",
          "maxTicks": 10,
          "interval": 400,
          "resetTimeout": 1000
        },
        "series": [{
            "text": "All Sites",
            "values": [],
            "backgroundColor": "#E84F28",
            "lineColor": "#E84F28"
          },
          {
            "text": "www.zingchart.com",
            "values": [],
            "backgroundColor": "#45C392",
            "lineColor": "#45C392"
          },
          {
            "text": "blog.zingchart.com",
            "values": [],
            "backgroundColor": "#28C2D1",
            "lineColor": "#28C2D1"
          },
          {
            "text": "help.zingchart.com",
            "values": [],
            "backgroundColor": "#FBA645",
            "lineColor": "#FBA645"
          }
        ]
      }]
    };
    
    
    var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
    myConfig2.graphset[0].type = 'vstream';
    myConfig2.graphset[0].plotarea = {};
    myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
    
    zingchart.loadModules('stream', function() {
      zingchart.render({
        id: 'myChart1',
        data: myConfig1,
        height: 400,
        width: '100%'
      });
    
      zingchart.render({
        id: 'myChart2',
        data: myConfig2,
        height: 800,
        width: 400
      });
    });