View Full Version : Chart line/data filtering?

16 Aug 2009, 12:52 PM

Ive been trying to solve this for several days now with no luck. Plenty of experimenting though which is always good for learning more.

Is there a way to make a column chart skip certain values from rendering in the chart, and just move on to the next one (like for the value 0 for example). Like a filter that will skip over the value and draw the next one instead?

To clarify a bit, here is an example.

Im showing lines in the column chart which has data from February to July. The X axis shows for example Mars 12:th 2009 and shows values for the 5 lines in the chart. One of the lines has the value 0 for this date which means a job hasnt run and I dont want it included. But if I dont produce some value for the line for that date, the entire chart wont show. It needs a value for every item on the x axis.

So I need a way to either make the chart render even when there is missing values for some of the dates, or skip the missing dates.

I hope I was clear. Any help would be much appreciated since Im very, very stuck. :(

16 Aug 2009, 12:55 PM
Would Store filtering help?

You could filter out zero values.

16 Aug 2009, 12:57 PM
I was thinking about it, but I still think the chart will fail to show at all if there are "holes" in one of the lines. But I will try it and see what happens. Perhaps it works since the data is actually there, and the chart may know to just skip it.

16 Aug 2009, 1:03 PM
That's what I'm saying. Filter out the Records that represent "holes". They then won't appear in any View based upon that Store. That includes Charts, DataViews and GridPanels.

16 Aug 2009, 1:23 PM
You were right! Now it works exactly how I want! Thank you very very much. :)

Edit: Turns out it only works when having 1 line in the chart.

16 Aug 2009, 2:03 PM
I think I still may have a problem. Filtering out entire records means Im filtering out all the data for a specific date. This works great for grids as you mentioned, but for charts with multiple lines, it becomes a problem. What I really want is the equivalent of filtering out a cell.

The store has these columns: ['date','runtime1','runtime2' ... etc]

Date is shown on the x axis and the others on the y axis. So for example in this situation:

date=12/7 runtime1=-100 runtime2=-100
date=13/7 runtime1=-100 runtime2=-100
date=14/7 runtime1=140 runtime2=-100
date=15/7 runtime1=-100 runtime2=-100
date=16/7 runtime1=447 runtime2=526
date=17/7 runtime1=-100 runtime2=-100
date=18/7 runtime1=-100 runtime2=-100
date=19/7 runtime1=-100 runtime2=-100
date=20/7 runtime1=95 runtime2=-100
date=21/7 runtime1=16 runtime2=-100

For the ones with -100 (its the value I set for records I dont want included), I want to filter only runtime1 or only runtime2 (or both) but the store filter method only allows me to filter entire records.

Not sure what I can do to fix this. The chart requires me to have values for every date, but the data source doesnt have them so Im setting them to -100 as it is now.

What can I do to make this work? Can I somehow store the data in another way so I can filter out what I need?

16 Aug 2009, 9:29 PM
Filter out ones you don't want to see!!!!!!

16 Aug 2009, 11:07 PM
Animal, my apologies. I only knew about the filterBy function which can filter records, but I discovered there was two more after looking in the API. Perhaps I can get them to not filter entire records. I will check them out.

17 Aug 2009, 12:20 AM
Still cant get this to work, and I think you are misunderstanding me Animal.

The store can only filter entire records, no matter what I do. So how do I filter out:

record1.data.runtime1 = -100 <-filter this value
record1.data.runtime2 = 50 <- dont filter this value

It cant be done. Its the same record. I can only choose to filter out the entire record with all its fields, or not filter it at all.

Or am I missing something?

The problem is that if you have a chart with time on the x axis, for every record that has the same timestamp, you can only select to show all records or hide all records for that timestamp. Lets say that on June 1 there is a record with a field value of -100 that i want to filter. There is also records for June 1 with values of 40,60,30,20 that I dont want to filter. But I have to if using store filtering since I cant filter fields, only records.

So in order to support discontinuous series on a chart, you really need the option to filter on the field level.

Basically, you cant do something like this:


where you have 5 lines and want to show 4 out of 5 lines for a specific x value.

So consider this a feature request if Im right. :)

17 Aug 2009, 2:33 AM
I must be misunderstanding. I thought one Record equals one datapoint on a chart.

17 Aug 2009, 3:04 AM
I thought so too before I started coding the application. :)

17 Aug 2009, 5:06 AM
That is the case.

What you are asking for, and what http://teethgrinder.co.uk/open-flash-chart-2/null-values.php shows in the case of the line graph is some kind of interpolation for null values.

Don't know if the underlying chart API can do that.

Some people think Ext's doc is difficult to read, well try YUI!


It may be fulsome, but it's itty and bitty and difficult to navigate!

17 Aug 2009, 5:32 AM
Yes, I actually like the Ext JS docs. :) Its easy to find methods, events etc. Sometimes it would be nice with more examples but I have found those in the FAQ documents (such as for the grid).

I dont know if the underlaying component can do it either, but thats easy to find out. I dont think so though. The whole reason I generated all these -100 numbers was because the chart would show up empty otherwise (no error message), and I figured I could get around it somehow by sending bogus data and then filtering it away. But no cigar... :)

17 Aug 2009, 10:07 AM
Create a copy of the store that contains only the records you wish to display on the chart and fill that copy store from the original store.

17 Aug 2009, 11:04 AM
I think the OP wants the Records to be represented on the X axis, but the line of the graph to just skip over that datapoint if there is no data there. Like in the linked example.

It might be worth asking the question on the YUI mailing list.

27 Oct 2009, 10:35 AM
I had the same issue and ended up finding out that you need to have a null value for the data you want to skip. I posted my solution here:

Hope this helps.