• 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>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart1,
        #myChart2 {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart1"></div>
      <div id="myChart2"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        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"
            },
            "legend": {
              "layout": "horizontal",
              "backgroundColor": "transparent",
              "borderColor": "transparent",
              "marginTop": 30,
              "toggleAction": "remove",
              "marker": {
                "borderRadius": "50px",
                "borderColor": "transparent"
              },
              "item": {
                "fontColor": "#5f5f5f"
              }
            },
            "scaleX": {
              "maxItems": 8,
              "transform": {
                "type": "date"
              },
              "zooming": true,
              "values": [1442905200000, 1442908800000, 1442912400000, 1442916000000, 1442919600000, 1442923200000, 1442926800000, 1442930400000, 1442934000000, 1442937600000, 1442941200000, 1442944800000, 1442948400000],
              "lineColor": "#5f5f5f",
              "lineWidth": "1px",
              "tick": {
                "lineColor": "#5f5f5f",
                "lineWidth": "1px"
              },
              "item": {
                "fontColor": "#5f5f5f"
              },
              "guide": {
                "visible": false
              }
            },
            "scaleY": {
              "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",
                "_text": "Number of hits : %v",
                thousandsSeparator: ',',
                borderRadius: '5px'
              }
            },
            "plot": {
              "contour-on-top": false,
              "alphaArea": 1,
              "lineWidth": "2px",
              "aspect": "spline",
              "marker": {
                "visible": false
              }
            },
            "series": [{
                "text": "All Sites",
                "values": [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
                "backgroundColor": "#E84F28",
                "lineColor": "#E84F28"
              },
              {
                "text": "www.zingchart.com",
                "values": [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
                "backgroundColor": "#45C392",
                "lineColor": "#45C392"
              },
              {
                "text": "blog.zingchart.com",
                "values": [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
                "backgroundColor": "#28C2D1",
                "lineColor": "#28C2D1"
              },
              {
                "text": "help.zingchart.com",
                "values": [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161],
                "backgroundColor": "#FBA645",
                "lineColor": "#FBA645"
              }
            ]
          }]
        }
    
        zingchart.render({
          id: 'myChart1',
          data: myConfig1,
          height: '100%',
          width: '100%'
        });
    
        var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
        myConfig2.graphset[0].type = 'vstream';
        myConfig2.graphset[0].plotarea = {};
        myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
        zingchart.render({
          id: 'myChart2',
          data: myConfig2,
          height: '100%',
          width: '100%'
        });
      </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>
      <div id="myChart1"></div>
      <div id="myChart2"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart1,
    #myChart2 {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    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"
        },
        "legend": {
          "layout": "horizontal",
          "backgroundColor": "transparent",
          "borderColor": "transparent",
          "marginTop": 30,
          "toggleAction": "remove",
          "marker": {
            "borderRadius": "50px",
            "borderColor": "transparent"
          },
          "item": {
            "fontColor": "#5f5f5f"
          }
        },
        "scaleX": {
          "maxItems": 8,
          "transform": {
            "type": "date"
          },
          "zooming": true,
          "values": [1442905200000, 1442908800000, 1442912400000, 1442916000000, 1442919600000, 1442923200000, 1442926800000, 1442930400000, 1442934000000, 1442937600000, 1442941200000, 1442944800000, 1442948400000],
          "lineColor": "#5f5f5f",
          "lineWidth": "1px",
          "tick": {
            "lineColor": "#5f5f5f",
            "lineWidth": "1px"
          },
          "item": {
            "fontColor": "#5f5f5f"
          },
          "guide": {
            "visible": false
          }
        },
        "scaleY": {
          "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",
            "_text": "Number of hits : %v",
            thousandsSeparator: ',',
            borderRadius: '5px'
          }
        },
        "plot": {
          "contour-on-top": false,
          "alphaArea": 1,
          "lineWidth": "2px",
          "aspect": "spline",
          "marker": {
            "visible": false
          }
        },
        "series": [{
            "text": "All Sites",
            "values": [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
            "backgroundColor": "#E84F28",
            "lineColor": "#E84F28"
          },
          {
            "text": "www.zingchart.com",
            "values": [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
            "backgroundColor": "#45C392",
            "lineColor": "#45C392"
          },
          {
            "text": "blog.zingchart.com",
            "values": [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
            "backgroundColor": "#28C2D1",
            "lineColor": "#28C2D1"
          },
          {
            "text": "help.zingchart.com",
            "values": [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161],
            "backgroundColor": "#FBA645",
            "lineColor": "#FBA645"
          }
        ]
      }]
    }
    
    zingchart.render({
      id: 'myChart1',
      data: myConfig1,
      height: '100%',
      width: '100%'
    });
    
    var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
    myConfig2.graphset[0].type = 'vstream';
    myConfig2.graphset[0].plotarea = {};
    myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';
    zingchart.render({
      id: 'myChart2',
      data: myConfig2,
      height: '100%',
      width: '100%'
    });