<!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], 66.08],
["SWE", COLORS[0], 62.47],
["NLD", COLORS[0], 58.76],
["GBR", COLORS[1], 59.78],
["ISL", COLORS[1], 49.23],
["DNK", COLORS[1], 57.53],
["FIN", COLORS[1], 57.02],
["DEU", COLORS[1], 56.55],
["IRL", COLORS[1], 53.05],
["LUX", COLORS[1], 50.84],
["ISR", COLORS[1], 53.55],
["FRA", COLORS[2], 53.66],
["NOR", COLORS[2], 49.29],
["AUT", COLORS[2], 50.13],
["CZE", COLORS[2], 48.34],
["EST", COLORS[2], 48.28],
["MLT", COLORS[2], 46.39],
["BEL", COLORS[2], 49.13],
["ESP", COLORS[2], 45.6],
["ITA", COLORS[3], 45.74],
["CYP", COLORS[3], 45.67],
["PRT", COLORS[3], 43.51],
["SLO", COLORS[3], 42.91],
["LVA", COLORS[3], 41.11],
["SVK", COLORS[3], 39.7],
["POL", COLORS[3], 39.95],
["BGR", COLORS[3], 39.98],
["HGR", COLORS[3], 41.53],
["LTU", COLORS[3], 39.18],
["GEO", COLORS[3], 31.78],
["HRV", COLORS[4], 37.27],
["ROU", COLORS[4], 35.95],
["TUR", COLORS[4], 34.9],
["GRC", COLORS[4], 36.79],
["RUS", COLORS[4], 35.63],
["MNE", COLORS[4], 35.39],
["UKR", COLORS[4], 36.32],
["MDA", COLORS[4], 32.98],
["MKD", COLORS[4], 33.43],
["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 2020'
},
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], 66.08], ["SWE", COLORS[0], 62.47], ["NLD", COLORS[0], 58.76], ["GBR", COLORS[1], 59.78],
["ISL", COLORS[1], 49.23], ["DNK", COLORS[1], 57.53], ["FIN", COLORS[1], 57.02], ["DEU", COLORS[1], 56.55],
["IRL", COLORS[1], 53.05], ["LUX", COLORS[1], 50.84], ["ISR", COLORS[1], 53.55], ["FRA", COLORS[2], 53.66],
["NOR", COLORS[2], 49.29], ["AUT", COLORS[2], 50.13], ["CZE", COLORS[2], 48.34], ["EST", COLORS[2], 48.28],
["MLT", COLORS[2], 46.39], ["BEL", COLORS[2], 49.13], ["ESP", COLORS[2], 45.6], ["ITA", COLORS[3], 45.74],
["CYP", COLORS[3], 45.67], ["PRT", COLORS[3], 43.51], ["SLO", COLORS[3], 42.91], ["LVA", COLORS[3], 41.11],
["SVK", COLORS[3], 39.7], ["POL", COLORS[3], 39.95], ["BGR", COLORS[3], 39.98], ["HGR", COLORS[3], 41.53],
["LTU", COLORS[3], 39.18], ["GEO", COLORS[3], 31.78], ["HRV", COLORS[4], 37.27], ["ROU", COLORS[4], 35.95],
["TUR", COLORS[4], 34.9], ["GRC", COLORS[4], 36.79], ["RUS", COLORS[4], 35.63], ["MNE", COLORS[4], 35.39],
["UKR", COLORS[4], 36.32], ["MDA", COLORS[4], 32.98], ["MKD", COLORS[4], 33.43], ["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 2020'
},
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
});
