How to change the color of a POINT based on it's value

[jlawton]

Hello all,

I have a line chart and I'd like to change the color of the point based on it's value (or really any time, but based on value makes for a good example). I have the following code, and you can mess with it at the following link here. I think this could be useful for a lot of people to know how to do and I can't find any examples of it anywhere.

Ext.onReady(function() {
Ext.define('tempModel', {
extend: 'Ext.data.Model',
fields: ['letter', 'number']
});

var tempStore = Ext.create('Ext.data.Store', {
model: 'tempModel',
data: [{ letter:"A", number: 48},
{ letter:"B", number: 72},
{ letter:"C", number: 64},
{ letter:"D", number: 29},
{ letter:"E", number: 37},
{ letter:"F", number: 51},
{ letter:"G", number: 35},
{ letter:"H", number: 90},
{ letter:"I", number: 61},
{ letter:"J", number: 19} ]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 470,
height: 300,
store: tempStore,
axes: [
{
title: 'Numbers',
type: 'Numeric',
position: 'left',
fields: ['number'],
},
{
title: 'letter',
type: 'Category',
position: 'bottom',
fields: ['letter'],
title: 'letter',
grid: true,
label: {
rotate: {
degrees: 90
}
}
}],
series: [
{
type: 'line',
xField: 'letter',
yField: 'number',
renderer : function (sprite, record, attributes, index, store) {
/*
if (record.number <= 30) {
attributes.fill = '#ff0000';
} else if (record.number >= 70) {
attributes.fill = '#00ff00';
} else {
attributes.fill = '#0000ff';
}
*/
return attributes;
},
tips : {
trackMouse : true,
width : 200,
height: 40,
renderer : function(storeItem, item) {
this.update(storeItem.get('letter') + ' ' + storeItem.get('number'));
}
}
}
]
});
});​

In the series, I have a renderer, but I'm not sure how to get the value of the current record. I've tried record.number and record.get('number') and store.getAt(index) (which get's you the record again)... I'm stuck!

Any suggestions would be greatly appreciated!

Thanks

[Farish]

I looked up the API Documentation for line series: http://docs.sencha.com/ext-js/4-1/#!...e-cfg-renderer

the comments on it say that there is some problem with the record (is not always correct) and recommend that instead of using store.getAt(index), you should use the following:

var correctRecord = chart.series.items[known series index].items[index].storeItem;

where known series index would be 0 in your case if you are using only one series.

[jlawton]

Thanks for the link to that, it almost helped, but it doesn't seem to be working.

In the code example he has:

var chartId = sprite.surface.id;
var chart = Ext.getCmp(chartId);

When I console.log chart, I don't get a value (I get undefined). I think that's because I'm doing this while rendering the chart, and this example is for after the chart has been rendered.

So is there a way for me to do this while creating the chart? Or am I going to end up creating the chart, and then going over it a second time and styling it as needed?

[Farish]

you can do it inside the chart creation. you should be able to access the chart itself somehow inside the renderer function. getCmp will return undefined because you are not defining an id for the chart. Its not recommended (using an id) but for now, try the following: assign an id to your chart and then inside your renderer, use that id to get the chart. see if that works.

var chart = Ext.getCmp('chart_id');

[jlawton]

What I'm saying is that with the jsfiddle I set up, you can see that while the first line of the code that gets the chartId works correctly, the second line that gets the chart object does not.

var chartId = sprite.surface.id; // this works and returns a valid chartId
var chart = Ext.getCmp(chartId); // this returns undefined

[Farish]

getCmp works with a unique id which is not what chartId holds. see the documentation for Ext.getCmp(). the id should be configured on the chart.

Ext.create('Ext.chart.Chart', {
  id: 'chart_id',  // this is the id which you can use in Ext.getCmp('chart_id');
  renderTo: Ext.getBody(),
...

});