How to add array data into FusionCharts

Question

I make API to retrieve data from the server and then looping to each data. I will do next is to show the data into FusionCharts. The data retrieved from the server is appropriate for what I need.

How do I make an array that I have made FusionCharts can be entered into the data to be displayed with the code below?

function URLSitePath() {
    var siteUrl = document.location.origin;
    return siteUrl;
}
$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: URLSitePath() + '/report/apigetdatapermonth',
        dataType: 'json',
        cache: true,
        async : true,
        success: function(result) {
            var arr = [];
            $.each(result.items, function() {
                arr.push({
                    label:this.month,
                    value:this.total_subs
                });
            });

            FusionCharts.ready(function () {
            var revenueChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '100%',
                height: '350',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "Transvision subscribe via website",
                        "xAxisName": "Month",
                        "yAxisName": "Total Subs",
                        "numberPrefix": "",
                        "paletteColors": "#0075c2",
                        "bgColor": "#ffffff",
                        "borderAlpha": "20",
                        "canvasBorderAlpha": "0",
                        "usePlotGradientColor": "0",
                        "plotBorderAlpha": "10",
                        "placevaluesInside": "1",
                        "rotatevalues": "1",
                        "valueFontColor": "#ffffff",
                        "showXAxisLine": "1",
                        "xAxisLineColor": "#999999",
                        "divlineColor": "#999999",
                        "divLineIsDashed": "1",
                        "showAlternateHGridColor": "0",
                        "subcaptionFontBold": "0",
                        "subcaptionFontSize": "14"
                    },
                    "data": [arr]
                }
            }).render();
            });

        },
        error: function(xhr, textStatus, errorThrown) {
            alert('Error.');
        }
    });
});

Generally FusionCharts require data into an array like

{
    "label": "Jan",
    "value": "100"
},
{
    "label": "Feb",
    "value": "200"
},
{
    "label": "Mar",
    "value": "300"
}

How do I get the data I have on the arr variable can be displayed on the data portion of FusionCharts? I tried directly by giving the code "data": [arr] but failed.

Thanks

Venkat · Accepted Answer · 2016-09-06 05:35:30Z

2

You can send the array to FusionCharts like this

var arr = [{
    "label": "Jan",
    "value": "100"
},
{
    "label": "Feb",
    "value": "200"
},
{
    "label": "Mar",
    "value": "300"
}]

And then in fusion charts data pass "data" = arr

For more info see this fiddle

answered Sep 6, 2016 at 5:35

Venkat

2652 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bertho Joris Over a year ago

Hi @Venkatesan Thanks for your help..I can see, but how I can combine my data provide using jQuery loop $.each code above into the array's data?

Shashi Over a year ago

@BerthoJoris: You could place a [ before the data is added to the arr variable and once the data is completely added, you can add a closing].

Bertho Joris Over a year ago

Thanks @Venkatesan

Shashi Over a year ago

That may not work @BerthoJoris. I believe just providing arr should help

Collectives™ on Stack Overflow

How to add array data into FusionCharts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related