Flot with months or years xaxis

Question

I am trying to adjust the looks of the x-axis on a flot generated chart. Here is the code:

$(function () {
var data1 = [[1451599200000,0],[1454277600000,0],[1456783200000,104],[1459458000000,67]];
var data2 = [[1451599200000,48],[1454277600000,48],[1456783200000,53],[1459458000000,37]];

var options = {
      series: {
        bars: {
          show: true,
        }
      },
      xaxis: {
        mode: "time",
        timeformat: "%m-%Y",
      }
      };

var plotObj = $.plot($("#placeholder"), [{
        data: data1,
        label: "Data1",
      }, {
        data: data2,
        label: "Data2",
      }],
      options);
});

This is the result, I am getting.

Problem #1: My data array contains [timestamp,value] pairs and I would like the x-axis to use the timestamp which in this case is a month. Only one x-axis label per bar is needed. If it would be better to use the Categories plugin please give me an example on how to use it and I can modify my JSON data so that the timestamp is a string instead of timestamp.

Problem #2: Is there a possibility to adjust the width of the bars according to how many data points are present in my JSON? So that they are not as thin as in my example.

Link to jsfiddle: https://jsfiddle.net/prxbl/ubewvjkr/2/

Answer 1

Switching to "Categories" for x-axis is the sollution. First you need to include the plugin jquery.flot.categories.min.js and then adjust the json data to use string instead of timestamp. Example code:

$(function () {
var data1 = [["01-2016",0],["02-2016",0],["03-2016",104],["04-2016",67]];
var data2 = [["01-2016",48],["02-2016",48],["03-2016",53],["04-2016",37]];

var options = {
      series: {
        bars: {
          show: true,
          barWidth: 0.6,
                    align: "center"
        }
      },
      xaxis: {
       mode: "categories",
                tickLength: 0
      }
      };

var plotObj = $.plot($("#placeholder"), [{
        data: data1,
        label: "Data1",
      }, {
        data: data2,
        label: "Data2",
      }],
      options);
});

By setting the align: "center" option, you solve problem #2, and you get just one label, centered under the bar. By playing with the barWidth property you can change the bar width.