PDA

View Full Version : column chart highlight-unhighlight problem



Seyran
22 Oct 2013, 2:40 AM
Hi, now I'm working with extjs column charts and I have a trouble. Please, can anyone help me?
I have some code, which must make column chart. Clicking on each column on that char the clicked column must highlight/unhighlight. It works fine for clicking on every single column on the chart. But if I click and highlight multiple columns, I can unhighlight only the column I select the last. If I click on other columns, they are staying highlighted and I can't unhighlight any of them.
Is it a bug and can I resolve it by some way. Please help. :)

And here is my code:


Ext.require(['Ext.data.*', 'Ext.chart.*', 'Ext.layout.container.Column']);
Ext.onReady(function() {

Ext.define('Ext.chart.theme.custom', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
stroke: '#ffffff'
},
axisLabelLeft: {
fill: '#ffffff'
},
axisLabelBottom: {
fill: '#ffffff'
},
axisTitleLeft: {
fill: '#ffffff'
},
axisTitleBottom: {
fill: '#ffffff'
},
}, config)]);
}
});
// sample static data for the store
var myData = [
['Company1', 75.0],
['Company2', 73.0],
['Company3', 71.5],
['Company4', 40.0],
['Company5', 69.0],
['Total', 60.1]
];
for (var i = 0, l = myData.length; i < l; i++) {
var data = myData[i];
}


//create data store to be shared among the grid and bar series.
var ds = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'companyName'
}, {
name: 'mtrTransport %',
type: 'float'
}, ],
data: myData,
});


//create a bar series to be at the top of the panel.
var chartMtr = Ext.create('Ext.chart.Chart', {
style: 'background:#000000',
height: 800,
width: 700,
animate: true,
theme: 'custom',
store: ds,
shadow: false,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['mtrTransport %', 'mtrTransportAvg %', 'mtrEnabled'],
title: 'Percent',
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['companyName'],
showInLegend: true,
title: 'Company list',
grid: true,
label: {
rotate: {
degrees: 270
},
color: '#ffffff'
}
}],
series: [{
type: 'column',
xField: 'companyName',
yField: 'mtrTransport %',
axis: 'left',
showInLegend: false,
showMarkers: true,
listeners: {
itemclick: function(item) {
var name = item.value[0],
series = chartMtr.series.get(0),
series2 = chartMtr.series.get(1),
i, items, l, average, cnt = 0,
sum = 0;
series.highlight = true;
series.unHighlightItem();
series.cleanHighlights();
for (i = 0, items = series.items, l = items.length; i < l; i++) {
if (name == items[i].storeItem['data']['companyName']) {
if (items[i].storeItem['data']['mtrEnabled'] == false) {
items[i].storeItem['data']['mtrEnabled'] = true;
} else {
items[i].storeItem['data']['mtrEnabled'] = false;
}
break;
}
}
for (i = 0, items = series.items, l = items.length; i < l; i++) {
if (items[i].storeItem['data']['mtrEnabled'] == false) {
series.highlightItem(items[i]);
}
}
series.highlight = false;
}
},
style: {
opacity: 0.93,
'stroke-width': 2
}
}]
});
/*
* Here is where we create the main Panel
*/
Ext.create('Ext.panel.Panel', {
title: 'Company data',
frame: true,
bodyPadding: 5,
width: 900,
height: 750,


fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [chartMtr],
renderTo: Ext.getBody()
});
});

slemmon
25 Oct 2013, 9:47 PM
Ultimately are you just wanting to toggle the highlighting of the bars when you click on them or is there more to it than that?

Seyran
27 Oct 2013, 9:21 PM
Yes, I want only highlight or unhighlight bar items on clicking them.

slemmon
28 Oct 2013, 3:40 PM
This is as close as I could get for the time being:

18k

The Ext.chart.Highlight class has an unHightlightItem method, but it doesn't accept an item argument - it will unhighlight all items. You might check the source and create your own override that unhighlights just a single item as that method doesn't exist in the framework natively.

Seyran
29 Oct 2013, 12:10 AM
Wow, it works excellant. Thanks a lot slemmon (http://www.sencha.com/forum/member.php?67514-slemmon). :D