How to set individual column chart colors per column?

Question

I'm generating a column chart in Dojo 1.4, and I want to color the individual columns based on the value it represents related to a threshold value. For example, if the value of the column is 5 or less, it should be a green fill. If it's 10 or more, it should be a red fill.

I can get colors to work at the Series level, but I want individual data points within the same series have this variable color scheme. Can this be done? Is there a better way to solve the problem?

Here's the code generated by my application so far:

var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns", gap:5});
chart1.addPlot("target", {type: "Lines"});
chart1.addAxis("x",
    {labels: [{value: 1, text: "Aug '12"},
    {value: 2, text: "Sep '12"},
    {value: 3, text: "Oct '12"},
    {value: 4, text: "Nov '12"},
    {value: 5, text: "Dec '12"},
    {value: 6, text: "Jan '13"}],
    minorTicks:false});
chart1.addAxis("y", {vertical: true, min: 0, max: 9});
chart1.addSeries("Data Series", [6.9,7.7,1,5.5,7.6,8.1]);
chart1.addSeries("Target Series", [6,6,6,6,6,6], {plot:"target"});

chart1.render(); 

I would like the individual points within the "Data Series" to have the variable color values.

Answer 1

You can do this using "StackedColumns". The idea is that you can create one serie per each color. For example, a "green" serie for values <=5, other for values >5 and <=10 and "red" for values >10.

Then, you have to evaluate each value in the array that you have the data, and put that value in the corresponding serie, like this:

 for(var i=0; i<chartData.length;i++){
        if(chartData[i]<=5)
            fill("green",chartData[i]);
        else if(chartData[i]>5 && chartData[i]<=10)
            fill("yellow",chartData[i]);
        else
            fill("red",chartData[i]);
    }

See this jsfiddle to see the example running using dojo