jqPlot and JSON formatted Data

Question

I'm returning a JSON string with an Ajax call in jQuery, I'd like to pump that data into a bar chart using jqPlot.

I got the JSON conversion code from another Stack-Overflow post, but can't understand why this isn't working. My code:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(DTO), //JSON.stringify(AnDParms), combined, 
    url: "GetAdmitsDischarges.asmx/GetAandD",
    dataType: "json",
    success: function (data) {
        //do chart stuff here.
        var line1 = [];
        for (var prop_name in data.d) {
            line1.push([prop_name, data[prop_name]])
        }
        var ticks = ['Admits', 'Discharges'];

        var plot1 = $.jqplot('chartdiv', [line1], {
            title: 'Admits & Discharges',
            series: [{ renderer: $.jqplot.BarRenderer}],
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });
        //to prove the flow is working...
        //alert("Data: " + data.d);

    }, //end of success
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + ' ' + errorThrown + ' ' + XMLHttpRequest);
    } //end of error
});   //end of ajax call

In Firebug, the value of line1 is (going from 0 to 32):

[["0", undefined],["1", undefined],...["31", undefined],["32", undefined]]

While the value of data is:

Object { d="{"Admits":"35","Discharges":"36"}" }

Thanks for any help you can offer...

meda · Accepted Answer · 2013-08-20 17:45:11Z

1

The problem is your JSON structure:

{
    "Admits": "35",
    "Discharges": "36"
}

You are providing a JSON object, but jqplot needs array instead:

[
  ["Admits", 35],
  ["Discharges", 36]
]

edited Aug 20, 2013 at 17:45

answered Aug 20, 2013 at 16:54

meda

45.5k14 gold badges97 silver badges123 bronze badges

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

7 Comments

BradAtCC Over a year ago

Any ideas how to change this? is there a search and replace function that I could use on a JSON string, to change the ":" into a "," and the "," into "],[", and the outer "{" into "[["? I'd like this to be able to work on larger JSON strings, as I plan to create more complex charts down stream...this simple one is just a proof of concept...thanks.

meda Over a year ago

you change this in your service, change the way you are encoding your json data

BradAtCC Over a year ago

Can we just get jqPlot to accept JSON strings? :) I used Objects in my service, so making this kind of change will be a LARGE undertaking...if I can't do it in the javascript/jquery...

meda Over a year ago

unless you wanna hack their source code, if you dont want to change it on the server level then do it in your js, check this out stackoverflow.com/questions/6693579/json-for-jqplot

BradAtCC Over a year ago

Thanks, I will try it in the javascript

|

BradAtCC · Accepted Answer · 2013-08-22 19:01:38Z

0

I finally figured it out with the help of Dave Ward of Encosia.com...if you've not checked out his blog, head straight there right now...it's great for all your .Net/jQuery needs.

Here is my javascript:

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(DTO),
        url: "GetAdmitsDischarges.asmx/GetAandD",
        dataType: "json",
        success: function (data) {
            var jqPlotData = $.map(data.d, function (value, key) {
                if (key != "__type") {
                    return [value]; //was key, value
                }
            });
            var ticks = ['Admits', 'Discharges'];
            var plot1 = $.jqplot('chartdiv', [jqPlotData], {
                title: 'Admits & Discharges',
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { varyBarColor: true },
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    }
                },
                highlighter: { show: false }

            });

Also, I removed the JSON serialization from my web service, and just returned the object. Hopefully this will help others.

answered Aug 22, 2013 at 19:01

BradAtCC

411 silver badge10 bronze badges

3 Comments

BradAtCC Over a year ago

Why did this get a "-1"? It's the solution.

wingskush Over a year ago

can you tell me how to use the json returned data in the "series " as well? for example using the admits and discharge returned from the data as the series

wingskush Over a year ago

something like series: some_array and some_array = [{label:"json returned data},{label: "json returned data"}]

Collectives™ on Stack Overflow

jqPlot and JSON formatted Data

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related