• 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%' 
    });