How to intergrate a for loop to Fusion Charts

Question

I want to add a for loop to my FusionChart script, so i can enter values through the loop. but so far i could not do it. please help. this is the code. what can i do to make this loop work?

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column3d',
        renderAt: 'chartContainer',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
            },
            "data": [
                //for (var i = 0; i < ist.length; i++) {// this is where i want to add the loop

                {
                    "label": ist[0].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[0].MyProperty_Test_Chargers)
                },
                {
                    "label": ist[1].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[1].MyProperty_Test_Chargers)
                },
                {
                    "label": ist[2].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[2].MyProperty_Test_Chargers)
                }
                //}

            ]
        }
    });
    revenueChart.render();
});

Answer 1

FusionCharts.ready(function () {
    var data = [];
    //alert(x.length);
    for (var i = 0; i < x.length; i++) {
        data.push({
            "label": x[i].HR_BG,
            "value": x[i].b                
        })
    }
    var ageGroupChart = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-pie',
        width: '600',
        height: '500',
        dataFormat: 'json',
        dataSource:         
        {   
            "chart": {
                "caption": "YTR Production Hours",
                "subCaption": "",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "0",
                "showPercentInTooltip": "0",
                "decimals": "",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
            },
            "data": data
        }
    }).render();
});

Answer 2

OK, so the data attribute needs to be an array. You can achieve this with a for loop if it is inside of a so-called IIFE and having the IFFE return an array (note that you would put the following inside the chart configuration):

"data": (function() {
    var data = [];

    for (var i = 0; i < ist.length; i++) {
        data.push({
            "label": ist[i].MyProperty_Test_Customer_Id,
            "value": parseFloat(ist[i].MyProperty_Test_Chargers)                
        })
    }

    return data;
})()

Better yet, create the array you need using the for loop above var revenueChart = new FusionCharts({...:

var chartData = [];

for (var i = 0; i < ist.length; i++) {
    chartData.push({
        "label": ist[i].MyProperty_Test_Customer_Id,
        "value": parseFloat(ist[i].MyProperty_Test_Chargers)                
    })
}

var revenueChart = new FusionCharts({
    ...
    data: chartData
    ...