Degrafa: Declarative Graphics Framework

Degrafa Blog

Get Degrafa Now

Posts Tagged ‘charts’

Custom Charts Using Degrafa

Wednesday, September 17th, 2008

Now that the word is out about the collaboration between Degrafa efforts and Adobe, we’ve been getting plenty of questions regarding the viability of continuing to use Degrafa. People have asked, “Well, with FXG, won’t Degrafa become obsolete?” The answer is no.

Right now we’re finally at a point where we can start moving beyond creating basic shapes, fills, etc. and moving into a realm of really powerful stuff, all of which we’re hoping will extend FXG. With inspiration coming from things like Processing, we’re really focussing on allowing people to do some typically difficult things very easy.

We’ve discussed how you might use Degrafa for various types of data visualization, but with things we’re implementing in Beta 3 you’ll be able to completely change the way you think about charting in Flex. Some people are already taking advantage of the in progress version of Beta 3 to do some really great stuff.

Joe Johnston of Universal Mind created a slick looking chart that mirrors the look you might find on the Nike+ site. Doesn’t look like a typical Flex Charting component does it?

If you were at 360|Flex you may have seen Tom Gonzalez present some of his latest works that use Degrafa. He’s contributed a lot to opening up new possibilities for Degrafa in the data visualization arena. Below is his Google Finance “dashboard” that uses Degrafa for charting, complete with “micro-charts” created using the newly revamped Geometry Repeaters.

Ryan Campbell has also taken a liking to the new Geometry Repeaters and what is possible just using Property Modifiers with them. He combined Degrafa and OpenFlux to create what he’s calling FluxCharts. Definitely cool.

It’s really great to see people start jumping into the next release of Degrafa when it’s still a work in progress. Even better, all these samples have source available.

Degrafa Beta 3 Preview: VectorFill

Monday, August 4th, 2008

The focus of Degrafa beta 1 and 2 was to set up a solid core that would allow us to do really innovative things and make really complex things easy to do. We’re also chipping away at the need to have any external graphics referenced in your project. A new feature in Degrafa Beta 3 gets us even closer to meeting these goals.

This new feature is a new Fill type called VectorFill that is going to change the way you think about what’s possible visually in your applications. VectorFill allows you to compose any Degrafa geometry together and use it as a Fill for any other Degrafa geometry. As a simple example, imagine you wanted a background of diagonal lines. To achieve this with VectorFill all you need to do is draw one diagonal line using Degrafa, specify that Line as a source in a VectorFill, then apply that VectorFill to a Degrafa geometry object using the fill property.

Just like any other Degrafa object, you could edit that diagonal line, say change a color, and that change will dynamically get updated in the applied VectorFill. Also, when we say you can compose any Degrafa geometry together we mean shapes, transforms, fills, repeaters, strokes, and so on. You could move shapes with in VectorFill to create panning or use VectorFill with the Flex charting components to make really rich visuals. The possibilities are endless.

We’ve also added additional properties to VectorFill to allow for even more powerful ease of use. You get all the BitmapFill goodness of repeat, scale and angle etc. You also get the recently revealed fill transform features as well. And you also get filters, autosettings, background SolidFill and the ability to clip the fill source geometry based on a third geometry object (or even part of composition). Let’s take a look at some samples.

Below is an example of a VectorFill being used in a Circle. As you move your cursor over the eagle a zoomed view is shown. If you use your mouse wheel you can zoom in and out. This is not a mask, but a VectorFill with a clipSource setting (assigned to the magnifier’s lens) moving around and scaling in the Circle. To show a possible use, a second fill, a BitmapFill is used to take ’snapshots’.

Another example is using VectorFill to customize charting components. The example below uses a VectorFill to represent visually the sport for which the data pertains to. This opens a lot of doors for really custom-looking data visualization using existing charting components.

A more simple example is based on the scenario I outlined above; a diagonal line background. Most examples I’ve seen that use Degrafa always have one bitmap graphic in there for some kind of background. Well, now you can go completely vector. Below is a diagonal line background that uses a VectorFill and a Degrafa Line applied to a Rectangle. I’ve thrown in some other controls so you can see the live updates on the VectorFill.

We’re really excited about what will now be possible with this new VectorFill and some of the other new features we’ll be sharing soon.