Search code examples
javascriptjqueryflot

Flot Javascript - drawing a 24 hour bar chart with values every hour

I want to create using Flot Charts a 24 hour bar graph that has a value for every hour. From my understanding Flot uses epoch time for hour values. However wen running the following code the chart doesn't show any values and no error. 

//Data for 12am and 5pm respectively in epoch time
var data = [[43200000, 20], [61200000, 50]]; 

var dataset = [
 {
  label: "amount",
  data: data,
  color: "#FF0000",
  bars: {
    show: true, 
    align: "center",
    barWidth: 2 * 60 * 60 * 600,
    lineWidth:1
  }
 }
];

var options = {
 yaxis: {}, 
 xaxis: {
    mode: "time",
   //timeformat: "%H",
    tickSize: [1, "hour"], // tick every hour
    min: (new Date(0, 0, 0, 00, 00, 00, 00)).getTime(),
    max: (new Date(0, 0, 0, 24, 00, 00, 00)).getTime()
   }
};

 $.plot($("#flot-placeholder"), dataset, options);

enter image description here

How can I populate values on the graph?

Solution

  • Epoch time starts on 1970-1-1 (see here). Change your min/max values to

    min: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(),
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime()

    and it works with your data. See this fiddle.

    But if you only care about hours and not the date, consider using categories mode, see this fiddle.