Adding CSS Loader to FusionCharts

by Shamasis Bhattacharya

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.zune.js"></script>
<div id="chart-container" class="fusioncharts-container"></div>
<div id="chart-container2" class="fusioncharts-container"></div>
<div id="chart-container3" class="fusioncharts-container"></div>

CSS

.fusioncharts-container {
    width: 650px;
    height: 300px;
    background-image: url(http://static.fusioncharts.com/code/resources/loaders/716-3.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.fusioncharts-container.loaded {
    background-image: none;
}

JavaScript

// Preload the pre-loader image
if (document.images) {
    (new Image()).src = "http://static.fusioncharts.com/code/resources/loaders/716-3.gif";
}

FusionCharts.ready(function () {
    // Add event listener to add remove classes during loading    
    FusionCharts.addEventListener('renderComplete', function (eve, args) {
        if (/\sloaded/.test(args.container.className)) {
            return;
        }
        args.container.className += " loaded";
    });
    
    FusionCharts.render({
        type: "Column2D",
        renderAt: "chart-container",
        width: "100%",
        height: "100%",
        
        // make transparent background
        containerBackgroundColor: "transparent",
        containerBackgroundOpacity: "0",
        // hide loading text
        showChartLoadingMessage: false,
        
        dataSource: {
            theme: "zune",
            data: [{ 
                value: "123"
            }, { 
                value: "120"
            }, { 
                value: "128"
            }]
        }
    })
    .clone({
        renderAt: "chart-container2"
    }).render()
    .clone({
        renderAt: "chart-container3"
    }).render();
    
});