Question

I EDITED THE SOLUTION BELOW THE QUESTION !!!


I have read like 30 similar articles on this, but nothing quite hits the spot.

My scenario: in order to feed a charting library (highcharts/highstock) with data in ASP.NET I manually created the basic classes for such a graph. This is due to the fact that all the wrapper projects work for highcharts but NOT for highstock. However, highstock requires a HTML script block like this (working):

<script>
$('#container2').highcharts('StockChart',
{
"title": {
    "text": "Graph_Title_string"
},
"yAxis": {
    "title": {
        "text": "YAxis_Title_string"
    },
    "height": 200,
    "lineWidth": 2,
    "top": 80
},
"series": [
  {
      "type": "line",
      "name": "Testdata",
      "data": [[Date.UTC(2014, 3, 8, 0, 0), 3], [Date.UTC(2014, 3, 9, 0, 0), 2], [Date.UTC(2014, 3, 10, 0, 0), 4], [Date.UTC(2014, 3, 11, 0, 0), 4], [Date.UTC(2014, 3, 12, 0, 0), 3], [Date.UTC(2014, 3, 13, 0, 0), 4], [Date.UTC(2014, 3, 14, 0, 0), 2], [Date.UTC(2014, 3, 15, 0, 0), 1], [Date.UTC(2014, 3, 16, 0, 0), 4], [Date.UTC(2014, 3, 17, 0, 0), 0]]
  }]
});

I created the c# classes and their properties, as for example:

public class Series
{
    public string type { get; set; }
    public string name { get; set; }
    public object data { get; set; }    
}

Later on I use JsonConvert.SerializeObject to serialize my chart-object (with instanced classes title, yAxis, series etc within), which results in following output:

{
  "title": {
    "text": "Graph_Title_string"
  },
  "yAxis": {
    "title": {
      "text": "YAxis_Title_string"
    },
    "height": 200,
    "lineWidth": 2,
    "top": 0
  },
  "series": [
    {
      "type": "line",
      "name": "Testdata",
      "data": "[[Date.UTC(2014, 3, 8, 0, 0), 3],[Date.UTC(2014, 3, 9, 0, 0), 2],[Date.UTC(2014, 3, 10, 0, 0), 0],[Date.UTC(2014, 3, 11, 0, 0), 4],[Date.UTC(2014, 3, 12, 0, 0), 4],[Date.UTC(2014, 3, 13, 0, 0), 2],[Date.UTC(2014, 3, 14, 0, 0), 1],[Date.UTC(2014, 3, 15, 0, 0), 1],[Date.UTC(2014, 3, 16, 0, 0), 0],[Date.UTC(2014, 3, 17, 0, 0), 3]]"
    }
  ]
}

So the problem is: the value of series->data is enclosed in quotes. As highstock obviously requires an object array as data ([[DateTime, value],[DateTime, value],...etc]), the chart is not rendered unless I remove these quotes around the array.

When the array was "pure" integer there would be no quotes (I guess), but as my points need to be DateTime/value I need an array of objects.

Therefore the question: how can I force my JSON serializer to NOT enclose my value of an object array in quotes?

Maybe this is trivial and simple, and I was looking to far. As said, I've read lots of articles on similar problems, but nothing worked for me. Any help highly appreciated!


SOLUTION:

the data-array in my series-node is int/double - DATE.UTC(2014, 3, 8, 0, 0) doesn't return a DateTime but a NUMBER (reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC)

Therefore defining a double array in my behind-class will result in the desired output format (as seen in the great suggestion below by craig and also the marked answer) without the quotation marks.

Code (reference: http://forums.asp.net/post/1463013.aspx ... however, slightly modified) for converting c# DateTime to the required milliseconds-timestamp:

public double MilliTimeStamp(DateTime d2)
        {
            DateTime d1 = new DateTime(1970, 1, 1);
            TimeSpan ts = new TimeSpan(d2.Ticks - d1.Ticks);

            return ts.TotalMilliseconds;
        }
Was it helpful?

Solution 2

Answer from @CraigW. is very close. To make it closer to what you are after, try to declare data as collection of collection of object :

public class Series
{
    public string type { get; set; }
    public string name { get; set; }
    public List<List<object>> data { get; set; }
}

Test code to populate the model :

Series series = new Series();
series.type = "foo";
series.name = "bar";

series.data = new List<List<object>>();

for (int i = 0; i < 5; i++)
{
    var data = new List<object>();
    data.Add(DateTime.Now);
    data.Add(i);
    series.data.Add(data);
}

var json = JsonConvert.SerializeObject(series, Formatting.Indented);

Test result :

{
  "type": "foo",
  "name": "bar",
  "data": [
    [
      "2014-04-17T22:15:06.8812404+07:00",
      0
    ],
    [
      "2014-04-17T22:15:06.8812404+07:00",
      1
    ],
    [
      "2014-04-17T22:15:06.8812404+07:00",
      2
    ],
    [
      "2014-04-17T22:15:06.8812404+07:00",
      3
    ],
    [
      "2014-04-17T22:15:06.8812404+07:00",
      4
    ]
  ]
}

OTHER TIPS

I created a class defined as follows:

public class Series
{
    public string type { get; set; }
    public string name { get; set; }
    public List<object> data { get; set; }    
}

Then used the following code to populate it and convert it to JSON.

Series series = new Series();
series.type = "foo";
series.name = "bar";

series.data = new List<object>();

for( int i = 0; i < 5; i++ )
{
    series.data.Add( DateTime.Now );
    series.data.Add( i );
}

var json = JsonConvert.SerializeObject( series );

The resulting JSON was:

{"type":"foo","name":"bar","data":["2014-04-17T07:47:16.3620755-07:00",0,"2014-0 4-17T07:47:16.3620755-07:00",1,"2014-04-17T07:47:16.3620755-07:00",2,"2014-04-17 T07:47:16.3620755-07:00",3,"2014-04-17T07:47:16.3620755-07:00",4]}

P.S. Declare data as object[] also generated the above JSON.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top