Different maps on drill down
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Data-driven US Map, showing sales by state. Interactive legend slider allows change of value range. -->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var populationMap = new FusionCharts({
type: 'world',
renderAt: 'chart-container',
width: '700',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Test World Map",
"subcaption": "Number of people per Square Mile",
"formatNumberScale": "0",
"showLabels": "1",
"nullEntityColor": "#C2C2D6",
"nullEntityAlpha": "50",
"hoverOnNull": "0",
"useSNameInLabels": "0",
"entityFillColor": "#A8A8A8",
"entityFillHoverColor": "#E5E5E9"
},
"colorrange": {
"color": [{
"minvalue": "0",
"maxvalue": "100",
"code": "#D0DFA3",
"displayValue": "< 100M"
}, {
"minvalue": "100",
"maxvalue": "200",
"code": "#B0BF92",
"displayValue": "100-200M"
}, {
"minvalue": "200",
"maxvalue": "300",
"code": "#91AF64",
"displayValue": "200M-300"
}, {
"minvalue": "300",
"maxvalue": "5000",
"code": "#A9FF8D",
"displayValue": "> 300"
}]
},
"data": [{
"id": "NA",
"displayValue": "North America",
"value": "57.2",
"link": "newchart:usa-json"
}, {
"id": "SA",
"value": "57.1",
"showLabel": "1"
}, {
"id": "AS",
"value":...