Search code examples
javascriptjquerytimeflot

How to make a fixed amount on the x-axis, so that it shows future hours?


The code I have processes the data perfectly from my XML file, no problem, however if there is only one hour of data available it stretches across the whole x-axis like so:

                                                        15:00

I would like to see a fixed amount on the x-axis so instead of just showing just 15:00 it shows future hours as well, regardless if data is available yet. For example:

15:00     16:00     17:00     18:00     19:00     20:00     21:00

My current configuration is as follows, but not sure how to make the above happen:

{   
    grid: {
        hoverable: false,
        clickable: false,
        borderWidth: 1
    },
    xaxis: {
        mode: "time",
        minTickSize: [1, "hour"],
        timeFormat: "%H:%M"
    },
    yaxis: {
        min: 20,
        max: 45
    },
    legend: {
        show: true,
        position: 'ne'
    },
    valueLabels: {
        show:true,
        showAsHtml: true
    }
}

Solution

  • I handle this type of situation on the json data creation side. Not sure if there is a flot option to do something similar. By using null's as the data value for all the timestamps I expect. If you have the first hour time you can just increment it by 60 * 60 * 1000 E.g.

    "data": [
      [
        1362139200000,
        1.56
      ],
      [
        1362142800000,
        null
      ],
      [
        1362146400000,
        null
      ],
      [
        1362150000000,
        null
      ],
      [
        1362153600000,
        null
      ],
      [
        1362157200000,
        null
      ],
      etc.
    

    ]