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

Question

I need to change the color of a bar chart conditionally for each data point in one series. 1 data point in the series needs to have different thresholds for the color than the other 4 data points.

I tried to implement the suggestions found at this SO post , but I'm getting a JS error that the object doesn't have the method get.

This is the data I'm working with:

Series 2 needs to have colors varied. The data to produce these series are 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 to the blue bar chart lines and threshold data to the orange line.

For element one of results to element 4, I need the following results:

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

For element five of results, I need: if the first element of the inner array is >= 0 and <= 5, the bar should be red if the first element of the inner array is >= 6 and <= 11, the bar should be green.

As an example, if resultsSeries[0][0] === 4 then bar color should be red.

At this point, I'm fine with even iterating over the chart somehow after it has been generated and changing it that way but I'm not sure how to do that. I inspected the elements on it and just got a canvas and I don't quite understand how jqPlot is affecting the items within it or what it has named them.

Link to jsFiddle.net

It results in the 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

Answer 1

When you want to override it, you should implement all its methods. This is from the source code and you need to implement get and 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];
        }
    };

    // get a color by index without advancing pointer.
    this.get = function(i) {
        var idx = i - 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;
    };
} 

Answer 2

seriesColors: value < threshold ? ["#ff0000"] : ["#00ff00"];