R – Aligning Multiple Charts in Flex Charting

actionscriptapache-flexchartsflex-charting

I have multiple line charts in Flex Charting (3.x). The charts (and number of charts) are being dynamically generated, and are either of "type A" or "type B." The type of data on the Y-axis is different for type A then it is for type B. The x-axis is time.

Each chart is placed in its own VBox (with a few other things) that make up a larger canvas of the Type A or Type B. This VBox is given an absolute X position.

It is very high priority that the different charts line up, so that comparisons (in time) can be made.

What ends up happening is that the vertical axis for some charts takes up more width then others, so the charts are no longer aligned in time.

I have tried playing the VerticalAxisRenderers/AxisRenderer width, but that had no effect.

Any advice would be greatly appreciated.

Best Answer

You can try to set the same gutter left for the both charts. That might help. I had a similar issues, but haven't figured a better answer yet.

Related Solutions

R – Flex: How to add horizontal axes to a chart

I think you'll get better results by instantiating your chart as a proper type.

For example, in a component I have a skeleton lineChart setup in the mxml...

<mx:LineChart id="lineChart" dataProvider="{chartData}" dataTipFunction="dataTipFunction"
    width="100%"
    height="100%"
    showDataTips="true"
    />

... but you could create it as a variable and add it to the container. Then for the axis I determine the type I want and create and apply them, here's some code I use for the horizontal axis...

// Setup new horizontal axis.
switch (hAxisFieldsComboBox.selectedItem.dataType)
{
    case "Date":
        var hDtAxis:DateTimeAxis = new DateTimeAxis();
        hDtAxis.title = hAxisFieldsComboBox.selectedItem.label;
        hDtAxis.dataUnits = "days";
        hDtAxis.dataInterval = 1;
        hDtAxis.parseFunction = dateParser;
        lineChart.horizontalAxis = hDtAxis;
        break;
    case "Time":
        var hTAxis:DateTimeAxis = new DateTimeAxis();
        hTAxis.title = hAxisFieldsComboBox.selectedItem.label;
        hTAxis.dataInterval = 1;
        hTAxis.parseFunction = timeParser;
        lineChart.horizontalAxis = hTAxis;
        break;
    case "Number":
        var hLAxis:LinearAxis = new LinearAxis();
        hLAxis.title = hAxisFieldsComboBox.selectedItem.label;
        hLAxis.interval = 1;
        hLAxis.minimum = 0;
        lineChart.horizontalAxis = hLAxis;
        break;
    default:
        var hCatAxis:CategoryAxis = new CategoryAxis();
        hCatAxis.title = hAxisFieldsComboBox.selectedItem.label;
        hCatAxis.dataProvider = schemaUtil.aggregateAndSortCasesAC(chartData, vAxisFieldsComboBox.selectedItem.data, [hAxisFieldsComboBox.selectedItem.data]);
        hCatAxis.categoryField = hAxisFieldsComboBox.selectedItem.data;
        lineChart.horizontalAxis = hCatAxis;
}

Hope that helps.

Best Answer

Related Solutions

R – Flex: How to add horizontal axes to a chart

Related Topic