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