PDA

View Full Version : show node value in line chart



maxgreg13625
7 Apr 2014, 6:16 AM
Hello everyone

I'm using EXT JS 4.1
I want to show the node value in the line chart through the label in session
My code is like these
label: {
display: 'under',
renderer: function(storeItem, item){

return (item.value[ 1 ] + '%');

}
}
However, it does not work.
It show only line chart.
Is I used the wrong element?
How should I modify?

Thanks in advance
Best Regards

Farish
7 Apr 2014, 6:47 AM
you have to add the field whose value is to be rendered as label. e.g.


label:
{
display: 'insideEnd',
field: 'data1',
renderer: function(val) {
return val + '%';
}
}

maxgreg13625
7 Apr 2014, 5:00 PM
Thanks for your reply
I have tried this way used both field and renderer attribute.
But the result is the same.
What is wrong with the label?


lable: {
display: 'insideEnd',
field: 'DGP8761',
renderer: function(storeItem, item) {
return item.value[1] + '%';
}
}





you have to add the field whose value is to be rendered as label. e.g.


label:
{
display: 'insideEnd',
field: 'data1',
renderer: function(val) {
return val + '%';
}
}

Farish
7 Apr 2014, 10:26 PM
DGP8761 is your field's name? also, you didnt use the renderer I posted. First, just try it without any renderer and it should work.

maxgreg13625
9 Apr 2014, 4:06 PM
Thanks for your reply.

Yes, DGP8761 is the field name in series.
I have tried your code, but the result is failed.
I also tried to change series type to column. (other attribute no change)
The label appear in the bar !!!
I'm suspect that the label is no use in line chart...

Thanks in advance.

Best Regards

Farish
9 Apr 2014, 10:35 PM
i tried the code I posted with the examples in the API documentation and the label did appear there. you should also try that. open the "line" series documentation and add this label there (remove unnecessary code) and click on Preview to see how it appears.

which version of ExtJS are you using? it could be related to that if not in your code..

maxgreg13625
10 Apr 2014, 12:21 AM
Thanks for your advice.

I have download other EXT JS 4.1.1 and 4.2.1.
I modified the line chart example under the example folder. (Not in my code)
However both two version don't show the label.
And it show the label if I modify the type to column.



type: 'line',
highlight: {

size: 7,

radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {

type: 'cross',

size: 4,

radius: 4,

'stroke-width': 0
},
label: {

display: 'insideEnd',

field: 'data1',
renderer: function(val) {

return val + '%';

}
}


Thanks
Best Regards

Farish
10 Apr 2014, 12:37 AM
hmm. it seems to be version dependent. I tried it with 4.0.7 and its working there. you can change the ExtJS version in the API Docs (top left) and then paste the following code into the code editor. then you will see the numbers!


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1'],
data: [
{ 'name': 'metric one', 'data1': 10 },
{ 'name': 'metric two', 'data1': 7 },
{ 'name': 'metric three', 'data1': 5 },
{ 'name': 'metric four', 'data1': 2 },
{ 'name': 'metric five', 'data1': 4 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: 'data1',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: 'name',
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data1',
label:
{
display: 'insideEnd',
field: 'data1',
renderer: function(val) {
console.log(val);
return val + '%';
}
}
}
]
});