Can the colors on charts in ExtJs/ YUI Charts be changed dynamically?

Question

I am using ExtJs/ YUI charts in my application. What I am wondering, is it possible to dynamically change the color on any of the charts based on data?

ie I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?

Answer 1

Take a look at this blog post . When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.

Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.

(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

Answer 2

From what I've been able to find, you can use the

(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)

method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.

If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.

If you figure out the legend issue, let me know, but I hope this helps.

Note: Not all the variables used in the below script are populated in the script.

function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
    return aFiller[rec];
}
Ext.onReady(function() {
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
    chart = new Ext.chart.Chart({
        renderTo: document.getElementById('test-graph'),
        width: 800,
        height: 600,
        animate: true,
        store: sDataStore,
        legend: {
            position: 'right',
            isVertical: true,
        },
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['field1','field2','field3','field4'],
            title: 'Title Here',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: label1,
            title: sXAxisLabel,
            grid: true,
        }],
        series: [{
            renderer: function(sprite, record, curAttr, index, store) {
                var color = myColorer(index);
                return Ext.apply(curAttr, {
                    fill: color
                });
            },
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: label1,
            yField: ['field1','field2','field3','field4'],
            style: {
                opacity: 0.93
            }
        }]
    });
});

Answer 3

Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:

            series: {
                type: 'bar',
                xField: 'name',
                yField: 'value',
                label:{
                    field: 'value'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var record = rendererData.store.getData().items[index];

                    return Ext.apply(rendererData, {
                        fillStyle: record.data.color,
                    });
                }
            }

Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.

Answer 4

Try this:

1. Create a hidden field and assign its value to the value of the store field which contains the colour value.
2. when rendering bar chart, set the background colour of a bar to the value of the hidden field.