jQuery flot with ASP.NET MVC and DateTime properties

Question

I have an object with an integer property, and a DateTime property, I would like to plot a collection of these objects using jQuery flot, however I've tried googling around looking for examples but have had no look, so I was wondering if anyone could point me in the right direction for converting the collection of objects into an array that jQuery flot will understand, I also understand you need to convert the DateTime into Javascript Date. Any help in heading in the right direction will be greatly appreciated.

Answer 1

I create my as an extension method to convert my datatime to a javascript datetime. It looks like:

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 back as a Json result.

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

Your object could be something like:

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

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

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

Then in your javascript on you might have some $.Ajax call to get the data and on the success response that where you set it like:

$.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);
  }
});