Changing maps on click

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

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>
<div id="chart-container">FusionCharts will render here</div>
<div id='controllers'>
    <label>
        <input name='chart-type' id='line' type='radio' value='usa' />USA</label>
    <label>
        <input name='chart-type' id='bar' type='radio' value='china' />China</label>
    <label>
        <input name='chart-type' id='column' type='radio' value='japan' checked='true' />Japan</label>
</div>

JavaScript

FusionCharts.ready(function () {
    var radio = [],
        radElem,
        val,
        salesByStateChart = new FusionCharts({
            type: 'japan',
            renderAt: 'chart-container',
            width: '600',
            height: '400',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Annual Sales by State",
                        "subcaption": "Last year",
                        "entityFillHoverColor": "#cccccc",
                        "numberPrefix": "$",
                        "showLabels": "1",
                        "theme": "fint"
                },
                    "colorrange": {
                    "minvalue": "920000",
                        "startlabel": "Low",
                        "endlabel": "High",
                        "code": "#e44a00",
                        "gradient": "1",
                        "color": [{
                        "maxvalue": "56580000",
                            "displayvalue": "Average",
                            "code": "#f8bd19"
                    }, {
                        "maxvalue": "97400000",
                            "code": "#6baa01"
                    }]
                },
                    "data": [{
                    "id": "HI",
                        "value": "3189000"
                }, {
                    "id": "DC",
                        "value": "2879000"
                }, {
                    "id": "MD",
                        "value": "33592000"
                }, {
                    "id": "DE",
                        "value": "4607000"
                }, {
                    "id": "RI",
                        "value": "4890000"
                }, {
                    "id": "WA",
                        "value": "34927000"
                }, {
                    "id": "OR",
                        "value": "65798000"
                }, {
                    "id": "CA",
             ...