JQuery fleet with ASP.NET MVC and DateTime properties

Question

I have an object with an integer property and a DateTime property, I would like to build a collection of these objects using the jQuery fleet, however I tried to find an example but did not look, so I was wondering if anyone could point me in the right one direction to convert a collection of objects into an array that the jQuery fleet will understand, I also understand that you need to convert DateTime to Date Javascript. Any help in heading in the right direction would be greatly appreciated.

Answer 1

I am creating my extension method to convert my javascript time to datetime. It looks like this:

private static long ToJavascriptTimestamp( this DateTime input ) { TimeSpan span = new TimeSpan( new DateTime( 1970, 1, 1, 0, 0, 0 ).Ticks ); DateTime time = input.Subtract( span ); return ( long )( time.Ticks / 10000 ); } 

Then I just passed it as a result of Json.

If you want to make this a column chart, then the bar width will also be based on ticks, so if you want it to be an hour, the width would be: 60 * 60 * 1000 (ticks * seconds * min)

Your object might look something like this:

 public class GraphData { public int Value {get; set;} public long Date {get; set;} } 

Then just create a GraphData list and in your controller use something like:

 return Json(myGraphDataList, "application/json", Encoding.Default); 

Then, in your javascript, you may have a call to $.Ajax to receive data and a success response when you install it like this:

 $.ajax({ url: "/someUrl", type: 'POST', dataType: 'json', success: function (result) { var graphData = [{ data: result.Data, lines: { show: true }, points: { radius: 3 } }]; var graphOptions = { grid: { hoverable: true, borderWidth: 1 }, yaxis: { axisLabel: "Title", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, min: 0 }, xaxis: { axisLabel: "Time", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, mode: "time", timeformat: "%H:%M", tickSize: 1000 * 60 * 60 } }; $.plot($("#tag"), data, options); } });