Is it possible to dynamically change colors on charts in ExtJs / YUI charts?

Question

I use ExtJs / YUI graphics in my application. What interests me is, is it possible to dynamically change color on any of the diagrams based on data?

i.e. I have a repository containing a field having a hex color for this particular line. Is it possible to dynamically set the color of a strip in a histogram with a hexadecimal value?

Answer 1

Take a look at this blog post . When you customize the chart object, pass the series object with the style property, as described in this article, to determine the colors and their sequence.

Then you just need to get your colors by going through your store records and creating a new array, or perhaps pulling it out of your store using store.query. Then pass this array as a property.

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

Answer 2

From what I could find, you can use

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

if you create a pie chart (or another chart with the series.colors attribute) and it works fine.

If you use a chart type that does not support series.colors ... it gets a little more confusing. I found that using the visualization method works quite well. The only problem with this method (I can see right away) is that it does not change colors in the legend. Some editing is required to find out if it can be pulled out of the store.

If you find out the problem with the legend, let me know, but I hope this helps.

Note. Not all 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

Try the following:

• Create a hidden field and assign its value to the value of the store field, which contains the color value.
• when displaying a histogram, set the background color of the line to the value of the hidden field.

Answer 4

Yes, you can do this with rendering. The following code example changes the colors of the columns in a histogram:

  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 the "color" is the store model field. You can set a different color for each bar by setting it in the corresponding entry in your store.