Some Thoughts and examples on making Custom Flex Charts simpler.
December 4th, 2006
I spend a lot of time on flexcoders helping people learn how to write custom extensions to the flex charting components. And while most of the time people are able to reach their goal, there is a steep learning curve they have to ascend first. So last week, in the middle of writing a typical reponse to a charting question, I had a thought on how we might make simple charting extensions easier in the next release.
Interested? Read about it, and see some examples, over here. Take a look, come on back and let me know what you think.
December 4th, 2006 at 2:39 pm
What is the password to view the blog entry?
December 4th, 2006 at 2:55 pm
Yeah, sorry about that. I removed the password, it should be all clear.
December 4th, 2006 at 6:26 pm
This is a great Post. Very informative.
Thanks
December 4th, 2006 at 8:52 pm
Ely,
While I have not yet looked at the code… this is awesome. Some thoughts:
1) Need API to convert back and forth between data and pixel spaces.
2) We can attach listeners to drag our custom components while in data space?
3) If we want to show all labels in chart, how does your API hook into that functionality?
More after I look at your code.
Thanks again.
ThomasB
December 4th, 2006 at 8:55 pm
Thomas –
1) yes, there’s already an API on the charts to do this (see ChartBase.dataToLocal and localToData)
2) yes, of course. While the layout logic of the DataDrawingCanvas works in data space, it’s still just display objects inside of display objects, so you can add all the listeners that normal components support.
3) you mean the dataTips? It doesn’t. But using this you could easily create labels for each data point in your dataProvider (see the example that places labels on top of the columns).
December 6th, 2006 at 8:52 pm
Ely,
This looks really sweet, but I think a more general version could be even more useful. You might have the notion of a container’s contents being in some space which is transformed to pixel-space by the container. In addition to charting, this could be very useful for any kind of authoring (especially paper-page-based) application, where there is a distinction between document-space and pixel-space.
-Adam
December 11th, 2006 at 11:19 am
Ely,
Where do you think would be the best place to learn more about creating custom charts? I find a lot of your samples greatly useful, but I am having trouble understanding how to create my own chart types. I have recently found some code you did for a radar chart and I love it, but I am having a hard time modifying it to do what I want it to just because I am not very familiar with creating custom charts. Any direction would be greatly appreciated. Thank you for all you do for the flex community!!
December 18th, 2006 at 2:58 am
Looks superb – but I’m unable to get this running locally – I’m not sure all the required files are present in the downloadable source ? Or is it just me ?!
Jamie.
December 20th, 2006 at 1:39 pm
I like the drawing sample! I would still like to subclass a ColumnSeries. Do you have an example which subclasses the ColumnSeriesRenderData, and shows how to share that data with the ColumnSeries and a subclassed renderer?
December 25th, 2006 at 12:02 am
Wow, DataDrawingCanvas is great!
Any chance it will become “official” and it will be included in a charts/flex update?
December 26th, 2006 at 8:38 am
I had the same problem as Jamie running the app locally. Some files appear to be missing from the downloaded source. The API’s seem to work fine, however.
This for sure needs to be an explicit part of the Charts package.
One of the great things about Flex is that while the learning curve is long, long, long it is not at all steep. You can be productive long before you’re really proficient. (A lot of this is due to the quality of the documentation and examples.) These chart api’s would move customization way forward on the learning curve, providing early access to some features I suspect many are looking for.
As an added bonus, I learned a lot about Flex just by working with the code. Maybe this is the point: Give somebody an easy way to do something cool and you lock in some learning along the way.
December 26th, 2006 at 11:14 am
can you suggest a good flex sample site, other than adobe, with some good examples, thanks
December 28th, 2006 at 7:56 am
I am really struggling with column charts, and it seems like this drawing canvas meets most of the issues I was trying to customize. However, I grabbed all the code but it won’t compile because it says it is missing the OpCode type? I am not sure what I’ve done wrong.
One of the things I need to do that doesn’t seem to be offered is an average line for a column chart. My chart is just 5 columns displaying 5 different values, so there will be an average and I want to draw a line on that number of the y-axis. I can’t use a LineSeries, because there is only 1 data-point. Is that something you have built in and I overlooked it?
Thanks!
December 30th, 2006 at 8:16 am
Pete-
That is the problem. Just comment out the opcode lines that stumble the compiler and go on from there. Whatever it is you probably won’t miss it.
For your average line in the column chart, you might just draw it using lineTo or, even easier, repeat the average value thru the dataProvider and use lineSeries.
Good luck!
January 1st, 2007 at 5:09 pm
Hi Ely!!! Great job!!! I did like all your examples. Very very helpful!!! I have a question, how can I have multiple y axes but one x axis. Multiple means much more than 2, at least 30!!! This way I will be able to stack many charts and then
will be able to compare all those with respect x axis. My last question is if my x axis is a date/time axis then how I can mark the back ground with multiple color. As an example suppose my x axis starts from 1/1/07 and ends at 31/12/07. From 1/1/07 to 3/31/07 back ground will be blue and from 4/1/07 to 9/30/07 will be green and 10/1/07 to 12/31/07 will be yellow!!!! This is just the back ground. How can I do that?? Thanks for your time and all your help!! By the way “Happy New Year†and hope to see some more excellent examples from you in coming days.
January 2nd, 2007 at 9:10 am
Awesome examples here! Thanks….
any way to access the actual rendered data after interpolating a line series…
Need to have a slider bound to the displayed data not the actual data…
January 8th, 2007 at 1:13 am
Hi again
My last question is if my x axis is a date/time axis then how I can mark the back ground with multiple color. As an example suppose my x axis starts from 1/1/07 and ends at 31/12/07. From 1/1/07 to 3/31/07 back ground will be blue and from 4/1/07 to 9/30/07 will be green and 10/1/07 to 12/31/07 will be yellow!!!! This is just the back ground. How can I do that?? Please Please answer!!!!
January 10th, 2007 at 7:18 pm
Hi Ely I was trying to run your DataDrawingCanvas samples. But looks like that you did not include few files
since I get some missing file error message. Any suggestions?? I am attaching the error message.
Best regards ….
4 Errors found.
Error C:\Program Files\jboss-4.0.4.GA\server\default\deploy\siliconsole-08-31.war\chartexamples\qs\charts\dataShapes\OpCode.as:189
Access of undefined property GraphicsUtils.
188: case DASHED_LINE:
189: GraphicsUtils.drawDashedLine(g,params.stroke,params.pattern,
190: cache.x(data(params.xFrom)) + offset(params.xFrom),
Error C:\Program Files\jboss-4.0.4.GA\server\default\deploy\siliconsole-08-31.war\chartexamples\qs\charts\dataShapes\OpCode.as:4
Definition qs.charts:DashedLineRenderer could not be found.
3: import flash.display.Graphics;
4: import qs.charts.DashedLineRenderer;
5: import qs.utils.GraphicsUtils;
Error C:\Program Files\jboss-4.0.4.GA\server\default\deploy\siliconsole-08-31.war\chartexamples\qs\charts\dataShapes\OpCode.as:5
Definition qs.utils:GraphicsUtils could not be found.
4: import qs.charts.DashedLineRenderer;
5: import qs.utils.GraphicsUtils;
6: import flash.geom.Matrix;
Error C:\Program Files\jboss-4.0.4.GA\server\default\deploy\siliconsole-08-31.war\chartexamples\qs\charts\dataShapes\OpCode.as:7
Definition qs.ipeControls.classes:CorrectText could not be found.
6: import flash.geom.Matrix;
7: import qs.ipeControls.classes.CorrectText;
8:
January 21st, 2007 at 11:47 pm
Ely,
Very informative stuff, I like your blog very much – very powerful reference. you didn’t submit new things quite some time now, hope all is well!
January 25th, 2007 at 3:21 pm
Ely:
This was a great post. Unfortunately, I am having the same problems as others getting the code to build. At your earliest convenience it would be awesome if you could add the missing files. Thanks!!!
January 25th, 2007 at 4:08 pm
source should be fixed now guys. Thanks for being patient.
January 31st, 2007 at 11:16 am
Hi,
Love your work on the charting components and the useful tips on this site. I’m very interested at the moment in being able to highlight a particular bar on a column chart after it is clicked (to show the currently “selected” chart item). I will try to use this library to achieve that effect, since it seems to be the easiest way at the moment to do this. There was some info on the Flex charting helpfile on how to overlay a colored rectangle on a chart, but it didn’t seem like it would work properly when the browser is resized without a lot more work on the coordinates handling.
February 3rd, 2007 at 3:48 am
…what is missing in charts for Flex 2 are arachnograms, a.k.a., spiders, radar and polar. What would also be nice is to see some gauges! Very creative site and inspiring stuff. Thanks, m2
February 17th, 2007 at 12:47 am
…back to what’s missing on my 2.3.07 post. Sure, I’m dreaming, but what would really be nice is to have a charting component in flex with the ease of use found in xcelsius 4.5. That product is the primo example of simplicity on the other side of complexity. Unfortunately, it lacks flexible connectivity and the embedded model limits its application reach. However, were this dream to come true, then you would see creativity unleashed, and perhaps, world charting domination…
February 26th, 2007 at 6:30 pm
I find this post and the associated example incredibly useful and I would really like to be able to use it in our projects. Please polish your code and let us know. I thank you a thousand times.
March 2nd, 2007 at 10:38 am
Can anyone point me to good instructions on getting third-party components, etc., into Flex Builder 2?
With the gage control, I point an additional build path to the gage directory, but get an error in the style sheet Embed statement (Can’t find the jpgs).
I’ve gone through the Builder Help lots of times with no results.
March 9th, 2007 at 12:24 pm
We are starting to look at using Flex Charts and making the data points and lines more interactive. The DataDrawingCanvas seems to be a good solution that would make it easy to do. Please continue to move forward on productionizing the code…we look forward to using it.
March 25th, 2007 at 10:36 am
Hi,
I’m trying to make a dynamc chart using the DataDrawingCanvas but it works not correct. Each time when the data provider changes the draw method draws the old data.
Here is some code:
public override function set dataProvider(value:Object):void {
this.data.sort = sort;
this.data.refresh();
super.dataProvider = data;
this.invalidateDisplayList();
}
protected override function updateDisplayList(unscaled_Width:Number, unscaled_Height:Number):void {
super.updateDisplayList(unscaled_Width, unscaled_Height);
drawData();
}
public function drawData():void {
if(this.dataProvider){
this.beginFill("0xff0000", .5);
this.drawRect(...,...,...,...);
this.endFill();
}
Is this the right workflow? Any ideas? Is it possible to refresh the graphics-Object? I’m trying this the last tree days and I realy don’t know how to fix this problem
Regards,
Angel
March 29th, 2007 at 3:32 am
Hi Ely,
I have found this component really, really useful. In fact, I could say it’s a key part of a custom chart component I have almost created. You can seen a first version of this component here:
http://www.prexon.es/mif/SparkLineAdvancedChart.swf
Btw, forget the effects :) The third pod is set not to use any effect.
Cheers,
Alberto
April 13th, 2007 at 11:24 am
hi ely, ‘been visiting your blog from time to time hoping to see a more complete version of datadrawing canvas. are you still planning on imprving this? moreover, i hope id see additional examples on its use especially on the polar-based charts. more power and thnx!
May 8th, 2007 at 12:02 am
Hey,
Watching your experience with charts, I was wondering if you could help me on this part. I saw that you did lineTo mashups for custom flex charts. It was exactly what I needed but for line graphs. Do you think its possible?
I would want the developer to be able to key in manually say “1,40″ and then “2,50″. so that there will only be a line drawn which looks like “/”, instead of having to parse the whole xml document or array and draw out the whole graph. I want to be able to draw only certain required elements.
Please advise. Btw good work!
Cheers,
Del
June 22nd, 2007 at 10:49 am
Hi Ely,
I found the DataDrawingCanvas exteremely useful. I have been trying to figure out how to draw horizontal background lines for the 2nd numeric axis and realized your component provides a nice way of doing this. I however am running into a problem and was wondering if you could point me in the right direction…
What I’m doing right now is I take the labelSet on the 2nd Y axis, take each value and find the correponding value in terms of the 1st Y axis and draw a line from the 1st labelSet value of the Category Axis/X Axis to the last labelSet Value of the same for this calculated Y axis value. The problem is when the Category Axis has a padding value which is greater than 0, the background lines are left dangling in mid-air(they don’t join the 1st y axis and 2nd y axis lines). I guess I need to provide an offset to the category labelSet 1st and last values when I call ‘lineTo” on the DataDrawingCanvas. I could do some calculations and probably find out the size of each Category item and then put the offset in but i was wondering if there is a better/easier way of achieving this. Please advise.
Cheers,
Mausam
July 3rd, 2007 at 6:50 am
has any had the problem that all the source isn’t there? in ChartBackgrounds_code.as i have issues with import qs.data.DataSplit; the folder data isnt in the package… great work with the examples, i wish i could the code to work though….
September 3rd, 2007 at 2:55 pm
Brilliant, brilliant work.
I am an architect. Not a software architect, I design buildings, hospitals actually. I must confess I know virtually nothing about web development.
I’m working on a design concept for a hospital that posits “transparency†as a persistent theme of modern medicine – the act of seeing into the body, of understanding the inner workings of anatomy despite the fact that those systems are concealed. When I talk to physicians about transparency they are always a little confused at first… until I show them your anatomy demo – then they get it right away. It’s inspiring. It’s this amazing juxtaposition of past and future for them – It takes them back to med school and then forward into an incredibly elegant and futuristic interface. They are instantly on board.
I often have to present in rooms that don’t have reliable internet connections (this must sound Paleozoic to a flex developer) and I am looking for a way to run your demo locally. I have downloaded the source files, but can’t get anything to run. From what I have read it seems that there is a great deal of server cross communication required by flex, so I am guessing that a person with my skills won’t be able to run locally. Any thoughts on how I might do this? I’m sure you are busy with more pressing demands, so I won’t be surprised if I don’t hear back, but I thought I wouldn’t hurt to ask.
Thanks again Ely. Your work is changing everything.
Ryan Hullinger Associate
NBBJ 1555 Lake Shore Drive COLUMBUS OH 43294
Direct: 614.232.3201
September 20th, 2007 at 4:53 am
to Ryan:
Is there any problem in just saving the swf with the book on your hard disk and running it from there? As far as I could see it doesn’t do any communication with the server once it’s loaded?
Instruction:
…and once it’s saved drag’n'drop that file to web browser window, or use standalone Flash player (it’s called Projector, look on Adobe website e.g. on this page
http://www.adobe.com/support/flashplayer/downloads.html )
September 20th, 2007 at 5:05 am
…sorry, beginning of the instructions got wrong.
the instructions should start:
Click with right mouse button, press “save target to disk” (or something similar, depending on your browser), choose where on disk the file should be saved, …
(the rest of instrucitons is correct)
Ely: there’s a bug in your blog. If one is using {a} tag and {/a} is not placed (as I did by mistake on my previous post), the link will continue all the way down to the bottom of comments, including “new comment box”, so (at least in my Opera browser) when I click comment contents box, I will not be able to write, but my link from previous post will load (i had to use Tab key to be able to write this post).
(I added extra {/a} on top of this post to close unclosed {a} from my previous one, so now you won’t notice this bug)
October 26th, 2007 at 10:51 am
Great work… I’ve put this to work for several different things, and it’s been perfect. The only problem I see is that it doesn’t seem to work with the DateTimeAxis if “includeInRanges” is turned on. It somehow doesn’t calculate the sizes corretly in date/time space. Have you seen this issue before?
December 16th, 2007 at 9:45 pm
Thanks for your sample custom chart it helped me in developing the custom chart project I have. Take a peek on this one.
http://tomgutz.wordpress.com/2007/12/17/flex-custom-chart/
Thanks!
April 30th, 2008 at 11:04 pm
Hi Ely,
Although i solve this problem, i wanted to ask you how you would approach the same problem i have. The reason that im asking is that i dont think I have the best solution to it.
Anyway here is my question. Given that you have two axes on the same direction, for example one axis on the left and one axis on the right, How would you synchronize them so that their zero position is aligned?
I tried using you CartesianDataCanvas (which is great!). However when given the scenario above, when i add an element to one canvas which moves the minimum of one axis for instance the left, the right axis does not follow. Which can be confusing for a user.
If i dont express my question well. Let me know ill elaborate more.
I hope you could give me a good answer.
Thanks,
Tomgutz