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