FusionCharts - Plotting discontinous data

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

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/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<div id="controllers">
<label><input type="radio" name="chart-options" value="line" checked="true"> Line</input></label>
<label><input type="radio" name="chart-options" value="column2d"> Column</input></label>
</div>
<!-- Suppose the data is not available for some categories, then the plot can be configured either to be continous or discontinous. By default it is discontinous, if it needs to be continous, then set "connectNullData" chart attribute to be 1. 

The chart can also be configured to highlight the discontinuity by using the dashed feature shown below.
-->

CSS

#controllers{
    font-family:'Helvetica Neue', Arial;
    font-size: 14px;
    margin-left: 90px;
}

#controllers label{
    padding: 0 5px !important;
}

JavaScript

FusionCharts.ready(function() {
    var revenueChart = new FusionCharts({
        type: 'line',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Harry's SuperMart",
                "subCaption": "Monthly revenue for last year",
                "xAxisName": "Month",
                "yAxisName": "Amount",
                "numberPrefix": "$",
                "theme": "fint",
                "rotateValues": "1",
                // make this attribute 0, if discontinuity is needed
//                "connectNullData": "1"
            },

            "data": [{
                "label": "Jan",
                "value": "420000"
            }, {
                "label": "Feb",
                "value": "810000"
            }, {
                "label": "Mar",
                "value": "720000"
            }, {
                "label": "Apr",
                "value": "550000"
            }, {
                "label": "May"
            }, {
                "label": "Jun"
            }, {
                "label": "Jul",
                "value": "680000"
            }, {
                "label": "Aug",
                "value": "620000"
            }, {
                "label": "Sep",
                "value": "610000"
            }, {
                "label": "Oct",
                "value": "490000"
            }, {
                "label": "Nov",
                "value": "900000"
            }, {
                "label": "Dec",
                "value": "730000"
            }]
        },
        events: {
            "initialized":  function () {
                // in the initialized event check create handlers for line, column radio buttons
                 var radioButtons = document.getElementsByName('chart-options'),
                    i,
                    length;
                for (i = 0, length = radioButtons.length; i < length; i++) {
 ...