Javascript FLOT Combined Bar & Line Chart with x-axis as string

Question

I have a bar graph where the x axis is a string, so I need to use a ticks array, I also need to be able to specify the colour of each bar and to also plot a line in the same graph.

The following is the code I have now which has been through many alterations to try and make it work, but I am now stuck.

I cannot get this to display the graph at all, here it is on jsfiddle: http://jsfiddle.net/9x7aJ/4102/

Any help would be appreciated as I have spent the best part of today on trying to solve this.

var fdat = [
 {
   "color": "#6ECFF6",
   "data": [[0,114]]
 },
 {
   "color": "#7BCDC8",
   "data": [[1,96]]
 },
 {
   "color": "#FDC68A",
   "data": [[2,94]]
 }
]

var data = [
    {label: "d1", data:fdat, bars: {show: true}},
    {label: "d2",data:fdat, lines: {show: true}, points:{show:true}}
];

var opts = {xaxis: {ticks:[[0,"Text 1"], [1,"Text 2"], [2,"Text 3"]]}};
$.plot($("#placeholder"),data,opts);

Raidri Raidri · Accepted Answer · 2015-03-28T15:42:57

You cannot have an object with different colors for each data point, data points have to be simple arrays. If you simplify your data to

var fdat = [
    [0, 114],
    [1, 96],
    [2, 94]
]

the graph works (updated fiddle).
If your need different colors for each bar, create one data series for each bar.

Javascript FLOT Combined Bar & Line Chart with x-axis as string

1 Answers