Using Maps In iFrame With ZingChart
Problem:
I'm trying to place a map chart in my iFrame code. Its working when I use the HTML code for bar chart and line chart, but failed to place US Map. Would you please direct me for sample code? Here is my code:
<!DOCTYPE html>
<html>
<head>
<!--Script Reference[1] -->
<script src=" https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- Chart Placement[2] -->
<div id="myChart"></div>
<script>
zingchart.loadModules('maps, maps-usa', function (e) {
zingchart.render({
id: 'myChart',
data: {
shapes: [
{
type: 'zingchart.maps',
options: {
name: 'usa',
style: {
controls: {
placement: 'tr', //tl (default), tr, bl, br
visible: true,
}
}
}
}
]
},
height: 400,
width: '100%'
});
});
</script>
</body>
</html>
Solution:
Try adding the scripts below to the head tag of your HTML file.
<script src="http://cdn.zingchart.com/modules/zingchart-maps.min.js"></script>
<script src="http://cdn.zingchart.com/modules/zingchart-maps-usa.min.js"></script>
Problem:
It's working! Now how can I show Texas by default (instead of the US)?
Solution:
Use the items array to include only the specified items in your map.
https://www.zingchart.com/docs/chart-types/interactive-maps#include