<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #909090;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var cdata = {
"type": "vbar",
"backgroundColor": "#909090 #c9c9c9",
"title": {
"text": "Olympic Medals by Country",
"fontSize": 19,
"padding": 15,
"color": "#000000"
},
"plotarea": {
"margin": "80 40 110 40"
},
"scaleX": {
"values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
"maxItems": 9999,
"itemsOverlap": true,
"lineWidth": 0,
"tick": {
"visible": false
},
"item": {
"color": "#333333",
"offsetY": 65,
"width": "80%",
"fontSize": 11,
"fontWeight": 900,
"backgroundColor": "rgba(0,0,0,0)",
"textAlpha": 1,
"topState": {
"x": "+0",
"y": "+0",
"height": 20,
"alpha": 1,
"backgroundColor": "none",
"offsetY": 35,
"callout": true,
"calloutWidth": 0,
"calloutHeight": 10,
"borderLeft": "1px solid #666666",
"borderRight": "1px solid #666666",
"borderBottom": "1px solid #666666"
},
"jsRule": "rule_scaleX_item()"
}
},
"scaleY": {
"maxItems": 9999,
"itemsOverlap": true,
"lineWidth": 0,
"backgroundColor": "none",
"minorTicks": 4,
"minorTick": {
"visible": true,
"lineWidth": 1,
"lineColor": "#333333"
},
"tick": {
"lineColor": "#333333"
},
"guide": {
"lineWidth": 0,
"items": [{
"backgroundColor": "#acb0b3"
},
{
"backgroundColor": "#b1b5b8"
}
]
},
"item": {
"color": "#333333",
"fontSize": 9,
"fontWeight": 300
}
},
"plot": {
"barsOverlap": "100%",
"barsSpaceLeft": 0.1,
"barsSpaceRight": 0.1,
"borderWidth": 1,
"borderColor": "#ffffff",
"borderAlpha": 0.8
},
"tooltip": {
"shadow": true,
"shadowColor": "#424242",
"backgroundColor": "#212121 #424242",
"callout": true,
"calloutPosition": "bottom",
"offsetY": -20,
"placement": "node:top",
"padding": 10,
"fontSize": 15,
"color": "#ffffff",
"borderWidth": 1,
"borderColor": "#000000",
"text": "%scale-key-text won %node-value %plot-text medals"
},
"series": [{
"values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
"alpha": 0.25,
"max-trackers": 0,
"jsRule": "rule_series_0()",
"valueBox": {
"fontSize": 11,
"fontWeight": 600,
"offsetY": -10,
"jsRule": "rule_series_0_valueBox()",
}
},
{
"values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
"text": "Gold",
"column": "1/3",
"jsRule": "rule_series_123()",
"zStart": 15,
"zEnd": 35,
"valueBox": [{
"fontSize": 10,
"fontWeight": 600,
"offsetY": -10,
"jsRule": "rule_series_123_valueBox_0()"
},
{
"fontSize": 11,
"fontWeight": 400,
"text": "%plot-text",
"angle": 270,
"placement": "bottom",
"width": 50,
"textAlign": "right",
"offsetY": 25
}
]
},
{
"values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
"text": "Silver",
"column": "2/3",
"jsRule": "rule_series_123()",
"zStart": 15,
"zEnd": 35,
"valueBox": [{
"fontSize": 10,
"fontWeight": 600,
"offsetY": -10,
"jsRule": "rule_series_123_valueBox_0()"
},
{
"fontSize": 11,
"fontWeight": 400,
"text": "%plot-text",
"angle": 270,
"placement": "bottom",
"width": 50,
"textAlign": "right",
"offsetY": 25
}
]
},
{
"values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
"text": "Bronze",
"column": "3/3",
"jsRule": "rule_series_123()",
"zStart": 15,
"zEnd": 35,
"valueBox": [{
"fontSize": 10,
"fontWeight": 600,
"offsetY": -10,
"jsRule": "rule_series_123_valueBox_0()"
},
{
"fontSize": 11,
"fontWeight": 400,
"text": "%plot-text",
"angle": 270,
"placement": "bottom",
"width": 50,
"textAlign": "right",
"offsetY": 25
}
]
}
]
};
var colorSet0 = ['#D03435', '#913891', '#5238BD'];
var colorSet123 = [
['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
];
window.rule_series_0 = function(p) {
return {
backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
};
};
window.rule_series_0_valueBox = function(p) {
return {
color: colorSet0[Math.floor(p.nodeindex / 3)]
};
};
window.rule_scaleX_item = function(p) {
return {
color: colorSet0[Math.floor(p.index / 3)]
};
};
window.rule_series_123 = function(p) {
return {
backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
};
};
window.rule_series_123_valueBox_0 = function(p) {
return {
color: colorSet0[Math.floor(p.nodeindex / 3)]
};
}
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
output: 'svg',
data: cdata
});
</script>
</body>
</html>
var cdata = {
"type":"vbar",
"backgroundColor":"#909090 #c9c9c9",
"title":{
"text":"Olympic Medals by Country",
"fontSize":19,
"padding":15,
"color":"#000000"
},
"plotarea":{
"margin":"80 40 110 40"
},
"scaleX":{
"values":["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
"maxItems":9999,
"itemsOverlap":true,
"lineWidth":0,
"tick":{
"visible":false
},
"item":{
"color":"#333333",
"offsetY":65,
"width":"80%",
"fontSize":11,
"fontWeight":900,
"backgroundColor":"rgba(0,0,0,0)",
"textAlpha":1,
"topState":{
"x":"+0",
"y":"+0",
"height":20,
"alpha":1,
"backgroundColor":"none",
"offsetY":35,
"callout":true,
"calloutWidth":0,
"calloutHeight":10,
"borderLeft":"1px solid #666666",
"borderRight":"1px solid #666666",
"borderBottom":"1px solid #666666"
},
"jsRule":"rule_scaleX_item()"
}
},
"scaleY":{
"maxItems":9999,
"itemsOverlap":true,
"lineWidth":0,
"backgroundColor":"none",
"minorTicks":4,
"minorTick":{
"visible":true,
"lineWidth":1,
"lineColor":"#333333"
},
"tick":{
"lineColor":"#333333"
},
"guide":{
"lineWidth":0,
"items":[
{
"backgroundColor":"#acb0b3"
},
{
"backgroundColor":"#b1b5b8"
}
]
},
"item":{
"color":"#333333",
"fontSize":9,
"fontWeight":300
}
},
"plot":{
"barsOverlap":"100%",
"barsSpaceLeft":0.1,
"barsSpaceRight":0.1,
"borderWidth":1,
"borderColor":"#ffffff",
"borderAlpha":0.8
},
"tooltip":{
"shadow":true,
"shadowColor":"#424242",
"backgroundColor":"#212121 #424242",
"callout":true,
"calloutPosition":"bottom",
"offsetY":-20,
"placement":"node:top",
"padding":10,
"fontSize":15,
"color":"#ffffff",
"borderWidth":1,
"borderColor":"#000000",
"text":"%scale-key-text won %node-value %plot-text medals"
},
"series":[
{
"values":[100, 110, 72, 47, 41, 46, 31, 25, 28],
"alpha":0.25,
"max-trackers":0,
"jsRule":"rule_series_0()",
"valueBox":{
"fontSize":11,
"fontWeight":600,
"offsetY":-10,
"jsRule":"rule_series_0_valueBox()",
}
},
{
"values":[51, 36, 23, 19, 16, 14, 13, 9, 8],
"text":"Gold",
"column":"1/3",
"jsRule":"rule_series_123()",
"zStart":15,
"zEnd":35,
"valueBox":[
{
"fontSize":10,
"fontWeight":600,
"offsetY":-10,
"jsRule":"rule_series_123_valueBox_0()"
},
{
"fontSize":11,
"fontWeight":400,
"text":"%plot-text",
"angle":270,
"placement":"bottom",
"width":50,
"textAlign":"right",
"offsetY":25
}
]
},
{
"values":[28, 36, 28, 15, 15, 17, 8, 6, 10],
"text":"Silver",
"column":"2/3",
"jsRule":"rule_series_123()",
"zStart":15,
"zEnd":35,
"valueBox":[
{
"fontSize":10,
"fontWeight":600,
"offsetY":-10,
"jsRule":"rule_series_123_valueBox_0()"
},
{
"fontSize":11,
"fontWeight":400,
"text":"%plot-text",
"angle":270,
"placement":"bottom",
"width":50,
"textAlign":"right",
"offsetY":25
}
]
},
{
"values":[21, 38, 21, 13, 10, 15, 10, 10, 10],
"text":"Bronze",
"column":"3/3",
"jsRule":"rule_series_123()",
"zStart":15,
"zEnd":35,
"valueBox":[
{
"fontSize":10,
"fontWeight":600,
"offsetY":-10,
"jsRule":"rule_series_123_valueBox_0()"
},
{
"fontSize":11,
"fontWeight":400,
"text":"%plot-text",
"angle":270,
"placement":"bottom",
"width":50,
"textAlign":"right",
"offsetY":25
}
]
}
]
};
var colorSet0 = ['#D03435', '#913891', '#5238BD'];
var colorSet123 = [
['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
];
window.rule_series_0 = function(p) {
return {
backgroundColor:colorSet0[Math.floor(p.nodeindex/3)]
};
};
window.rule_series_0_valueBox = function(p) {
return {
color:colorSet0[Math.floor(p.nodeindex/3)]
};
};
window.rule_scaleX_item = function(p) {
return {
color:colorSet0[Math.floor(p.index/3)]
};
};
window.rule_series_123 = function(p) {
return {
backgroundColor:colorSet123[Math.floor(p.nodeindex/3)][Math.floor(p.plotindex/3)]
};
};
window.rule_series_123_valueBox_0 = function(p) {
return {
color:colorSet0[Math.floor(p.nodeindex/3)]
};
}
zingchart.render({
id : 'myChart',
width : '100%',
height : '100%',
output : 'svg',
data : cdata
});
