javascript - Style specific bar column with Flot -

I am working with Flot to create a bar chart. However, I need to add special styles to some columns. Is it possible?

My HTML looks like this:

  & lt; Div id = "monthly-usage" style = "width: 100%; height: 400px;" & gt; & Lt; / Div & gt;  

And my JS is like this:

  somePlot = null; $ (Function () {// Data from this year and last year var this year = [[3, 231.01], [4, 21 9 .65], [5, 222.47], [6, 223.0 9], [7] , [8, 246.22] 9.04]]; var Usage data = [{Use lab this year: "2014", Data: this year, bar: {show: true, barwidth: .3, fill: right, linewidth: 0, order: 1, fill: 'RGBA (194, 46, 52, .85)'}, color: '# c22e34'}, {// current use label used to compare last year: "2013", data : Last year, times: {show: true, barwidth: .3, fill: true, linewid : 0, Order: 2, Phil Collar: 'RGBA (73, 80, 94, .85)'}, color: '# 49505e'}] // X months of X-axis characters = [[0, [5] [6] "July"], [5, "June"], [2] "March"], [3, "April"], [4, "Major"], [5, ], [8, "Sep"], [9, "oak"], [10, "November"], [11, "December"]]; // graph somePlot = $ Plot ('# monthly-usage'), usage data, {grid: {color: '# 646464', border color: 'transparent', hoverable: true}, xaxis: {ticks: months, color: '# d4d4d4' }, Yaxis: {tick: size: 50, tickformer: function (y, axis) {return y + "kWh";}}, legend: {show: wrong}}); Var ctx = somePlot.getCanvas (). GetContext ("2D"); // Get reference from Plot Y data = somePlot.getData () [0] .data; // Get your series data x xisis = somePlot.getXAxes () [0]; // xx var yaxis = somePlot.getYAxes () [0]; // yAxis var offset = somePlot.getPlotOffset (); // plot offset var imageObj = new image (); // Create an image image obj.onload = function () {// eliminate image to add to canvas xPos = xaxis.p2c (data [4] [0]) + offset. Left; YPos = yaxis.p2c (data [4] [1]) + offset.top; Ctx.drawImage (this, xps, yPos); XPos = xaxis.p2c (data [5] [0]) + offset. Left; YPos = yaxis.p2c (data [5] [1]) + offset.top; Ctx.drawImage (this, xps, yPos); }; ImageObj.src = 'path / in / file.png'; // set the source to load it off}}; });  

Optimization, I would like to include an icon in bars 5 and 6 which warns the user. Alternatively, I would like to change the color of 5 and 6 times. Any ideas about fixing it?

EDIT: I updated my JS according to Mark's answer that works.

@ Mark, how can I keep images properly? They are a little far away. I need an image inside the red bar and not except the bar. I'm trying to pinpoint it but it does not seem that for example I can use "0.5" I use the edge of the side bar which is different from your version.

  xPos = xaxis.p2c (data [4] [0]) + offset.left; YPos = yaxis.p2c (data [4] [1]) + offset.top;  

float gives you access to the HTML5 canvas dragging on it; So you can add your own icon there by borrowing from your answer.

  var ctx = somePlot.getCanvas (). GetContext ("2D"); // Get reference from Plot Y data = somePlot.getData () [0] .data; // Get your series data x xisis = somePlot.getXAxes () [0]; // xx var yaxis = somePlot.getYAxes () [0]; // yAxis var offset = somePlot.getPlotOffset (); // plot offset $. ("Some image .ttt", function (img) {// some image images, I'm loading it from base64 resource var imageObj = new Image (); // image image obz.odo = function () {/ After finishing the image loaded in / canvas var xPos = xaxis.p2c (data [4] [0]), + offset. Left; var yPos = yaxis.p2c (data [4] [2]) + offset. Top; ctx.drawImage (this, xPos, yPos); xPos = xaxis.p2c (data [5] [0]) + offset. Left; yPos = yaxis.p2c (data [5] [3]) + offset top; Ctx.drawImage (this, xPos, yPos);}; imageObj.src = img; // Set the source to load}};  

Example.

< P> looks like: