Question

I am using flot to display a stacked time series in an mvc3 webpage. The graph displays correctly the xaxis formatting are not effecting the graph.

I pass the data to the view with the following code

    var range = DateTime.Today.AddDays(-30);
        var graphData = _db.UpdateStatistics.Where(x => x.Day > range).OrderBy(x=> x.Day);
        var viewGraph = new SubscriptionUpdatesGraphViewModel();

        foreach (var entry in graphData)
        {
            viewGraph.Total.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Total));
            viewGraph.Attention.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Attention));
            viewGraph.Complete.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Complete));
            viewGraph.Fail.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Failed));
            viewGraph.Notify.Add(new Tuple<long, int>(entry.Day.Ticks, entry.Pending));
        }


        ViewBag.Graph = viewGraph;
        return View(result);

While on the view I have the following

<script id="source" type="text/javascript">
$(function () {
    var total =  @ViewBag.Graph.SerialisedTotal;       
    var attention =  @ViewBag.Graph.SerialisedAttention;  
    var notify =  @ViewBag.Graph.SerialisedNotify;     
    var complete =  @ViewBag.Graph.SerialisedComplete;     
    var fail =  @ViewBag.Graph.SerialisedFail;    

    var stack = true, bars = false, lines = true, steps = false;

    function plotWithOptions() {
        $.plot($("#graph"), [{label:'Need Attention',data:attention}, 
                             {label:'Ready to apply',data:notify},                             
                             {label:'Failed',data:fail},
                             {label:'Completed',data:complete}], 
            { series: {stack : stack, 
                       lines: { show: lines, 
                                fill: true, 
                                steps: steps }  , 
               xaxis: {mode: 'time' ,                                                                           
                        timeformat: "%d",  
                        tickSize: [5, "day"]  }   }
        });
    }

    plotWithOptions();

});

The graph seems to display the raw ticks and nothing else

example data:

    var total =  [[634754880000000000,12],[634755744000000000,10],];  
    var attention =  [[634754880000000000,2],[634755744000000000,0],]; 
    var notify =  [[634754880000000000,2],[634755744000000000,10],];   
    var complete =  [[634754880000000000,3],[634755744000000000,10],]; 
    var fail =  [[634754880000000000,5],[634755744000000000,0],];    

Answer 1

There are a couple of small problems, but you’re basically there.

First of all your timestamps are not valid timestamps, if you go new Date(634754880000000000) in your js console, that will return an invalid date.

You can use this to generate the timestamps in .NET (this is just pulled directly from the flot API.txt):

    public static long GetJavascriptTimestamp(DateTime input)
    {
        var span = new TimeSpan(DateTime.Parse("1/1/1970").Ticks);
        var time = input.Subtract(span);
        return time.Ticks / 10000;
    }

The second problem is that your call to $.plot is slightly off, the xaxis is not a member of series, but is at the same level as series, so like this:

$.plot($("#graph"),
        [{label:'Need Attention',data:attention}, 
        {label:'Ready to apply',data:notify},
        {label:'Failed',data:fail},
        {label:'Completed',data:complete}],
        {
            series: {
                stack: stack,
                lines: {
                    show: lines,
                    fill: true,
                    steps: steps
                }
            },
            xaxis: {
                mode: "time",
                timeformat: "%d"
            }
        });

With those two changes I was able to get your graph to output correctly.