Apex Code Development You need to sign in to do that
Don't have an account?
Rohit2006 create chart series programmatically using Flex 2 Chartting
I want to create n number of series dynamically when i run my application.
where n can be any value it depends on the data which i retrieve from database. below i pasted the example
( in this example i have taken n = 4 i.e., CountMax=4 if i change the CountMax=6 then it should generate 6series dynamically after calculating the values. ). just copy the below code and paste it in Flex builder and run the application.
in this example i am facing problem, chart series are not showing. i dont know the reason why its not showing, if anyone got the solutions for the problem please let me know. my actual requirement is to retrieve data from Salesforce account and want to populate the arraylist then display the chart.
<?xml version="1.0"?>
<!-- Example showing using mx:ChartSeries vs using AS to create chart series programmatically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="drawChart()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.series.ColumnSeries;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
[Bindable]
public var categoryArray:ArrayCollection = new ArrayCollection();
[Bindable]
public var sArray:ArrayCollection = new ArrayCollection();
public function drawChart():void
{
var histMax:int = 25;
var histMin:int = 5;
var countMax:int = 4;
var tmpArr:Array = new Array();
categoryArray.removeAll();
for(var n:int = 0; n < 10; n++)
{
tmpArr[n] = histMin + Math.round((2 * n) / 20 * (histMax - histMin));
categoryArray.addItem({data:tmpArr[n]});
}
var tmpseries:Array = new Array(10);
var cs:ColumnSeries = new ColumnSeries();
columnchart1.series = [cs];
// Add a series to the chart with the x-values and y-values
// from the arrays and set the series type to a column chart
for(var chartSeries:int = 0; chartSeries < countMax; chartSeries++)
{
for(var i:int = 1; i < 10; i++)
{
tmpseries = 3 * Math.random();
}
sArray.addItem({data:tmpseries});
//columnchart1.dataProvider = sArray;
cs = new ColumnSeries();
cs.dataProvider= sArray;
cs.displayName = 'Series';
cs.yField = 'data';
columnchart1.series[chartSeries] = cs;
}
}
]]>
</mx:Script>
<mx:Panel title="Dynamic Series Adding Sample" width="195%" height="90%" layout="absolute">
<mx:ColumnChart id="columnchart1" height="338" width="396" showDataTips="true" type="clustered" x="10" y="0">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{categoryArray}" categoryField="data"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries dataProvider="{sArray}" yField="data" displayName="Series"/>
</mx:series>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
where n can be any value it depends on the data which i retrieve from database. below i pasted the example
( in this example i have taken n = 4 i.e., CountMax=4 if i change the CountMax=6 then it should generate 6series dynamically after calculating the values. ). just copy the below code and paste it in Flex builder and run the application.
in this example i am facing problem, chart series are not showing. i dont know the reason why its not showing, if anyone got the solutions for the problem please let me know. my actual requirement is to retrieve data from Salesforce account and want to populate the arraylist then display the chart.
<?xml version="1.0"?>
<!-- Example showing using mx:ChartSeries vs using AS to create chart series programmatically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="drawChart()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.series.ColumnSeries;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
[Bindable]
public var categoryArray:ArrayCollection = new ArrayCollection();
[Bindable]
public var sArray:ArrayCollection = new ArrayCollection();
public function drawChart():void
{
var histMax:int = 25;
var histMin:int = 5;
var countMax:int = 4;
var tmpArr:Array = new Array();
categoryArray.removeAll();
for(var n:int = 0; n < 10; n++)
{
tmpArr[n] = histMin + Math.round((2 * n) / 20 * (histMax - histMin));
categoryArray.addItem({data:tmpArr[n]});
}
var tmpseries:Array = new Array(10);
var cs:ColumnSeries = new ColumnSeries();
columnchart1.series = [cs];
// Add a series to the chart with the x-values and y-values
// from the arrays and set the series type to a column chart
for(var chartSeries:int = 0; chartSeries < countMax; chartSeries++)
{
for(var i:int = 1; i < 10; i++)
{
tmpseries = 3 * Math.random();
}
sArray.addItem({data:tmpseries});
//columnchart1.dataProvider = sArray;
cs = new ColumnSeries();
cs.dataProvider= sArray;
cs.displayName = 'Series';
cs.yField = 'data';
columnchart1.series[chartSeries] = cs;
}
}
]]>
</mx:Script>
<mx:Panel title="Dynamic Series Adding Sample" width="195%" height="90%" layout="absolute">
<mx:ColumnChart id="columnchart1" height="338" width="396" showDataTips="true" type="clustered" x="10" y="0">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{categoryArray}" categoryField="data"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries dataProvider="{sArray}" yField="data" displayName="Series"/>
</mx:series>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
Thanks in advance