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