<!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: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 570px;
}
.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 src="https://app.zingsoft.com/api/file/CFDUO8K8/a69Wul5NSPSVgP4sDZkR_flags.js"></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var COLORS = ["#1a9b90", "#5AB4AC", "#C7EAE5", "#F6E8C3", "#E4ACAC", "#C85A5A"];
var IDS = [
["CHE", COLORS[0], 67.7],
["SWE", COLORS[0], 63.8],
["NLD", COLORS[0], 63.4],
["GBR", COLORS[1], 60.9],
["ISL", COLORS[1], 58.3],
["DNK", COLORS[1], 58.7],
["FIN", COLORS[1], 58.5],
["DEU", COLORS[1], 58.4],
["IRL", COLORS[1], 58.1],
["LUX", COLORS[1], 56.4],
["ISR", COLORS[1], 55.7],
["FRA", COLORS[2], 54.2],
["NOR", COLORS[2], 53.1],
["AUT", COLORS[2], 53.1],
["CZE", COLORS[2], 51.0],
["EST", COLORS[2], 50.9],
["MLT", COLORS[2], 50.6],
["BEL", COLORS[2], 49.9],
["ESP", COLORS[2], 48.8],
["ITA", COLORS[3], 47.0],
["CYP", COLORS[3], 46.8],
["PRT", COLORS[3], 46.1],
["SLO", COLORS[3], 45.8],
["LVA", COLORS[3], 44.6],
["SVK", COLORS[3], 43.4],
["POL", COLORS[3], 42.0],
["BGR", COLORS[3], 42.8],
["HGR", COLORS[3], 41.7],
["LTU", COLORS[3], 41.2],
["GEO", COLORS[3], 40.3],
["HRV", COLORS[4], 39.8],
["ROU", COLORS[4], 39.2],
["TUR", COLORS[4], 38.9],
["GRC", COLORS[4], 38.8],
["RUS", COLORS[4], 38.8],
["MNE", COLORS[4], 38.1],
["UKR", COLORS[4], 37.6],
["MDA", COLORS[4], 36.8],
["MKD", COLORS[4], 35.4],
["SRB", COLORS[4], 35.3],
["AZE", COLORS[4], 33.2],
["ARM", COLORS[4], 31.4],
["BIH", COLORS[5], 30.2],
["BLR", COLORS[5], 30.0],
["ALB", COLORS[5], 28.9],
["KOS", COLORS[5], 26.8]
];
var data = {};
for (var i = 0; i < IDS.length; i++) {
var pc = ZC._x_(IDS[i][2] / 100, 1);
data[IDS[i][0]] = {
value: IDS[i][2],
backgroundRepeat: 'no-repeat',
backgroundScale: 0.8,
backgroundPosition: '10% 35%',
backgroundImage: FLAGS[IDS[i][0].toLowerCase()],
backgroundColor: IDS[i][1],
hoverState: {
visible: false
},
topState: {
gradientStops: '0 ' + pc + ' ' + (pc + 0.01) + ' 1',
_gradientColors: IDS[i][1] + ' ' + IDS[i][1] + ' #eee #eee',
gradientColors: '#666 #666 #eee #eee'
},
tooltip: {
backgroundColor: IDS[i][1]
}
};
}
var cdata = {
type: 'tilemap',
title: {
text: 'Global Innovation Index 2017'
},
subtitle: {
text: 'Higher score = higher innovation',
fontSize: 12,
fontWeight: 'normal',
marginTop: 25
},
labels: [{
x: 10,
y: 450,
width: 100,
text: 'More than 60%',
align: 'left',
fontSize: 11,
padding: '1 1 1 20',
borderLeft: '16px solid ' + COLORS[0]
},
{
x: 10,
y: 475,
width: 100,
text: '55% - 60%',
align: 'left',
fontSize: 11,
padding: '1 1 1 20',
borderLeft: '16px solid ' + COLORS[1]
},
{
x: 10,
y: 500,
width: 100,
text: '49% - 55%',
align: 'left',
fontSize: 11,
padding: '1 1 1 20',
borderLeft: '16x solid ' + COLORS[2]
},
{
x: 10,
y: 525,
width: 100,
text: '40% - 47%',
align: 'left',
fontSize: 11,
padding: '1 1 1 20',
borderLeft: '16px solid ' + COLORS[3]
},
{
x: 10,
y: 550,
width: 100,
text: '30% - 40%',
align: 'left',
fontSize: 10,
padding: '1 1 1 20',
borderLeft: '16px solid ' + COLORS[4]
},
{
x: 10,
y: 575,
width: 100,
text: 'Less than 30%',
align: 'left',
fontSize: 11,
padding: '1 1 1 20',
borderLeft: '16px solid ' + COLORS[5]
}
],
options: {
map: 'EUROPE',
type: 'square',
sizeFactor: 0.9,
data: data,
tile: {
borderRadius: 5,
borderWidth: 1,
borderColor: '#ccc',
backgroundColor: '#ddd',
label: {
fontSize: 10,
offsetX: -10,
offsetY: 18
},
topState: {
type: 'rect',
width: 8,
height: 32,
borderWidth: 1,
borderColor: '#ddd',
x: '+15',
backgroundPosition: '-999 -999',
fillAngle: 270
},
}
},
tooltip: {
padding: 10,
borderWidth: 1,
borderColor: '#ddd',
fontWeight: 'bold',
text: '%name: %value%'
},
plotarea: {
margin: '30 10 10 10'
}
};
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: cdata
});
</script>
</body>
</html>
var COLORS = ["#1a9b90", "#5AB4AC", "#C7EAE5", "#F6E8C3", "#E4ACAC", "#C85A5A"];
var IDS = [ ["CHE", COLORS[0], 67.7], ["SWE", COLORS[0], 63.8], ["NLD", COLORS[0], 63.4], ["GBR", COLORS[1], 60.9],
["ISL", COLORS[1], 58.3], ["DNK", COLORS[1], 58.7], ["FIN", COLORS[1], 58.5], ["DEU", COLORS[1], 58.4],
["IRL", COLORS[1], 58.1], ["LUX", COLORS[1], 56.4], ["ISR", COLORS[1], 55.7], ["FRA", COLORS[2], 54.2],
["NOR", COLORS[2], 53.1], ["AUT", COLORS[2], 53.1], ["CZE", COLORS[2], 51.0], ["EST", COLORS[2], 50.9],
["MLT", COLORS[2], 50.6], ["BEL", COLORS[2], 49.9], ["ESP", COLORS[2], 48.8], ["ITA", COLORS[3], 47.0],
["CYP", COLORS[3], 46.8], ["PRT", COLORS[3], 46.1], ["SLO", COLORS[3], 45.8], ["LVA", COLORS[3], 44.6],
["SVK", COLORS[3], 43.4], ["POL", COLORS[3], 42.0], ["BGR", COLORS[3], 42.8], ["HGR", COLORS[3], 41.7],
["LTU", COLORS[3], 41.2], ["GEO", COLORS[3], 40.3], ["HRV", COLORS[4], 39.8], ["ROU", COLORS[4], 39.2],
["TUR", COLORS[4], 38.9], ["GRC", COLORS[4], 38.8], ["RUS", COLORS[4], 38.8], ["MNE", COLORS[4], 38.1],
["UKR", COLORS[4], 37.6], ["MDA", COLORS[4], 36.8], ["MKD", COLORS[4], 35.4], ["SRB", COLORS[4], 35.3],
["AZE", COLORS[4], 33.2], ["ARM", COLORS[4], 31.4], ["BIH", COLORS[5], 30.2], ["BLR", COLORS[5], 30.0],
["ALB", COLORS[5], 28.9], ["KOS", COLORS[5], 26.8] ];
var data = {};
for (var i=0;i<IDS.length;i++) {
var pc = ZC._x_(IDS[i][2]/100, 1);
data[IDS[i][0]] = {
value : IDS[i][2],
backgroundRepeat : 'no-repeat',
backgroundScale : 0.8,
backgroundPosition : '10% 35%',
backgroundImage : FLAGS[IDS[i][0].toLowerCase()],
backgroundColor : IDS[i][1],
hoverState : {
visible : false
},
topState : {
gradientStops : '0 ' + pc + ' ' + (pc+0.01) + ' 1',
_gradientColors : IDS[i][1] + ' ' + IDS[i][1] + ' #eee #eee',
gradientColors : '#666 #666 #eee #eee'
},
tooltip : {
backgroundColor : IDS[i][1]
}
};
}
var cdata = {
type : 'tilemap',
title : {
text : 'Global Innovation Index 2017'
},
subtitle : {
text : 'Higher score = higher innovation',
fontSize : 12,
fontWeight : 'normal',
marginTop : 25
},
labels : [
{
x : 10,
y : 450,
width : 100,
text : 'More than 60%',
align : 'left',
fontSize : 11,
padding : '1 1 1 20',
borderLeft : '16px solid ' + COLORS[0]
},
{
x : 10,
y : 475,
width : 100,
text : '55% - 60%',
align : 'left',
fontSize : 11,
padding : '1 1 1 20',
borderLeft : '16px solid ' + COLORS[1]
},
{
x : 10,
y : 500,
width : 100,
text : '49% - 55%',
align : 'left',
fontSize : 11,
padding : '1 1 1 20',
borderLeft : '16x solid ' + COLORS[2]
},
{
x : 10,
y : 525,
width : 100,
text : '40% - 47%',
align : 'left',
fontSize : 11,
padding : '1 1 1 20',
borderLeft : '16px solid ' + COLORS[3]
},
{
x : 10,
y : 550,
width : 100,
text : '30% - 40%',
align : 'left',
fontSize : 10,
padding : '1 1 1 20',
borderLeft : '16px solid ' + COLORS[4]
},
{
x : 10,
y : 575,
width : 100,
text : 'Less than 30%',
align : 'left',
fontSize : 11,
padding : '1 1 1 20',
borderLeft : '16px solid ' + COLORS[5]
}
],
options : {
map : 'EUROPE',
type : 'square',
sizeFactor : 0.9,
data : data,
tile : {
borderRadius : 5,
borderWidth : 1,
borderColor : '#ccc',
backgroundColor : '#ddd',
label : {
fontSize : 10,
offsetX : -10,
offsetY : 18
},
topState : {
type : 'rect',
width : 8,
height : 32,
borderWidth : 1,
borderColor : '#ddd',
x : '+15',
backgroundPosition : '-999 -999',
fillAngle : 270
},
}
},
tooltip : {
padding : 10,
borderWidth : 1,
borderColor : '#ddd',
fontWeight : 'bold',
text : '%name: %value%'
},
plotarea: {
margin : '30 10 10 10'
}
};
zingchart.render({
id : 'myChart',
width : '100%',
height : '100%',
data : cdata
});
