Search code examples
jqueryflotaxes

making custom axes in flotgraph

I've read the API, but I'm not sure what I do with my data so that I get meaningful axis values.

This is a small sample of my data:

  $scope.data = [
    { "plate": "CAR", "date": "2016-10-21" },
    { "plate": "CAS", "date": "2016-10-23", "tags": [ "unreliable" ] },
    { "plate": "CAT", "date": "2016-10-24" },
    { "plate": "CAU", "date": null,         "tags": [ "unused" ] },
    { "plate": "CAV", "date": "2016-11-05" },
    { "plate": "CAW", "date": "2016-11-10" },
    { "plate": "CAX", "date": "2016-11-10" }
  ];

I hope to have the X-axis labeled with the plates, and the Y-axis labeled with dates.

Here's a working jsfiddle: https://jsfiddle.net/u4p8vcc0/12/

Following this example: http://www.jqueryflottutorial.com/tester-9.html I've added 'mode: time' to the options, but this just defaults the range to 0-1000.

I'm still not sure how to turn my data into ticks.

(Yes, forgive the use of angular with jQuery. flot.js requires jQuery, so...)

Solution

  • You can do that by using categories mode for the x-axis and time mode for the y-axis and filling your enhancedData array with the needed data format. Replace

    enhancedData.push([idx, item.daysElapsed]);

    with

    enhancedData.push([item.plate, item.dateObj.valueOf()]);

    See this fiddle for the full example.