javascriptcolorsflotr2

Flotr2 different colors for two sets of data

I've merged positive and negative data to one data set called yAxis (multiple columns for both positive and negative). Here's the code:

//...

var yAxis = [wololoTotalValues];
var xAxis = wololoTotalKeys;

window.onload = function () {
    Flotr.draw(document.getElementById("chart"), yAxis, {
        title: "wololo",
        bars: {
            show: true,
            barWidth: 0.8
        },
        yaxis: {
            min: 0,
            max: wololoMaxValue + 10,
            tickDecimals: 0
        },
        xaxis: {
            ticks: xAxis
        }
    });
};  

//...
<div id='chart' style="width:1200px;height:500px;"></div>

Here's how it looks like now

I would like 'bad' and 'ble' to be red. I found some manuals how to handle this problem with flot, but not flotr(flotr2).

Is there any way to make it somehow like below? Or maybe I must split the data like here?

colors: (yAxis[0-lastGood] : "#0000FF"), (yAxis[lastGood+1-lastBad] : "#FF0000")
Solution

  • Okay, found the solution, splitting the data into two arrays helped. Code is below:

                var gud = [];
            for(i=0; i<wololoLengthGood; i++){
                gud.push([i, wololoValuesGood[i]]);
            }

            var bad = [];
            for(i=wololoLengthGood; i<wololoLengthGood+wololoLengthBad; i++){
                bad.push([i, wololoValuesBad[i-wololoLengthGood]]);
            }

            window.onload = function () {
                Flotr.draw(document.getElementById("chart"), 
                [{                         // replacement of 'yAxis' from here
                    data: gud,
                    color: "#0000FF"
                },{
                    data: bad,
                    color: "#FF0000"
                }],                        // till here.
                //...