javascript - jqPlot - Different color bars based on value range for each data point in series -

i need change color of bar chart conditionally each data point in 1 series. 1 data point in series needs have different thresholds color other 4 data points.

i tried implement suggestions found @ this post, i'm getting js error object doesn't have method get.

this data i'm working with:

series 2 needs have colors varied. data produce these series here

1. threshold data contains [ [2,1], [4,2], [6,3], [3,4], [8, 5] ]
2. results data contains [ [6,1], [6,2], [4,3], [6,4], [6, 5] ]

the results data refer blue bar chart lines , threshold data orange line.

for element 1 of results element 4, need following results:

if first element of inner array >= 0 , <= 4, bar should red if first element of inner array >=5 , <= 7, bar should yellow if first element of inner array >=8 , <= 11, bar should green.

for element 5 of results, need: if first element of inner array >= 0 , <= 5, bar should red if first element of inner array >= 6 , <= 11, bar should green.

as example, if resultsseries[0][0] === 4 bar color should red.

at point, i'm fine iterating on chart somehow after has been generated , changing way i'm not sure how that. inspected elements on , got canvas , don't quite understand how jqplot affecting items within or has named them.

link jsfiddle.net

it results in following error:

uncaught typeerror: object [object object] has no method 'get' jqplot.barrenderer.js:280 $.jqplot.barrenderer.draw jqplot.barrenderer.js:280 series.draw jquery.jqplot.js:1065 drawseries jquery.jqplot.js:2735 draw jquery.jqplot.js:2249 $.jqplot jquery.jqplot.js:164 (anonymous function) jqplot_example.html:71 n jquery.min.js:2 o.firewith jquery.min.js:2 e.extend.ready jquery.min.js:2 c.addeventlistener.c 

when want override it, should implement methods. source code , need implement get , setcolors methods.

function (colors) {     colors = colors || $.jqplot.config.defaultcolors;     var idx = 0;      this.next = function () {          if (idx < colors.length) {             return colors[idx++];         }         else {             idx = 0;             return colors[idx++];         }     };      this.previous = function () {          if (idx > 0) {             return colors[idx--];         }         else {             idx = colors.length-1;             return colors[idx];         }     };      // color index without advancing pointer.     this.get = function(i) {         var idx = - colors.length * math.floor(i/colors.length);         return colors[idx];     };      this.setcolors = function(c) {         colors = c;     };      this.reset = function() {         idx = 0;     };      this.getindex = function() {         return idx;     };      this.setindex = function(index) {         idx = index;     }; }