Updating the xaxis of jquery flot chart not working

Question

I'm working on a Jquery Flot Chart and I'm having trouble updating the xaxis with the correct month for example if I select a date range Nov. 1 2016 to Mar. 1 2017 the data comes back fine but the x-axis month order is messed up, so when it display's it zig-zag's. Any ideas would be much appreciated.

Thanks

Get the Chart

    public dynamic TicketTrends(string start, string end)
    {
        var startDate = DateTime.Parse(start);
        var endDate = DateTime.Parse(end);
        var client = CCHttpClient.GetClient();
        var getData = client.GetAsync("api/tile/ServiceTickets");

        if (getData.Result != null)
        {
            var result = getData.Result.Content.ReadAsStringAsync().Result;
            var data = JsonConvert.DeserializeObject<IEnumerable<ServiceTickets>>(result);
            try
            {
                var allData = (from item in data
                               where item.TicketCreatedOn.Value >= startDate && item.TicketCreatedOn.Value <= endDate
                               group item by new { item.TicketCreatedOn.Value.Month, item.TicketCreatedOn.Value.Year} into grp
                               select new
                               {
                                   Month = grp.Key.Month,
                                   Year = grp.Key.Year,
                                   TicketTotal = grp.Count(),
                               });


                var chart = new[]
                {
                    new { label="Ticket Total",
                        data = allData.OrderBy(x=>x.Month).Select(x=>new int[] {x.Month,x.TicketTotal})
                    }
                };
                return Json(chart, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e.Message);
                throw;
            }
        }
        return Json("", JsonRequestBehavior.AllowGet);
    }

JSON gets returned like this

[{"label":"Ticket Total","data":[[12,6],[1,14],[2,30],[3,4]]}]

Here is my Javascript/Jquery

    $(function () {
    var barOptions = {
        series: {
            lines: {
                show: true,
                lineWidth: 2,
                fill: true
            }
        },
        yaxis: { min: 0, tickFormatter: formatter },
        xaxis:{
            ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]]
        };

    function formatter(val, axis) {
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };


    cb(start, end);

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        console.log(start + " " + end);

        $.ajax({
            url: dataurl,
            method: 'GET',
            data: { 'start': start.format('MMMM D, YYYY'), 'end': end.format('MMMM D, YYYY')},
            success: function (data) {
                console.log(JSON.stringify(data));
                $.plot($("#tickettrendchart"), data, barOptions);
            },
            error: function (req, err) {
                console.log(err);
            }
        });
    }

Answer 1

When your x axis only contains month, then you need to sort your data by month, so instead of

[{"label":"Ticket Total","data":[[12,6],[1,14],[2,30],[3,4]]}]

you get

[{"label":"Ticket Total","data":[[1,14],[2,30],[3,4],[12,6]]}]

If the month are from different years, include the year or better use time mode.