Hi All,
I createda column chart having serieses in column set and this colun set is mapped to a custom vertical axis.
Issue:- This custom vetical axis only show the default value from 0 to 100 instead of its own min max value.
The sample code are given below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.charts.AxisRenderer;
import mx.charts.ColumnChart;
import mx.charts.LinearAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.series.ColumnSet;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:10, close:41.87, open: 30},
{date:20, close:45.74, open: 40},
{date:30, close:42.77, open: 60},
{date:40, close:48.06, open: 50}]);
[Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:10, close:157.59},
{date:20, close:160.3},
{date:30, close:150.71},
{date:40, close:156.88},]);
private var myChart:ColumnChart = new ColumnChart();
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// VERTICAL AXIS
var verticalAxisLeft:LinearAxis = new LinearAxis();
var verticalAxisRight:LinearAxis = new LinearAxis();
var verticalAxisRendererLeft:AxisRenderer = new AxisRenderer();
var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();
verticalAxisRendererLeft.axis = verticalAxisLeft;
verticalAxisRendererLeft.placement = 'left';
verticalAxisRendererRight.axis = verticalAxisRight;
verticalAxisRendererRight.placement = 'right';
// SERIES
var newSeries:Array = new Array();
var columnset:ColumnSet = new ColumnSet();
columnset.type = 'stacked';
var columnSeries:ColumnSeries = new ColumnSeries();
columnSeries.dataProvider = SMITH;
columnSeries.yField = "close";
columnSeries.displayName = "SMITH_close";
columnset.series.push(columnSeries);
var columnSeries1:ColumnSeries = new ColumnSeries();
columnSeries1.dataProvider = SMITH;
columnSeries1.yField = "open";
columnSeries1.displayName = "SMITH_open";
columnset.series.push(columnSeries1);
columnset.verticalAxis = verticalAxisLeft;
newSeries.push(columnset);
var lineSeries:LineSeries = new LineSeries();
lineSeries.dataProvider = DECKER;
lineSeries.yField = "close";
lineSeries.verticalAxis = verticalAxisRight;
lineSeries.displayName = "DECKER";
newSeries.push(lineSeries);
myChart.verticalAxisRenderers = [verticalAxisRendererLeft,verticalAxisRendererRight];
myChart.series = newSeries;
myChart.showDataTips = true;
chartContainer.addChildAt(myChart, 0);
}
]]>
</mx:Script>
<mx:Panel id="chartContainer" title="Column Chart With Multiple Axes">
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
Thanks in advance
Not sure, but it could be
private var myChart:ColumnChart = new ColumnChart();
is missing a bindable
[Bindable] private var myChart:ColumnChart = new ColumnChart();
Is this what it is supposed to look like?
Okay, re-reading your statement. Are you saying it shouldn't show anything over the "60" value on the left? Because I think it is just showing the other values to correspond with one of the Arrays? That's because you haven't sent a minimum or maximum value.
var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();
verticalAxisRendererLeft.axis = verticalAxisLeft;
verticalAxisRendererLeft.placement = 'left';
verticalAxisLeft.minimum = 0;
verticalAxisLeft.maximum = 60;
Here is some code that gets the minimum and maximum from the array, so you can set those values. But, obviously, it sets the bottom value to the smallest number and not 0, but that's up to you.
I created two functions. One gets the Maximum value from an array and the other gets the Minimum. The second asks for a Maximum value, so that it can find values smaller than that.
private function findMax(sourceArray:Array, sourceValue:String):Number {
var maxNumber:Number = 0;
for (var i:int = 0; i < sourceArray.length; i++) {
var tmpNum:Number = new Number((sourceArray[i][sourceValue]).toString());
if(tmpNum > maxNumber) {
maxNumber = sourceArray[i][sourceValue];
}
}
return maxNumber;
}
private function findMin(sourceArray:Array, sourceValue:String, startMax:Number):Number {
var minNumber:Number = startMax;
for (var i:int = 0; i < sourceArray.length; i++) {
var tmpNum:Number = new Number((sourceArray[i][sourceValue]).toString());
if(tmpNum < minNumber) {
minNumber = sourceArray[i][sourceValue];
}
}
return minNumber;
}
Then when you create the LinearAxis, you can call the functions to set the minimum and maximum.
var verticalAxisLeft:LinearAxis = new LinearAxis();
verticalAxisLeft.autoAdjust = true;
verticalAxisLeft.maximum = Math.ceil(findMax(SMITH.source, "open"));
verticalAxisLeft.minimum = Math.ceil(findMin(SMITH.source, "open", verticalAxisLeft.maximum));
var verticalAxisRight:LinearAxis = new LinearAxis();
verticalAxisRight.autoAdjust = true;
verticalAxisRight.maximum = Math.ceil(findMax(DECKER.source, "close"));
verticalAxisRight.minimum = Math.ceil(findMin(DECKER.source, "close", verticalAxisRight.maximum));
Note that the verticalAxisRight minimum probably should be set to 0 or the same as the verticalAxisLeft or it won't draw correctly.
i.e.
Hi DeanLoganBH,
Thanks for ur answare however my problem is littlebit different. According to u if i set the min and max value manually the axis value units are showing perfectly but the column draw region are not in properly. please have a look to the attached screen shot of the chat and the sample code as well.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.charts.AxisRenderer;
import mx.charts.ColumnChart;
import mx.charts.LinearAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.series.ColumnSet;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:10, close:41.87, open: 30},
{date:20, close:45.74, open: 40},
{date:30, close:42.77, open: 60},
{date:40, close:48.06, open: 50}]);
[Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:10, close:157.59},
{date:20, close:160.3},
{date:30, close:150.71},
{date:40, close:156.88},]);
private var myChart:ColumnChart = new ColumnChart();
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// VERTICAL AXIS
var verticalAxisLeft:LinearAxis = new LinearAxis();
verticalAxisLeft.autoAdjust = true;
verticalAxisLeft.minimum = 0;
verticalAxisLeft.maximum = 120;
var verticalAxisRight:LinearAxis = new LinearAxis();
var verticalAxisRendererLeft:AxisRenderer = new AxisRenderer();
var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();
verticalAxisRendererLeft.axis = verticalAxisLeft;
verticalAxisRendererLeft.placement = 'left';
verticalAxisRendererRight.axis = verticalAxisRight;
verticalAxisRendererRight.placement = 'right';
// SERIES
var newSeries:Array = new Array();
var columnset:ColumnSet = new ColumnSet();
columnset.type = 'stacked';
var columnSeries:ColumnSeries = new ColumnSeries();
columnSeries.dataProvider = SMITH;
columnSeries.yField = "close";
columnSeries.displayName = "SMITH_close";
columnset.series.push(columnSeries);
var columnSeries1:ColumnSeries = new ColumnSeries();
columnSeries1.dataProvider = SMITH;
columnSeries1.yField = "open";
columnSeries1.displayName = "SMITH_open";
columnset.series.push(columnSeries1);
columnset.verticalAxis = verticalAxisLeft;
newSeries.push(columnset);
var lineSeries:LineSeries = new LineSeries();
lineSeries.dataProvider = DECKER;
lineSeries.yField = "close";
lineSeries.verticalAxis = verticalAxisRight;
lineSeries.displayName = "DECKER";
newSeries.push(lineSeries);
myChart.verticalAxisRenderers = [verticalAxisRendererLeft,verticalAxisRendererRight];
myChart.series = newSeries;
myChart.showDataTips = true;
chartContainer.addChildAt(myChart, 0);
}
]]>
</mx:Script>
<mx:Panel id="chartContainer" title="Column Chart With Multiple Axes">
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
In the above image the tooltip display Smith_Close value is 41.87 however it's pillar vertical axis maped with value nearly 28. and the total value is 71 but it map with below 50 in vertical axis. which seems visually inconsistent.
Problem:- why the column set is not calculate min and max value automatically and scale the colums appropiatly in case of custom axisrenderer however it is working fine default axis rendere.
Again the calculation of min max is little bit complex when my column set is containing more serieses and thereir value is varies in negative and positive side.
DeanLoganBH, if is there any point is not understandable please let me know..
Thanks in advance
I descontructed the example by creating the items in the group and I think the isses is how yo are adding the series to the chart.
Instead of trying to push an array, just set the columnSet to the values as an array
// add column series to column set
columnset.series = [columnSeries1, columnSeries2];
Then when you add the columnSet and line Series to the chart, do the same.
myChart.series = [columnset, lineSeries];
I have modified one of my other charts that creates data dynamically as an example.
The View Source is available, so you can look it over to see what I did.
North America
Europe, Middle East and Africa
Asia Pacific