PDA

View Full Version : Line Chart:- How to highlight label with different color when highlight the markers?



mrprabu
27 Feb 2014, 1:54 AM
Hi All,

Can anyone suggest me idea

How to highlight label as well with different color when Current selected co-ordinate to be highlighted ? And how to create custom marker config type for specific data


48090

mitchellsimoens
3 Mar 2014, 8:36 AM
Something like this?

410

mrprabu
3 Mar 2014, 5:32 PM
Hi mitchellsimoens.

Thanks. But my requirement is bit differ from what you understood.

i-e for particular month(x axes label data) I have to draw a circle on data surface. finally I have been achieved in my code. see below image & code

48132


Ext.define('test.ux.charts.TestLineChart', { extend: 'Ext.chart.Chart',
alias: 'widget.test-linechart',
config: {
store: null,
seriesType: 'line',
currentMonth:'Febuary',
grid: {
odd: {
opacity: 1,
stroke: '#CDCDCD',
'stroke-width': 0.5,
'stroke-dasharray': 5
},
even: {
opacity: 1,
stroke: '#CDCDCD',
'stroke-width': 1
}
},
/**
* @cfg {String} xTitle
* The String value corresponding to the x-axis title.
*/
xTitle: '',
/**
* @cfg {String} yTitle
* The String value corresponding corresponding to the y-axis title.
*/
yTitle: ''
},
/**
* Override the default config of OneClientChart
*
* @param config contains chart config
*/
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
/**
* Initialize
*/
initComponent: function () {
var me = this;
var chartSeries = [{
type: me.seriesType,
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: me.xField,
yField: me.yField,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}];
Ext.apply(this, {
axes: [{
type: 'Numeric',
position: 'left',
fields: me.yField,
title: me.yTitle,
grid: me.grid,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: me.xField,
grid: me.grid,
title: me.xTitle
}],
series: chartSeries
});
this.callParent(arguments);
this.on({
afterlayout: this.onAfterLayout,
scope: this
});
},
onAfterLayout: function (cmp) {
var chart = cmp.down('chart'),
surface = chart.surface,
series = chart.series,
currMon = this.currentMonth,
xLabel = this.xField;


if (!cmp.curretnHighLight && !Ext.isEmpty(currMon)) {
Ext.each(series.items[0].items, function (item) {
var xData = item.storeItem.data[xLabel];
if (xData == currMon) {
var x = item.point[0],
y = item.point[1];
cmp.curretnHighLight = surface.add({
type: 'circle',
fill: 'none',
radius: 10,
"stroke-width": 2,
stroke: '#1F88C2',
x: x,
y: y
}).show(true);
}
});
}


}
});