Flex: Dashed legend marker (bonus: dashed line)

A known fact it is that Flex doesn’t have dashed line ability built in.
So what would you do if you need to make a dashed line chart? Easy – go to the source.
Ely Greenfield is the Adobe Flex engineer behind the charts (from the days of Flex 1.5), He is the master, and he wrote this dashed line renderer which you can get from this article on his blog (published on 2006?! Has it really been so long?). his code is a piece of art, much respect.

Now that you have a dashed line in your chart’s LineSeries another problem arise: how the hell do I make a dashed legend marker to go with that fancy dashed series?
Why would I want it at all? Example from real life: I have a chart that combines columns and lines, the columns could be red and one of the line series is a dashed red. So in the chart’s legend I get 2 identical red markers.
The legend marker must go dashed as well!

Making your own legend marker is pretty easy – subclass ‘ProgrammaticSkin’ implement ‘IDataRenderer’ and use it as ‘legendMarkerRenderer’ in your series.
Now for the weird and tricky stuff.
If you’ll use your own legend marker you’ll probably notice that no matter what’s your legend’s markerWidth/markerHeight your own marker size would always be a square inside those measures. Meaning if you set your legend marker to be 200×35 your marker will be 35×35! Damn! I want to draw my marker all over the 200×35!

The reason for this is a weird hardcoded value that is set in the ‘LineSeries’ class (mx.charts.series.LineSeries). look at the ‘legendData’ getter in this class, search for “…aspectRatio = 1″.
From ASDoc > LegendData > aspectRatio :”Determines the size and placement of the legend marker. If set, the LegendItem ensures that the marker’s width and height match this value. If unset (NaN), the legend item chooses an appropriate default width and height.”
So what happens is that inside that ‘legendData’ getter whenever the ‘legendMarkerRenderer’ is other then the default they set the aspectRatio to 1… why oh why??

The solution: subclass LineSeries, override this getter and set aspectRatio to NaN.

Demo is here (right click for source)
Source is here

code is Flex 3, comments are most welcomed.


10 Responses to Flex: Dashed legend marker (bonus: dashed line)

  1. Hello, I’m having trying to use the DashedLineRenderer to draw dashed lines to a LineChart generated from ActionScript, but I can’t seem to get it to work. My code looks like this:

    var lineChart:LineChart = new LineChart();

    var tempLineSeries:LineSeries = new LineSeries();

    var dlr:DashedLineRenderer = new DashedLineRenderer();
    dlr.pattern = [5,2];
    tempLineSeries.setStyle(“lineSegmentRenderer”, dlr);
    lineChart.series = [tempLineSeries];

    I get this weird error:

    TypeError: Error #1034: Type Coercion failed: cannot convert myutils.charts::DashedLineRenderer@a5b7101 to mx.core.IFactory.

    Any idea what I’m doing wrong here? I’m using a regular LineSeries and not MyLineSeries, could that be the problem? Any help is appreciated.

  2. Jonathan Jarvis says:

    I figured it out, but it might be helpful for others who aren’t flash experts like myself:

    var cf:ClassFactory = new ClassFactory(myutils.charts.DashedLineRenderer);
    cf.properties = { pattern: [10] };
    tempLineSeries.setStyle(“lineSegmentRenderer”, cf);

  3. Andy Ghosh says:

    Thanks very much for saving me a few sleepless nights!

  4. PR says:

    For those mashing around trying to get dashed lines, I found 3 things helpful: 1) This post. 2) The following blog entry (not mine): shemesh.axspacecom/charts_dashedLegendMarker/ and 3) JONATHAN’S COMMENT ABOVE!!! Thanks Jonathan-you ended 3 hours of frustration.

  5. Gilbert says:

    shemesh and Jonathan,

    Thanks for posting this. It saved me tons of time.

  6. Ronnie says:

    Hi Shemesh,
    Isn’t it possible in flex 2????

  7. shemesh says:

    Ronnie, i really don’t know.
    u’ll have to figure it out yourself.

  8. Tone says:

    Hi Shenmesh,

    This works like a charm, thanks. Quick question, how can I change the form style of the line to step?


  9. Tone says:

    Hey Shemesh,

    any ideas on how to change the form style?


  10. Tony says:

    Hey Shemesh,

    Thanks for the wonderful post. I want to draw dashed lines, but it should be like a curve..iam using form=”curve” on my linechart…all lines come as curves…bt the line with this renderer is coming as Line. Is there any way..this takes in the form of the line chart.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: