CODEWITHSUNDEEP
javascriptevalfusioncharts
Dexygen
Dexygen

Reputation: 12561

How to dynamically configure FusionCharts to render linked charts without using eval

Is there a way to dynamically configure FusionCharts to render linked charts without using eval? I got this jsFiddle from FusionCharts support this morning where they showed me how to use the configureLink method (at the bottom of the jsFiddle):

chart1.configureLink({
    id:'chart1',
    type: 'column3d'
});

Note however the reference to chart1 and it's use as the id - these are both essentially hard-coded at the top of the jsFiddle: var chart1 = new FusionCharts({...

We are generating our charts dynamically however, and we don't know how many on a given page, so we are doing them inside a loop as follows:

FusionCharts.ready(function() {
    var fusionChartsCfg = JSON.parse(chartJson); //chartJson defined above

    for (var i=0, n=fusionChartsCfg.length; i<n; i++) {
        var chartConfig = fusionChartsCfg[i];
        new FusionCharts(chartConfig).render();

        /*
        eval('var fChart = chart' + i + '=new FusionCharts(chartConfig)');
        fChart.render();

        if (chartConfig.linkedChartType) {
            fChart.configureLink({
                id:'chart' + i,
                type: chartConfig.linkedChartType
            });
        }
        */          
    }
});

Actually I've gotten the code inside the comments to work (instead of the line new FusionCharts(chartConfig).render();) but note its reliance on eval(). Is there a way to avoid this? It was the only thing I could think of given the need to reference the FusionChart instances by both the reference/variable name, and the need to additionally use it as the id property in the configuration sent to configureLink

Upvotes: 0

Views: 617

Answers (1)

pallabB
pallabB

Reputation: 319

I do not think that id attribute inside the configureLink method is that important. Please refer to this document.

The code should work fine this way

FusionCharts.ready(function() {
    var fusionChartsCfg = JSON.parse(chartJson); //chartJson defined above

    for (var i=0, n=fusionChartsCfg.length; i<n; i++) {
        var chartConfig = fusionChartsCfg[i];
        new FusionCharts(chartConfig).render().configureLink({
                type: chartConfig.linkedChartType
            });         
    }
});

Upvotes: 1

Related Questions