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