View Full Version : Charts: How to not display certain fields if their value is less than zero?

2 Jan 2014, 7:02 AM
I have a Grouped Bar chart similar to the Sencha example (http://docs.sencha.com/extjs/4.1.3/#!/example/charts/GroupedBar.html) Grouped Bar chart (Months of year on Y axis, Number of hits on X axis) -- except instead of only 3 data fields grouped for each month, I have 19 data fields for each month (!).

With this high number of fields grouped, the bars are understandably very thin. Is there a way so that if a field does not have any "Number of Hits" (number of hits = 0), that field will not show for the given month?

Since most fields do not have a number of hits value populated for each month, it would greatly improve the data visibility.

I have tried to mess with minimum and maximum constraints but all grouped fields are still displayed.

I am using ExtJS 4.2.2

Thank you

Example: I have 19 fields for each month, named A-S. For the month of January, only fields A, B, and C have a "Number of Hits" value greater than zero. For this month, I would like if only fields A, B, and C were shown.

2 Jan 2014, 10:11 AM
I tried using null/false/undefined to see if they were omitted, but it draws as they have a zero value.

You should be able to filter the 0 values from the store so the chart does not see them.
If this does not work due to the group spacing, then you would need to override the chart.

21 Jan 2016, 9:37 PM
If it is overriding how can we achieve this. Any Solution

I found a solution to this,

You have to extend the 'Ext.chart.series.Column' in that you have to take 'getPaths' method from 'Ext.chart.series.Bar'

// @override getPaths: function () {
// only plot column where value is their
// set counter value for positioning

Any alternative way for doing this