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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us