<!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.loadModules('maps,maps-fra');
zingchart.render({
"id": 'myChart',
"width": '100%',
"height": 400,
"data": {
"title": {
"text": "Patriotic France",
"align": "left",
"font-size": 14
},
"shapes": [{
"type": "zingchart.maps",
"options": {
"name": "fra",
"offsetY": 10,
"style": {
"controls": {
"placement": "bl"
},
"background-color": '#EF3E36', // update bg color here,
"border-color": "#000",
"label": { // text displaying. Like valueBox
"visible": true,
"font-size": 8
},
"hover-state": {
"visible": 1
},
"tooltip": {
"gradient-colors": "#EF3E36 #FFFFFF #0055A5",
"gradient-stops": ".1 .5 .75",
"fill-angle": 180,
"font-color": "#000",
"font-size": 18,
"border-width": 1,
"border-color": "#000"
},
"group": 3,
"items": {
"BR": {
"background-color": "#0055A5",
"group": 1
},
"NR": {
"background-color": "#0055A5",
"group": 1
},
"PD": {
"background-color": "#0055A5",
"group": 1
},
"PC": {
"background-color": "#0055A5",
"group": 1
},
"AQ": {
"background-color": "#0055A5",
"group": 1,
},
"HN": {
"background-color": "#FFF",
"group": 2
},
"CE": {
"background-color": "#FFF",
"group": 2
},
"LI": {
"background-color": "#FFF",
"group": 2
},
"MI": {
"background-color": "#FFF",
"group": 2
},
"NO": {
"background-color": "#FFF",
"group": 2
},
"PI": {
"background-color": "#FFF",
"group": 2
},
"LL": {
"background-color": "#FFF",
"group": 2
},
"CH": {
"background-color": "#FFF",
"group": 2
},
"BU": {
"background-color": "#FFF",
"group": 2
},
"AU": {
"background-color": "#FFF",
"group": 2
},
"LA": {
"background-color": "#FFF",
"group": 2
},
}
}
}
}]
}
});
</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.loadModules('maps,maps-fra');
zingchart.render({
"id": 'myChart',
"width": '100%',
"height": 400,
"data": {
"title": {
"text": "Patriotic France",
"align": "left",
"font-size": 14
},
"shapes": [{
"type": "zingchart.maps",
"options": {
"name": "fra",
"offsetY": 10,
"style": {
"controls": {
"placement": "bl"
},
"background-color": '#EF3E36', // update bg color here,
"border-color": "#000",
"label": { // text displaying. Like valueBox
"visible": true,
"font-size": 8
},
"hover-state": {
"visible": 1
},
"tooltip": {
"gradient-colors": "#EF3E36 #FFFFFF #0055A5",
"gradient-stops": ".1 .5 .75",
"fill-angle": 180,
"font-color": "#000",
"font-size": 18,
"border-width": 1,
"border-color": "#000"
},
"group": 3,
"items": {
"BR": {
"background-color": "#0055A5",
"group": 1
},
"NR": {
"background-color": "#0055A5",
"group": 1
},
"PD": {
"background-color": "#0055A5",
"group": 1
},
"PC": {
"background-color": "#0055A5",
"group": 1
},
"AQ": {
"background-color": "#0055A5",
"group": 1,
},
"HN": {
"background-color": "#FFF",
"group": 2
},
"CE": {
"background-color": "#FFF",
"group": 2
},
"LI": {
"background-color": "#FFF",
"group": 2
},
"MI": {
"background-color": "#FFF",
"group": 2
},
"NO": {
"background-color": "#FFF",
"group": 2
},
"PI": {
"background-color": "#FFF",
"group": 2
},
"LL": {
"background-color": "#FFF",
"group": 2
},
"CH": {
"background-color": "#FFF",
"group": 2
},
"BU": {
"background-color": "#FFF",
"group": 2
},
"AU": {
"background-color": "#FFF",
"group": 2
},
"LA": {
"background-color": "#FFF",
"group": 2
},
}
}
}
}]
}
});