Toni Vega created FLEX-33161:
--------------------------------
Summary: Y axis Scaling problem for chart with two Y axis
Key: FLEX-33161
URL: https://issues.apache.org/jira/browse/FLEX-33161
Project: Apache Flex
Issue Type: Bug
Components: Charts:Multiple Axes
Affects Versions: Adobe Flex SDK 3.5 (Release), Adobe Flex SDK 3.6
(Release), Adobe Flex SDK 4.6 (Release)
Reporter: Toni Vega
Y axis Scaling problem for chart with two Y axis
Hello,
We are trying to create a line chart having two vertical scale .We are creating
the line series, the Vertical axis and the vertical axis renderer at runtime.
The chart has two series with each scale representing the data for one series.
The scale on the left hand side represents the data for series1 and the right
hand side scale represents the data for second series2.
The problem occurs when the series1 has very small data (e.g. 10, 15, and 20)
and the series2 has very large data (e.g. 10000, 15000, and 20000). Then both
the scale shows the same values (i.e. of the series 2
We have also noted that this problem doesn't occur if the series1 has very
large data and series2 has data in smaller units.
Below is the code that we have used
[as]
lnrAxisKpi1 = new LinearAxis();
lnrAxisKpi1.title = KPI1Name;
axisRend = new AxisRenderer();
axisRend.axis =lnrAxisKpi1;
axisRend.placement = "left";
axisRend.titleRenderer = new ClassFactory(customChartTitleRenderer);
lnrAxisKpi1.labelFunction=defineVerticalLabel;
series = new LineSeries();
series.yField = strmList[1].SITE;
series.displayName = strmList[1].SITENAME +"- "+ KPI1Name
series.id = strmList[1].SITE_ID;
series.verticalAxis = lnrAxisKpi1;
lnrAxis = new LinearAxis();
lnrAxis.title = KPI2Name;
axisRend1 = new AxisRenderer();
axisRend1.axis = lnrAxis;
axisRend1.placement = "right";
axisRend1.titleRenderer = new ClassFactor(customChartTitleRenderer);
axisRend.setStyle("verticalAxisTitleAlignment","vertical");
lnrAxis.labelFunction=defineVerticalLabel;
lineChartRoot.verticalAxisRenderers.push(axisRend1);
series = new LineSeries();
series.yField = strmList[i].SITE+"1";
series.displayName = strmList[i].SITENAME +"- "+ KPI2Name;
series.id = strmList[i].SITE_ID;series.verticalAxis = lnrAxis;
[/as]
we have also tried an example we have created a line chart with two vertical
axis renderer at runtime.
the code is as follows
case 1
[as]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute">
<mx:Script><![CDATA[
import mx.events.IndexChangedEvent;
import mx.formatters.DateFormatter;
import mx.controls.Alert;
import mx.graphics.SolidColor;
import mx.charts.events.ChartItemEvent;
import mx.collections.ArrayCollection;
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.LineSeriesItem;
import mx.charts.ChartItem;
import mx.styles.StyleManager;
import mx.utils.ArrayUtil;
import mx.charts.AxisRenderer;
import mx.charts.LineChart;
import mx.charts.series.LineSeries;
private var lnrAxis:LinearAxis;
private var axisRend:AxisRenderer;
[Bindable]
public var DECKER:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", close:15700.59,open:15},
{date:"23-Aug-05", close:16000.3,open:05},
{date:"24-Aug-05", close:15000.71,open:20},
{date:"25-Aug-05", close:15600.88,open:13},
]);
private function createChartSeries():void
{
var Linesrs:Array = new Array();
var series1:LineSeries=new LineSeries();
var series2:LineSeries=new LineSeries();
series1.displayName = "close";
series1.yField="close";
series2.displayName = "open";
series2.yField="open";
myChart.verticalAxisRenderers = [];
lnrAxisKpi1.title = "left";
axisRend = new AxisRenderer();
axisRend.axis = lnrAxisKpi1;
axisRend.placement = "left";
axisRend.axis = lnrAxisKpi1;
series1.verticalAxis = lnrAxisKpi1;
lnrAxis = new LinearAxis();
axisRend = new AxisRenderer();
axisRend.axis = lnrAxis;
lnrAxis.title="righr";
series2.verticalAxis = lnrAxis;
axisRend.placement = "right";
axisRend.setStyle("verticalAxisTitleAlignment","vertical");
myChart.verticalAxisRenderers.push(axisRend);
Linesrs.push( series1 );
Linesrs.push( series2 );
myChart.series = Linesrs;
myChart.dataProvider=DECKER;
}
]]></mx:Script>
<mx:Panel title="Column Chart With Multiple Axes" >
<mx:LineChart id="myChart" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="date"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="lnrAxisKpi1" />
</mx:verticalAxis>
</mx:LineChart>
<mx:Button label="2 Series" click="createChartSeries()"/>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
[/as]
case 2:
when we change the axis
series1.displayName = "open"
series1.yField="open";
series2.displayName = "close";
series2.yField="close";
i.e. when the first series has higher values (i.e. at left hand side) and
second series with lower values (i.e. at right) the resulting scaling is proper
;
but when you interchange the series i.e. series with lower values at left and
higher at right the vertical axis show the same values on both the side s which
are incorrect . Please let us know if there is something wrong in the code that
we are using or if its a bug in the flex sdk.
Also it would be helpful if you could point us to any solutions if available
please find the attach document for more details and screenshots .
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:
https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
