<!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>
html,
body {
height: 100%;
width: 100%;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"type": "bar",
"background-color": "white",
"title": {
"text": "Tech Giant Quarterly Revenue",
"font-color": "#7E7E7E",
"backgroundColor": "none",
"font-size": "22px",
"alpha": 1,
"adjust-layout": true,
},
"plotarea": {
"margin": "dynamic"
},
"legend": {
"layout": "x3",
"overflow": "page",
"alpha": 0.05,
"shadow": false,
"align": "center",
"adjust-layout": true,
"marker": {
"type": "circle",
"border-color": "none",
"size": "10px"
},
"border-width": 0,
"maxItems": 3,
"toggle-action": "hide",
"pageOn": {
"backgroundColor": "#000",
"size": "10px",
"alpha": 0.65
},
"pageOff": {
"backgroundColor": "#7E7E7E",
"size": "10px",
"alpha": 0.65
},
"pageStatus": {
"color": "black"
}
},
"plot": {
"bars-space-left": 0.15,
"bars-space-right": 0.15,
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM",
"sequence": 0,
"speed": 800,
"delay": 800
}
},
"scale-y": {
"line-color": "#7E7E7E",
"item": {
"font-color": "#7e7e7e"
},
"values": "0:60:10",
"guide": {
"visible": true
},
"label": {
"text": "$ Billions",
"font-family": "arial",
"bold": true,
"font-size": "14px",
"font-color": "#7E7E7E",
},
},
"scaleX": {
"values": [
"Q3",
"Q4",
"Q1",
"Q2"
],
"placement": "default",
"tick": {
"size": 58,
"placement": "cross"
},
"itemsOverlap": true,
"item": {
"offsetY": -55
}
},
"scaleX2": {
"values": ["2013", "2014"],
"placement": "default",
"tick": {
"size": 20,
},
"item": {
"offsetY": -15
}
},
"tooltip": {
"visible": false
},
"crosshair-x": {
"line-width": "100%",
"alpha": 0.18,
"plot-label": {
"header-text": "%kv Sales"
}
},
"series": [{
"values": [
37.47,
57.59,
45.65,
37.43
],
"alpha": 0.95,
"borderRadiusTopLeft": 7,
"background-color": "purple",
"text": "Apple",
},
{
"values": [
2.02,
2.59,
2.5,
2.91
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "orange",
"text": "Facebook"
},
{
"values": [
13.4,
14.11,
14.89,
16.86
],
"alpha": 0.95,
"borderRadiusTopLeft": 7,
"background-color": "teal",
"text": "Google"
},
{
"values": [
18.53,
24.52,
20.4,
23.38
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "red",
"text": "Microsoft"
},
{
"values": [
17.09,
25.59,
19.74,
19.34
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "blue",
"text": "Amazon"
},
{
"values": [
2.31,
2.36,
2.42,
2.52
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "green",
"text": "Cognizant"
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
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='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>
html,
body {
height: 100%;
width: 100%;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
var myConfig = {
"graphset": [{
"type": "bar",
"background-color": "white",
"title": {
"text": "Tech Giant Quarterly Revenue",
"font-color": "#7E7E7E",
"backgroundColor": "none",
"font-size": "22px",
"alpha": 1,
"adjust-layout": true,
},
"plotarea": {
"margin": "dynamic"
},
"legend": {
"layout": "x3",
"overflow": "page",
"alpha": 0.05,
"shadow": false,
"align": "center",
"adjust-layout": true,
"marker": {
"type": "circle",
"border-color": "none",
"size": "10px"
},
"border-width": 0,
"maxItems": 3,
"toggle-action": "hide",
"pageOn": {
"backgroundColor": "#000",
"size": "10px",
"alpha": 0.65
},
"pageOff": {
"backgroundColor": "#7E7E7E",
"size": "10px",
"alpha": 0.65
},
"pageStatus": {
"color": "black"
}
},
"plot": {
"bars-space-left": 0.15,
"bars-space-right": 0.15,
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM",
"sequence": 0,
"speed": 800,
"delay": 800
}
},
"scale-y": {
"line-color": "#7E7E7E",
"item": {
"font-color": "#7e7e7e"
},
"values": "0:60:10",
"guide": {
"visible": true
},
"label": {
"text": "$ Billions",
"font-family": "arial",
"bold": true,
"font-size": "14px",
"font-color": "#7E7E7E",
},
},
"scaleX": {
"values": [
"Q3",
"Q4",
"Q1",
"Q2"
],
"placement": "default",
"tick": {
"size": 58,
"placement": "cross"
},
"itemsOverlap": true,
"item": {
"offsetY": -55
}
},
"scaleX2": {
"values": ["2013", "2014"],
"placement": "default",
"tick": {
"size": 20,
},
"item": {
"offsetY": -15
}
},
"tooltip": {
"visible": false
},
"crosshair-x": {
"line-width": "100%",
"alpha": 0.18,
"plot-label": {
"header-text": "%kv Sales"
}
},
"series": [{
"values": [
37.47,
57.59,
45.65,
37.43
],
"alpha": 0.95,
"borderRadiusTopLeft": 7,
"background-color": "purple",
"text": "Apple",
},
{
"values": [
2.02,
2.59,
2.5,
2.91
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "orange",
"text": "Facebook"
},
{
"values": [
13.4,
14.11,
14.89,
16.86
],
"alpha": 0.95,
"borderRadiusTopLeft": 7,
"background-color": "teal",
"text": "Google"
},
{
"values": [
18.53,
24.52,
20.4,
23.38
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "red",
"text": "Microsoft"
},
{
"values": [
17.09,
25.59,
19.74,
19.34
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "blue",
"text": "Amazon"
},
{
"values": [
2.31,
2.36,
2.42,
2.52
],
"borderRadiusTopLeft": 7,
"alpha": 0.95,
"background-color": "green",
"text": "Cognizant"
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});