Parse Json Data in Ajax Post

Question

I am implementing highcharts in my mvc application. Here I am getting Json from Controller the json is like that:

[
    {
        "Admin_Count_ID": 1,
        "Home_Page_View": 15,
        "Month": "Jan"
    },
    {
        "Admin_Count_ID": 4,
        "Home_Page_View": 2,
        "Month": "Feb"
    }
]

I am using below function to show the chart and I need to parse Month in xAxis.categories and Home_Page_View in series.data.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Website User View'
        },

        xAxis: {
            categories: ['Jan', 'Feb']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Users'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Users',
            data: [5, 15]

        }]
    });
});

Please help me. Thanks in advance

Rory McCrossan · Accepted Answer · 2015-01-28 11:20:07Z

2

You can build the required arrays with a for loop:

// assumes 'json' = the data retrieved
var months = [], views = [];
for (var i = 0; i < json.length; i++) {
    months.push(json[i].Month);
    views.push(json[i].Home_Page_View)
}

You can then use these values in your highcharts initialisation (extra properties omitted):

$('#container').highcharts({
    xAxis: {
        categories: months
    },
    series: [{
        data: views
    }]
});

Example fiddle

answered Jan 28, 2015 at 11:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Sadikhasan · Accepted Answer · 2015-01-28 11:19:53Z

1

var obj = [{"Admin_Count_ID":1,"Home_Page_View":15,"Month":"Jan"},{"Admin_Count_ID":4,"Home_Page_View":2,"Month":"Feb"}];

var month = [];
var view = [];
$.each(obj,function(index,val){
    month.push(val.Month);
    view.push(val.Home_Page_View);
});

In Your highCharts write like

 xAxis: {
            categories: month
        },
series: [{
        name: 'Users',
        data: view
    }]

Demo

answered Jan 28, 2015 at 11:19

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Collectives™ on Stack Overflow

Parse Json Data in Ajax Post

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related