Sparkline Flex custom components (LineChart and BarChart)
Sparklines are defined by Edward Tufte, their creator as: Intense, Simple, Word-Sized Graphics.
Here are new Flex custom components allowing to easily integrate Sparklines in any Flex application.
If you don’t know yet what are Sparklines, I strongly encourage you to read “Sparklines: theory and practise“, an article written by Edward Tufte, known as the Sparkline inventor.
I thought that it would a good exercise to develop my own Flex custom components for these beautiful Sparklines and I had not been disappointed developing them! Most of the topics that I recently shared with you along my tutorials helped me a lot and were put in practice while developing my two new Flex custom components: SparklineLineChart and SparklineBarChart.
Here is a small demonstration of SparklineLineChart and SparklineBarChart components (right click to view source code):
Click to download source code.
Click to download the BlogagicLibrary.
Here are some key features provided by SparklineChart classes:
- As visible above,
SparklineLineChartandSparklineBarChartcomponents can be used as standalone controls or as item renderers in list or data grid. - They offer different styling options such that you can easily integrate them in accordance with your application’s theme (color, line weight, transparency, …).
- They support a configurable threshold used to determine bar color or to highlight an important area (play with the sliders to see how the threshold value impacts the rendering).
- SparklineChart have a
dataProviderproperty ensuring that theSparklineChartis automatically updated whenever the data changes (use the “Start/Stop timer” check box to see sparklines updated in real time). - Chart scales can be automatically determined or manually defined.
- Tooltips are optional and can be customized.
- And more! Check the provided documentation for all details.
It was a lot of fun for me developing these components, I hope it will be as fun for you using them!
nice looking stuff … going to try them out right now. Thanks and good work!
Seems to be missing: BlogagicLibrary.swc, which I assume includes ‘com.blogagic.core.*’ which is also not present. i.e. ‘Interface IDisposable was not found’
Sorry, I’m still fighting with a correct way of embedding my library!
Here is the BlogagicLibrary.swc
And here is the interface definition:
public interface IDisposable { function dispose():void; }It compiles/runs great now. Again, nice work and thank you.
@hsTed
Thanks!
Glad you like it
For information, I have uploaded a new version (1.1) of SparklineChart and SparklineLineChart with two less bugs! (issues with the firstValueMarker and when binding maxPlots).
Hi
I used this example for Flex 4. The error I get is this:
ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::Graphics/drawRoundRect()
at flash.display::Graphics/drawCircle()
at com.blogagic.controls::SparklineLineChart/drawMarkers()[C:\work\flex_workspace\SparklineChartOfficial\src\com\blogagic\controls\SparklineLineChart.as:518]
at com.blogagic.controls::SparklineLineChart/drawChart()[C:\work\flex_workspace\SparklineChartOfficial\src\com\blogagic\controls\SparklineLineChart.as:463]
at com.blogagic.controls.sparklineClasses::SparklineChart/updateDisplayList()[C:\work\flex_workspace\SparklineChartOfficial\src\com\blogagic\controls\sparklineClasses\SparklineChart.as:1586]
at mx.core::UIComponent/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8531]
at mx.managers::LayoutManager/validateClient()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:932]
at mx.core::UIComponent/validateNow()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7631]
at mx.controls.listClasses::AdvancedListBase/drawItem()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:4777]
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/drawItem()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\advancedDataGridClasses\AdvancedDataGridBase.as:900]
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/drawVisibleItem()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\advancedDataGridClasses\AdvancedDataGridBase.as:1335]
at mx.controls::AdvancedDataGrid/drawVisibleItem()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGrid.as:2089]
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/createRow()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\advancedDataGridClasses\AdvancedDataGridBase.as:1920]
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/makeRowsAndColumns()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\advancedDataGridClasses\AdvancedDataGridBase.as:836]
at mx.controls::AdvancedDataGridBaseEx/makeRowsAndColumns()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGridBaseEx.as:2212]
at mx.controls::AdvancedDataGrid/makeRowsAndColumns()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGrid.as:1999]
at mx.controls.listClasses::AdvancedListBase/makeRowsAndColumnsWithExtraRows()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:3994]
at mx.controls.listClasses::AdvancedListBase/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:3566]
at mx.controls::AdvancedDataGridBaseEx/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGridBaseEx.as:2015]
at mx.controls::AdvancedDataGrid/updateDisplayList()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\AdvancedDataGrid.as:2899]
at mx.controls.listClasses::AdvancedListBase/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\datavisualization\src\mx\controls\listClasses\AdvancedListBase.as:3468]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:663]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:736]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]
Any help pls?
Thanks
@AmaliaP
Hi,
Could you check, using the debugger, values of chartWidth and chartHeight in drawMarkers and values of position.x and position.y when calling drawCircle?
I suspect an “initialization” issue leading to width or height being NaN (no defense case in drawMarkers in contrary to drawChart against position values being NaN).
You may also check this post on Flex 4 and error #2004 in DataGrid that seems similar to your issue.
Let me know the results, if my hypothesis is confirmed, I’ll “protect” the drawCircle calls against NaN positions and deliver an update.
I’ve got the latest swc and all the classes in my flex 4 project. here’s the error I get:
ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::Graphics/drawRoundRect()
at flash.display::Graphics/drawCircle()
at com.blogagic.controls::SparklineLineChart/drawMarkers()[Q:\flex_ws\SlateCRM\src\com\blogagic\controls\SparklineLineChart.as:518]
at com.blogagic.controls::SparklineLineChart/drawChart()[Q:\flex_ws\SlateCRM\src\com\blogagic\controls\SparklineLineChart.as:463]
at com.blogagic.controls.sparklineClasses::SparklineChart/updateDisplayList()[Q:\flex_ws\SlateCRM\src\com\blogagic\controls\sparklineClasses\SparklineChart.as:1586]
Here’s my code:
<mx:FormItem label="2005:" paddingLeft="25" width="100%"> <chart:SparklineBarChart dataProvider="{chartData}" x="0" y="0" backgroundColor="0x009900" backgroundAlpha="0.2" yField="data" height="25" width="200"/> </mx:FormItem> <mx:FormItem label="2006:" paddingLeft="25" width="100%"> <chart:SparklineLineChart x="0" y="0" dataProvider="{chartData}" backgroundColor="0xFFFF00" backgroundAlpha="0.2" yField="data" height="15" width="200"/> </mx:FormItem>my dataProvider is just a plain vanilla arrayCollection containing objects of label and data.
Also… i’ve been trying to use the tooltip classes, but when i do it goes into an endless loop and crashes my air app. Any thoughts on that?
I’ve actually not been able to get it to draw any data at all. the background draws fine. here are the key parts of the code [pulled from the various parts of the page]:
xmlns:preloader="com.blogagic.preloader.BlogagicPreloader" xmlns:chart="com.blogagic.controls.*" [Bindable] private var _chartData:ArrayCollection = new ArrayCollection([{label:'J',data:35},{label:'F',data:'48'},{label:'M',data:'78'},{label:'A',data:'50'},{label:'M',data:'65'},{label:'J',data:'22'},{label:'J',data:'63'},{label:'A',data:'70'},{label:'S',data:'57'},{label:'O',data:'32'},{label:'N',data:'64'},{label:'D',data:'29'}]); <chart:SparklineBarChart id="chart1" dataProvider="{_chartData}" backgroundColor="0x009900" valueColor="#FFFFFF" barSpacing="2" toolTip="" backgroundAlpha="0.2" yField="data" height="25" width="200"/>Note: I’ve tried the ‘data’ field in the arrayCollection as both a string and an int. I pasted it here defined as strings.
Is the BlogagicPreloader necessary? What does it do specifically?
I really LOVE your demo pages and dying to use them in my flex app. Please help!!
Matthew
P.S. Just to give you a skills reference: I’ve been a professional developer for 15 years, the last 5 with flex. Plus, I’m adobe certified in both flex 3 and flex 4. I tell you this only so you know I’ve already ruled out any dumb syntax mistakes, or like forgetting to register the swc.
@Matthew Luke
Hi,
I think you’re facing something similar to the above discussion with Amalia!
I thought I had redelivered that “fix” (even if Amalia didn’t confirm whether it worked or not) but it seems I forgot!!
If you want to verify my hypothesis, you should just have to ensure, in the drawMarkers method, that NaN values are correctly ignored when calling drawCircle.
Regarding the preloader, you can safely remove it, it’s just to display my avatar while the swf is downloading
I’ll try to upload this “fix” but I had not been able to reproduce the issue you both faced so I’m not 100% sure that it is really a fix!
I have uploaded my “fix” in all places, so if it was really the source of your issue, it should now be better.
If you’re still facing the same error, it would be good if you could check whether it works better using the 3.5 SDK.
I still have on my TODO list to find (again) some time for my blog and to move to SDK 4!!
In any case, please let me know the results on your side
Thanks
I found a couple of minutes for a few tests since it was worrying me!
So, I confirm that your issues are linked with SDK4, it works much better with SDK 3.5.
As a quick workaround, you have 6 small changes to do
In calls to getStyleDeclaration and setStyleDeclaration, just prefix the style name with its package prefix.
For example, replace:
var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("SparklineBarChart");by:
var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("com.blogagic.controls.SparklineBarChart");This isn’t a perfect solution but it should hopefully unblock you
It seems that I will have to completely change the way I was initializing default styles to make it compatible with Flex 4!
Unfortunately, the trick above doesn’t work anymore if you use SDK 3.5, it would have been too simple. Maybe there’s another way that would allow a common code to work for both SDK’s but I didn’t find it yet. If I find one, I’ll update my code here. If I don’t… I’m not yet sure that I’d like to start managing two different versions
And to remove the warning, it’s even better to use:
var style:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("com.blogagic.controls.SparklineBarChart"); ... FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("com.blogagic.controls.SparklineBarChart", style, true);I am using your sparkline bar chart component. Its not working for this data.
The chart gets drawn only if the y values are different. the only change i did is to add a NaN check in the base class to avoid RTE.
Let me know if anything has to be done. Please reply asap.
attached the code
<mx:ArrayCollection id="staticData"> <mx:Array> <mx:Object label="Obj1" data="1"/> <mx:Object label="Obj2" data="1"/> <mx:Object label="Obj3" data="1"/> <mx:Object label="Obj4" data="1"/> <mx:Object label="Obj5" data="1"/> <mx:Object label="Obj6" data="1"/> <mx:Object label="Obj7" data="1"/> <mx:Object label="Obj9" data="1"/> <mx:Object label="Obj9" data="1"/> <mx:Object label="Obj10" data="1"/> </mx:Array> </mx:ArrayCollection> <ns1:SparklineBarChart dataProvider="{staticData}" showThreshold="true" threshold="0" height="100%" valueColor="0xFF00FF" yField="data" width="100%"> </ns1:SparklineBarChart>I’ll try to find a few hours to check during next week-end.
What exactly would you expect with your dataset?
Did you try forcing the yMin and yMax?
I have system metrics data for 60 seconds to be displayed in a spark line bar chart. at times, the values of all the 60 seconds will be the same say 1. in those scenarios the chart is not getting rendered on screen.
I dint try forcing the ymin and ymax values.
for this scenario, i should get a chart with same column height.
@karthick r
So the easiest is just to set yMinFixed to 0 on your SparklineBarChart.
thanks a lot. its working.
Well done…
Have a look at prototype air app I’m doing with these charts:
http://herbmorris.x10hosting.com/images/screen-capture-1.png
20 charts capturing data in realtime
@Herb Morris
Hey, looks very nice! Glad you found my components useful
Great! The ItemRender so prowerful!!!!
Hi, this is a fantastic library for sparklines. However, I’m finding it difficult to use toolTipFunction feature. When the component is used within an itemRenderer (for dataGrid), unable to set toolTipFunction. Please advice.
@Raj
In the provided example, there is a DataGrid with sparklines AND tool tips; just look at the code