Question

I am working with JqPlot with ASP.NET MVC 4.

This is a sample data from one of the examples from Jqplot

var line1 = [['2008-06-30 8:00AM', 4], ['2008-7-30 8:00AM', 6.5], ['2008-8-30 8:00AM', 5.7], ['2008-9-30 8:00AM', 9], ['2008-10-30 8:00AM', 8.2]];

the first value in the pair is DateTime and other is value.

Now I am trying to get value like this from controller instead, I am using Web Api Controller

my action is as follows

public List<Stats> GetGraphData()
{
    var stats = new List<Stats>
                    {
                        new Stats {Date = DateTime.Now, Value = 4},
                        new Stats {Date = DateTime.Now.AddMonths(1), Value = 11},
                        new Stats {Date = DateTime.Now.AddMonths(2), Value = 5},
                        new Stats {Date = DateTime.Now.AddMonths(3), Value = 7},
                    };
    return stats;
}

but the value that returned is

[Object { Date= “2012-11-08T16:52:04.5047592+05:30″, Value=4}, [Object { Date=”2012-11-08T16:52:04.5047592+05:30”, Value=4}, …

So I decided to try JSON.stringify() on it which gave the following…

[{“Date”:”2012-11-08T16:52:04.5047592+05:30″,”Value”:4},{“Date”:”2012-12-08T16:52:04.5047592+05:30″,”Value”:11},{“Date”:”2013-01-08T16:52:04.5047592+05:30″,”Value”:5},{“Date”:”2013-02-08T16:52:04.5047592+05:30″,”Value”:7}]

How do I get the format like the one shown below ?
[['2008-06-30 8:00AM', 4], ['2008-7-30 8:00AM', 6.5], ['2008-8-30 8:00AM', 5.7], ['2008-9-30 8:00AM', 9], ['2008-10-30 8:00AM', 8.2]];

Please help me on this.

Note : Please feel free to edit the Title of my question, I could’nt think of anything else 😛

Answer 1

This is because you are using objects instead of arrays, you can do something like this: instead of this:

new Stats {Date = DateTime.Now, Value = 4},

Try this:

new String[] { DateTime.Now.ToString(), "4" },

Of course change the List<Stats> to List<String[]>

Another option would be to flatten the object into an array in Javascript once you get it. Let’s say you put the data coming form the server into a variable called serverArray, this will look like an array of objects:

var serverArray = [{Date: "2012-11-08T16:52:04.5047592+05:30", Value: 4}, { .... }, etc. etc. ];

Then you can use .map() to map this array into another array:

results = serverArray.map(function (obj) { return [obj.Date, obj.Value]; });

results will look like this (note the squqre brackets to indicate an array and the absence of the object keys, Date and Value):

[["2012-11-08T16:52:04.5047592+05:30", 4], [......], etc. etc. ];

and then you can use “results” in you plotting being in the same format as the sample data.