fusioncharts - Update FusionCharts data without changing chart settings

Question

Is there a way to set Fusionchart graph "data" property only. Because currently when you set the the data at a latter stage, you need to pass the full json object which has both "data" and "chart" properties.

Below is my sample code;

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        id: 'total-users',
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
            "chart": {
                "caption": "Sample Graph",
                "enableSmartLabels": "0",
                "showPercentValues": "1",
                "showTooltip": "0",
                "decimals": "1",
                "theme": "ocean"
            },
            "data":null
        });
    ageGroupChart.setJSONUrl( "http://www.example.com/GetData.php" );
    ageGroupChart.render(); 
});

As you can see I'm setting the data from a online source. I'd prefer if the online source does not need to send the "chart" property along with the data. So I can separate the UI look and feel from data-source.

Any Ideas?

Protomartyr

Did you ever find out the answer? – Dessiedessma

Unfortunately, no. – Protomartyr

Answer 1

I'm using the following function throught XLMhttpRequest calls:

function updateChart(data) {
    var jsonData = {
        "chart": {
            // Some rendering options
            "caption": caption,
            "subcaption": ""
        },
        "data": data
    };

    // First time I initialize my chart
    if (FusionCharts("myChartId") === undefined) {
        var chart = new myChartId({
            // Some rendering options
            swfUrl: "Charts/MSLine.swf",
            id: "myChartId",
            width: "100%",
            height: "280px",
            dataFormat: 'json'
        });
        chart.setJSONData(jsonData);
        chart.render("myContainerId");
    } else
        // Then I just update
        FusionCharts("myChartId").setJSONData(jsonData);
}

I call the updateChart function into my success callback:

success: function(data, request) {
    try {
        var d = JSON.parse(data);

        updateChart(d.chart);

        // Other job...
        var event = new CustomEvent("dataReceivedFromAjax", {"detail": d});
        document.dispatchEvent(event);

    } catch (e) {
        window.console.warn("Wrong format JSON data received");
        window.console.warn(data);
    }
}

Of course you may adapt my code to your case (for instance I'm using JsonData rather than JsonUrl).

Pilate

Your JSON data returns the "chart" parameter with it. I searching for a way that I do not have to send that parameter – Protomartyr

Your required at a moment to add format information with data, otherwize the default values is applied. The function I use allow the server just to return the data, and then the client functions which manage the UI can add other needed parameters. – Pilate

Thanks. but I'm looking for a way to do with less JS code. – Protomartyr

@MelakaAtalugamage If you don't want JS code you can directly create all your FusionChart with PHP or any other serverside language. – Pilate

Yes I understand that. But I'm looking for a hybrid. So It is more flexible on the UI layer – Protomartyr

Where do i get these .swf files? – Childbearing

They're provided with the FusionChart library – Pilate