• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart1'></div>
        <div id='myChart2'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            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 = null; // insert a null value to create space
                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": {
                        "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"
                        }
                    },
                    "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/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart1'></div>
    		<div id='myChart2'></div>
    	</body>
    </html>
    
          
    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 = null;  // insert a null value to create space
      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":{
                "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"
                }
            },
            "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
      });
    });