Question

I’ve created a line chart in Flex using LogAxis. Flex draws minor tick marks at the same location as the major tick marks for a Log axis, so I need to manually draw the minor tick marks.

I’m new to Flex, I’ve tried to do this using a CartesianDataCanvas inside backgroundElements in mxml, then using ActionScript to draw lines on the data canvas using moveTo(x1,y1) and lineTo(x2,y2), which draws a line between (x1,y1) and (x2,y2).

The problem with the above method is the tick mark length is a function of the chart area (which depends on the browser window size).

What I need is a method that:

(1) starts at a data coordinate (e.g. moveTo(x1,y1) works fine for this)

(2) draws a line to a screen coordinate (e.g. lineTo(x_screen, y_screen) where x_screen and y_screen are screen coordinates).

Is there anything that can accomplish this in Flex/AS3?

Alternatively, could I use screen coordinates for both steps above? If so, how to convert between screen and data coordinates? For example, is the upper right corner of the screen always a fixed data coordinate that I could reference is creating such a conversion?

Alternatively, could I save a five-pixel line in Illustrator and simply paste that image in the chart somehow? If so, how to paste it exactly at a data coordinate?

Any ideas or comments much appreciated.

Answer 1

I’d suggest you to create your custom axis renderer. Extend AxisRenderer class, override updateDisplayList method. Since all methods responsible for rendering axis are private, just copy them to your class and make needed changes to drawTicks method. But you’ll need to spend some time understanding rendering logic.

Then apply your renderer to your chart.

<mx:LineChart>
    <mx:horizontalAxisRenderers>
        <custom:CustomAxisRenderer/>
    </mx:horizontalAxisRenderers>
</mx:LineChart>