<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.THEME = 'classic';
var myConfig = {
"background-color": "#e5e5e5 #ccc",
"type": "mixed",
"title": {
"text": "Sales Comparison 2011 vs 2012",
"background-color": "#555"
},
"scale-x": {
"values": [
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept"
],
"line-color": "#db0a0a",
"line-width": "3px",
"item": {
"font-color": "#333"
},
"tick": {
"line-color": "#db0a0a",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"guide": {
"visible": false
}
},
"scale-x-2": {
"values": [
"MR 1",
"MR 2",
"MR 3",
"MR 4",
"MR 5",
"MR 6",
"MR 7",
"MR 8",
"MR 9",
"MR 10",
"MR 11",
"MR 12"
],
"line-color": "#07be07",
"line-width": "3px",
"tick": {
"line-color": "#07be07",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"items-overlap": true,
"item": {
"font-color": "#555"
},
"label": {
"text": "Marketing Report",
"font-color": "#333"
},
"guide": {
"visible": true,
"line-color": "#333"
}
},
"scale-y": {
"values": "0:100:20",
"line-color": "#db0a0a",
"line-width": "3px",
"item": {
"font-color": "#333",
"padding": "5px"
},
"tick": {
"line-color": "#db0a0a",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"label": {
"text": "Number of New Clients Acquired",
"font-color": "#333",
"offset-x": 8
},
"guide": {
"visible": false
}
},
"scale-y-2": {
"values": "0:8000:2000",
"line-color": "#07be07",
"line-width": "3px",
"multiplier": true,
"tick": {
"line-color": "#07be07",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"item": {
"font-color": "#333",
"padding": "5px"
},
"label": {
"text": "Marketing Dollars Spent",
"font-color": "#333"
},
"guide": {
"visible": true,
"line-style": "solid",
"line-color": "333"
}
},
"plot": {
"bars-overlap": "55%"
},
"plotarea": {
"margin": "80px 60px 35px 60px"
},
"series": [{
"values": [
36,
30,
20,
41,
26,
21
],
"type": "bar",
"text": "2011 Sales",
"z-index": 1,
"background-color": "#595959 #777",
"tooltip": {
"text": "Number of New Clients<br>Acquired In %k 2011<br>%v"
},
"hover-state": {
"visible": 0
}
},
{
"values": [
42,
24,
28,
36,
34,
28
],
"type": "bar",
"text": "2012 Sales",
"z-index": 2,
"background-color": "#db0a0a #ed0909",
"tooltip": {
"text": "Number of New Clients<br>Acquired In %k 2012<br>%v"
},
"hover-state": {
"visible": 0
}
},
{
"values": [
4470,
6300,
4590,
4500,
5550,
6500,
4775,
4950,
4400,
4100,
4800,
5100
],
"type": "line",
"text": "2012 Marketing",
"z-index": 4,
"line-color": "#07be07",
"aspect": "spline",
"scales": "scale-x-2, scale-y-2",
"tooltip": {
"text": "Marketing Dollars Spent<br>Per Report %k 2012<br>$%v"
},
"marker": {
"size": 4,
"background-color": "#07be07",
"border-color": "fff",
"border-width": "1px"
}
},
{
"values": [
3650,
4000,
5150,
5150,
3800,
6100,
6800,
4000,
4030,
3100,
2090,
4100
],
"type": "line",
"line-color": "#595959",
"alpha": 0.5,
"aspect": "spline",
"scales": "scale-x-2, scale-y-2",
"tooltip": {
"text": "Marketing Dollars Spent<br>Per Report %k 2011<br>$%v"
},
"marker": {
"size": 4,
"background-color": "#595959",
"border-width": "0px",
"alpha": 0.5
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
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='myChart'></div>
</body>
</html>
zingchart.THEME = 'classic';
var myConfig = {
"background-color": "#e5e5e5 #ccc",
"type": "mixed",
"title": {
"text": "Sales Comparison 2011 vs 2012",
"background-color": "#555"
},
"scale-x": {
"values": [
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept"
],
"line-color": "#db0a0a",
"line-width": "3px",
"item": {
"font-color": "#333"
},
"tick": {
"line-color": "#db0a0a",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"guide": {
"visible": false
}
},
"scale-x-2": {
"values": [
"MR 1",
"MR 2",
"MR 3",
"MR 4",
"MR 5",
"MR 6",
"MR 7",
"MR 8",
"MR 9",
"MR 10",
"MR 11",
"MR 12"
],
"line-color": "#07be07",
"line-width": "3px",
"tick": {
"line-color": "#07be07",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"items-overlap": true,
"item": {
"font-color": "#555"
},
"label": {
"text": "Marketing Report",
"font-color": "#333"
},
"guide": {
"visible": true,
"line-color": "#333"
}
},
"scale-y": {
"values": "0:100:20",
"line-color": "#db0a0a",
"line-width": "3px",
"item": {
"font-color": "#333",
"padding": "5px"
},
"tick": {
"line-color": "#db0a0a",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"label": {
"text": "Number of New Clients Acquired",
"font-color": "#333",
"offset-x": 8
},
"guide": {
"visible": false
}
},
"scale-y-2": {
"values": "0:8000:2000",
"line-color": "#07be07",
"line-width": "3px",
"multiplier": true,
"tick": {
"line-color": "#07be07",
"placement": "outer",
"size": 8,
"line-width": "3px"
},
"item": {
"font-color": "#333",
"padding": "5px"
},
"label": {
"text": "Marketing Dollars Spent",
"font-color": "#333"
},
"guide": {
"visible": true,
"line-style": "solid",
"line-color": "333"
}
},
"plot": {
"bars-overlap": "55%"
},
"plotarea": {
"margin": "80px 60px 35px 60px"
},
"series": [{
"values": [
36,
30,
20,
41,
26,
21
],
"type": "bar",
"text": "2011 Sales",
"z-index": 1,
"background-color": "#595959 #777",
"tooltip": {
"text": "Number of New Clients<br>Acquired In %k 2011<br>%v"
},
"hover-state": {
"visible": 0
}
},
{
"values": [
42,
24,
28,
36,
34,
28
],
"type": "bar",
"text": "2012 Sales",
"z-index": 2,
"background-color": "#db0a0a #ed0909",
"tooltip": {
"text": "Number of New Clients<br>Acquired In %k 2012<br>%v"
},
"hover-state": {
"visible": 0
}
},
{
"values": [
4470,
6300,
4590,
4500,
5550,
6500,
4775,
4950,
4400,
4100,
4800,
5100
],
"type": "line",
"text": "2012 Marketing",
"z-index": 4,
"line-color": "#07be07",
"aspect": "spline",
"scales": "scale-x-2, scale-y-2",
"tooltip": {
"text": "Marketing Dollars Spent<br>Per Report %k 2012<br>$%v"
},
"marker": {
"size": 4,
"background-color": "#07be07",
"border-color": "fff",
"border-width": "1px"
}
},
{
"values": [
3650,
4000,
5150,
5150,
3800,
6100,
6800,
4000,
4030,
3100,
2090,
4100
],
"type": "line",
"line-color": "#595959",
"alpha": 0.5,
"aspect": "spline",
"scales": "scale-x-2, scale-y-2",
"tooltip": {
"text": "Marketing Dollars Spent<br>Per Report %k 2011<br>$%v"
},
"marker": {
"size": 4,
"background-color": "#595959",
"border-width": "0px",
"alpha": 0.5
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});