How can I integrate FusionChart in my SPA application developed using Durandal and Knockout?

Question

How can I integrate FusionChart in my SPA application developed using MVVM architecture, Durandal and Knockout.js? I had created a simple HTML file, with hard coded data, in which the charts are working fine but I am not able to figure out how can I embed this code with my SPA Application.

I am sharing some details:

I have added following Js file in my HTML file :

<script type="text/javascript" src="./FusionCharts.js"></script>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./lib.js"></script>

My HTML file code in which fusion chart is rendered successfully is as follows :

<div id="chartdiv" align="center">Chart will load here</div>
<script type="text/javascript">
    var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
    chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'      showBorder='1'>" +
                            "<set label='Current' value='24000' color='00FF00' />" +
                            "<set label='30+' value='19600' color='0000FF' />" +
                            "<set label='60+' value='15700' color='FFFF00'/>" +
                            "<set label='90+' value='14400' color='FF0000' />" +
                            "<styles>" +
                            "<definition>" +
                            "<style name='myCaptionFont' type='font' align='right'/>" +
                            "</definition>" +
                            "<application>" +
                            "<apply toObject='Caption' styles='myCaptionFont' />" +
                            "</application>" +
                            "</styles> " +
                            "</chart>");
    chart.render("chartdiv");
</script> 

I am not able to figure out what should be the code in my ViewModel.js, and view.html file to render FusionChart.

Please Help.

Answer 1

I developed a working demo for including FusionCharts in DurandalJS. Just copy the project to a webserver and access the app.

https://github.com/bhargav3/fcdurandal

First thing is to include fusioncharts.js which can be done using requirejs or by directly adding it in the index file. To avoid creating duplicate charts we shall check if the FusionCharts('myChartId') exists and avoid redraws.

Your viewmodel will look something like this,

define(['durandal/http', 'durandal/app'], function() {
return {
    displayText: 'FusionCharts in a SPA app!',
    viewAttached: function(view) {

        if (typeof FusionCharts('myChartId') === 'undefined') {
            $('#binder').append('<div id="chartContainer"></div>');
            var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0");
            myChart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'      showBorder='1'>" +
                    "<set label='Current' value='24000' color='00FF00' />" +
                    "<set label='30+' value='19600' color='0000FF' />" +
                    "<set label='60+' value='15700' color='FFFF00'/>" +
                    "<set label='90+' value='14400' color='FF0000' />" +
                    "</chart>");
            myChart.render("chartContainer");

        }
    }
};

});

Where as your view will look like

<h2 data-bind="html:displayText"></h2>
<div id="binder"></div>  

main.js is the bootstrap file and you can add your routers(for navigation) there.

Answer 2

If your JavaScript files are added via script tags on index.html, then Fusion Charts should be available to use from your view model. There is a way to utilize require.js to dynamically load into the scope of your view model if there was a reason you don't want it globally. I didn't include that below in the view model example in order to keep it simple to demonstrate the use of viewAttached.

viewAttached (http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/) seems to be the last method called in the lifecycle. As the documentation indicates, the method indicates when the "view is attached to the parent DOM node." This should allow you to manipulate the view as needed after binding has occurred. See also: http://durandaljs.com/documentation/Interacting-with-the-DOM/

Below is an example of using viewAttached in your view model:

define(function() {
    var activate = function() {

    };

    var viewAttached = function() {
        var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
        chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$'   showBorder='1'>" +
                        "<set label='Current' value='24000' color='00FF00' />" +
                        "<set label='30+' value='19600' color='0000FF' />" +
                        "<set label='60+' value='15700' color='FFFF00'/>" +
                        "<set label='90+' value='14400' color='FF0000' />" +
                        "<styles>" +
                        "<definition>" +
                        "<style name='myCaptionFont' type='font' align='right'/>" +
                        "</definition>" +
                        "<application>" +
                        "<apply toObject='Caption' styles='myCaptionFont' />" +
                        "</application>" +
                        "</styles> " +
                        "</chart>");
        chart.render("chartdiv");            
    };

    return {
        activate: activate,
        viewAttached: viewAttached
    };
};

Finally, your view should contain:

<div id="chartdiv" align="center">Chart will load here</div>