Home >
If you are a Flex developer, and you haven't checked out Degrafa yet, you should. Degrafa is an open source declarative graphics framework for Flex. It allows you to easily create complex shapes, patterns, skins, gradients, strokes, etc... without intimate knowledge of the drawing API. The framework allows you to do some really cool things, without a lot of code. Kudos to the Degrafa team for their efforts.
I decided to try out Degrafa on a concept from one of my Cynergy blog posts: "Thinking Outside Of The Grid", from last May. Datagrids are great for displaying tabular data. With a little creative coding, you can turn them into dynamic charting components. Here's a quick example of what can be done with a Flex datagrid, Degrafa, and some time to kill.
This example doesn't cover the broad range of renderers shown in my previous post, however Degrafa helped make the code for this simple enough for anyone to duplicate.
I used Degrafa to create bar-chart representations of data displayed within a datagrid. Its quite simple actually... I created datagrid item renderers that use degrafa to dynamically draw a rectangle that represents disk usage. The code is pretty simple actually. You just create a fill style, then declare a rectangle that uses the fill. The width of the rectangle is dynamcially calculated based on the available width of the item renderer, and the calculated values. All of the calculation is done within data bindings, thus making the code very simple.
You can view this demo full screen at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/main.html
You can view the source code at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/srcview/index.html
You can download the source code at:
http://www.tricedesigns.com/portfolio/degrafadatagrid/Degrafa Datagrid.zip
<mx:DataGridColumn headerText="Free" dataField="free">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<degrafa:Surface>
<degrafa:fills>
<paint:LinearGradientFill id="greenGradient" angle="90">
<paint:GradientStop alpha="1" color="#00FF00"/>
<paint:GradientStop alpha=".5" color="#333333"/>
</paint:LinearGradientFill>
</degrafa:fills>
<degrafa:GeometryGroup>
<geometry:RoundedRectangle
fill="{greenGradient}"
cornerRadius="0"
width="{ width * ( data.free / data.capacity ) }"
height="{ height }" />
</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<degrafa:Surface>
<degrafa:fills>
<paint:LinearGradientFill id="greenGradient" angle="90">
<paint:GradientStop alpha="1" color="#00FF00"/>
<paint:GradientStop alpha=".5" color="#333333"/>
</paint:LinearGradientFill>
</degrafa:fills>
<degrafa:GeometryGroup>
<geometry:RoundedRectangle
fill="{greenGradient}"
cornerRadius="0"
width="{ width * ( data.free / data.capacity ) }"
height="{ height }" />
</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>




Facebook Application Development
This is really very cool. I had never even thought about using Degrafa for generating visual components for custom charting. I like it!
Update: I just uploaded a new version of the code that puts drop shadows on the degrafa graphics, which really makes them stand out more.
Degrafa has been on my 'to-learn' list for some time. This just moved it up a bit. Thanks!
This is a great example! One thing we've been talking to people about is the possibility of making a Spark Line or Micro-Chart framework ala Edward Tufte:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1
Juan
I think a sparkline framework would actually be pretty easy. I'm in for that... I've got plenty to build off of.
Great example! Are there any plans on supporting 3D shapes? This way it would be fairly easy to develop 3D charting series.
Hi Tom, I don't know about the projected roadmap for Degrafa. You might be able to find more from the Degrafa website.
-Andy
Google Analytics is a web service to help businesses figure out where their visitors come from and how they interact with their sites. Analytics Reporting Suite is an Adobe AIR application that brings Google Analytics to the desktop (see Figure 1). In this article, I'll talk about my experiences on porting the Google Analytics web version to an Adobe AIR application and also tell you something about our plans for the suite's future.
High school home study | High School Classes Online
It's an interesting article as I used the skins for a variety of uses in our GED online test information that we offer for free on our website. Seems to work well but before we can upload the final online GED prep course with this skin, it still needs to go through proofreading.