Help in Binding list to Flex chart Axis.

Hi!
I am doing chart binding in flex. I have a list with Data. I want to separately bind the Y-Axis of chart and then plot line series according to the data in the list.
Moreover I want to change the background color and border of Data Tip in Flex Chart.
Regards,
Nazzal.

See here:
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_08.html
There's stuff on data and on customised datatips...

Similar Messages

Flex 3 to Flex 4 migration issue (Flex charting and Special char)

Hi All,
I have migrated Flex 3 to Flex 4 and in Flex charting axis label, I am not able to see less then sign ( < ). I tried to use < but it's not working, I have attached sample code.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                minWidth="955" minHeight="600" initialize="init()">
     <fx:Declarations>
         <s:SolidColor id="s1" color="#738994"/>
         <mx:SeriesInterpolate id="seriesInterpolate" duration="800"/>
         <mx:SeriesSlide id="seriesSlide" duration="800" direction="up"/>
         <mx:SeriesZoom id="seriesZoom"
                        duration="1000"
                        minimumElementDuration="50"
                        elementOffset="50"
                        verticalFocus="top"
                        horizontalFocus="left"
                        relativeTo="chart"/>
     </fx:Declarations>
     <fx:Script>
        <![CDATA[
             import mx.collections.ArrayCollection;
             [Bindable]
             public var student:ArrayCollection = new ArrayCollection([
                 {Stream: "Management", Girls:1000, Boys:1400, TotalStudent:2400},
                 {Stream: "<Computer Science", Girls:800, Boys:1200, TotalStudent:2000},
                 {Stream: "< Mechanical", Girls:200, Boys:1500, TotalStudent:1700},
                 {Stream: "> Electical", Girls:800, Boys:850, TotalStudent:1650},
                 {Stream: "Electronics", Girls:500, Boys:1000, TotalStudent:1500},
                 {Stream: "Civil", Girls:300, Boys:900, TotalStudent:1200}
             private function update():void {
                 var str:String = catfDP.selectedItem.data;
                 if(str == "Girls"){
                     cs1.yField = str;
                     cs1.displayName = str;
                     cs1.setStyle("fill" , "738994");
                 }else if(str == "Boys"){
                     cs1.yField = str;
                     cs1.displayName = str;
                     cs1.setStyle("fill" , "999990");
                 }else{
                     cs1.yField = str;
                     cs1.displayName = str;
                     cs1.setStyle("fill" , "406374");
             private function init():void{
                 catfDP.selectedIndex= 0;
                 effectDP.selectedIndex= 0;
         ]]>
     </fx:Script>
     <s:Panel title="Chart Effect Example" width="627" height="565">
         <s:layout>
             <s:VerticalLayout/>
         </s:layout>
         <mx:ApplicationControlBar dock="true" width="625" height="82">
             <mx:Form>
                 <mx:FormItem label="Category Field:">
                     <s:DropDownList id="catfDP" change="update();" prompt="--Select--" width="136"
                                     height="19">
                         <s:dataProvider>
                             <mx:ArrayList>
                                 <fx:Object data="Girls" label="Girls" />
                                 <fx:Object data="Boys" label="Boys" />
                                 <fx:Object data="TotalStudent" label="TotalStudent" />
                             </mx:ArrayList>
                         </s:dataProvider>
                     </s:DropDownList>
                 </mx:FormItem>
                 <mx:FormItem label="Choose Chart Effect:">
                     <s:DropDownList id="effectDP" change="update();" width="136" prompt="--Select--">
                         <s:dataProvider>
                             <mx:ArrayList>
                                 <fx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
                                 <fx:Object label="seriesSlide" data="{seriesSlide}" />
                                 <fx:Object label="seriesZoom" data="{seriesZoom}" />
                             </mx:ArrayList>
                         </s:dataProvider>
                     </s:DropDownList>
                 </mx:FormItem>
             </mx:Form>
         </mx:ApplicationControlBar>
         <mx:ColumnChart id="cchart"
                         dataProvider="{student}"
                         showDataTips="true"
                         width="621"
                         fontFamily="verdana" height="402">
             <mx:verticalAxis>
                 <mx:LinearAxis title="Number of Students" />
             </mx:verticalAxis>
             <mx:horizontalAxis>
                 <mx:CategoryAxis dataProvider="{student}"
                                  categoryField="Stream"
                                  title="Stream"/>
             </mx:horizontalAxis>
             <mx:series>
                 <mx:ColumnSeries id="cs1"
                                  xField="Stream"
                                  yField="Girls"
                                  displayName="Girls"
                                  fill="{s1}"
                                  showDataEffect="{effectDP.selectedItem.data}"/>
             </mx:series>
         </mx:ColumnChart>
         <s:HGroup>
             <mx:Legend dataProvider="{cchart}"
                        direction="horizontal"/>
             <s:VGroup>
             </s:VGroup>
         </s:HGroup>
     </s:Panel>
</s:Application>

Thank you very much for you answer.
I have solved this problem using Itemrenderer.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">
    <mx:Label htmlText="{data.text}"/>
</s:ItemRenderer>
and in chart I have used labelRenderer. in label I have used < for ( < ) sign.
<mx:horizontalAxis>
                <mx:CategoryAxis
                    dataProvider="{expenses}"
                    categoryField="Month"
                    title="FY 2006"
                    id="a1"
                    />
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer labelRotation="45" axis="{a1}" labelRenderer="chase.BarChartLabelRenderer"/>
            </mx:horizontalAxisRenderers>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer labelRotation="45" axis="{a1}" labelRenderer="chase.BarChartLabelRenderer"/>
            </mx:verticalAxisRenderers>

Digital Publishing Suite Help | Supported feature list

This question was posted in response to the following article: http://helpx.adobe.com/digital-publishing-suite/help/supported-feature-list.html

Has this chart been updated for V27?

Flex chart x-axis data spacing

hello
i am using flex chart line series and column series. i want
to display 100 data points, with different dates along the x-axis,
but i don't want all 100 points to be displayed at the same time as
the x-axis dates will not be readable. i want to have a fixed space
between each x-axis point and the user then scrolls along the
chart.
i read the API but do not see any way to add the x-axis
spacing?
also how i do put more data information, with each data point
if a mouse if placed over it, not just the X & Y data points.
thank you for any assistance.
Tony

thanks so much,
The tip data solved my 2nd problem.
Thanks for your suggestions to"
i am using flex chart line series and column series. i want
to display 100 data points, with different dates along the x-axis,
but i don't want all 100 points to be displayed at the same time as
the x-axis dates will not be readable. i want to have a fixed space
between each x-axis point and the user then scrolls along the
chart.
i read the API but do not see any way to add the x-axis
spacing?
you mentioned about using min/max values on the x-axis. That
is a good solution except i would then need to add buttons to say
,show the next 30 days.
I really want to to show 90days of data data, with say 30
days appearing at once, and the user just scrolls to see the rest
of the days data without having to press buttons for more data. Any
idea how i can do this?
thanks
Anthony

Flex chart how to put distance between x-axis data

hello
i am using flex chart line series and column series. i want
to display 100 data points, with different dates along the x-axis,
but i don't want all 100 points to be displayed at the same time as
the x-axis dates will not be readable. i want to have a fixed space
between each x-axis point and the user then scrolls along the
chart.
i read the API but do not see any way to add the x-axis
spacing?
thank you for any assistance.
Tony

I don't know what you mean then.
If you set the min and max to be a certain number of days
apart then you know the dates within those days will be displayed.
That combined with the width of the chart will define how much
space there is between x-axis points.

Flex chart x-axis spacing between data

hello
i am using flex chart line series and column series. i want
to display 100 data points, with different dates along the x-axis,
but i don't want all 100 points to be displayed at the same time as
the x-axis dates will not be readable. i want to have a fixed space
between each x-axis point and the user then scrolls along the
chart.
i read the API but do not see any way to add the x-axis
spacing?
also how i do put more data information, with each data point
if a mouse if placed over it, not just the X & Y data points.
thank you for any assistance.
Tony

thanks so much,
The tip data solved my 2nd problem.
Thanks for your suggestions to"
i am using flex chart line series and column series. i want
to display 100 data points, with different dates along the x-axis,
but i don't want all 100 points to be displayed at the same time as
the x-axis dates will not be readable. i want to have a fixed space
between each x-axis point and the user then scrolls along the
chart.
i read the API but do not see any way to add the x-axis
spacing?
you mentioned about using min/max values on the x-axis. That
is a good solution except i would then need to add buttons to say
,show the next 30 days.
I really want to to show 90days of data data, with say 30
days appearing at once, and the user just scrolls to see the rest
of the days data without having to press buttons for more data. Any
idea how i can do this?
thanks
Anthony

Urgent: Chart Axis with Min, Max, Help needed.

Hi guys,
I am rushing on a report submodule in our application, which will go on live in a short time. We need to have charts which use min and max value from the table and calculate the appropriate interval as the scale of the axis, instead of the default interval.
I also tried to put page items into the Min&Max in the chart attributes, but always got the error message that asks for a number.
I have searched the forum and the conclusion I can made now, is that HTMLDB does not support parameterized value for chart axis.
So, my question is: if I have to do it manually, how should I do it? I don't have much experiences in pl/sql, so really need some help here.
Any input is appreciated.

Does anybody know whether a chart can be built on a collection? I've tried but didn't succeed.
If somebody has experiences on this, please let me know, so I won't waste more time on trying it if the answer is no. Thanks.

Flex 2.0.1 SDK Hotfix 1 breaking Flex Charting?

Hi all,
I applied the Flex SDK 2.0.1 Hotfix 1 listed in
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=kb401224
to my Eclipse Flex Plugin environment with SDK 2.0.1. Unfortunately
this seems to have broken flex charting with the following
compilation errors in my project: Unable to resolve a class for
ResourceBundle: charts.
Now the SDK doesn't have the charts.swc file, so I tried
copying over the charts.swc from my old SDK folder to the
frameworks\libs folder under the new hotfixed SDK. This doesn't
seem to fix the error however. It makes sense as charting it a
separate component but maybe there is an upgraded chart version as
well to work with the hotfixed SDK?
Can anyone provide any guidance here, we are in dire
straights. Any help is greatly appreciated!
Regards,
Jason

Nope, doesn't say anthing about that
To update the Flex Builder 2 Eclipse plug-in on Windows:
1. Read the Flex Builder 2 Release Notes for any
late-breaking information, updates, and known issues.
2. Download the Flex Builder 2.0.1 Update Installer for
Windows from the Adobe Flex Support Center.
3. Open or double-click the installer executable file.
4. Accept the license agreement and follow the prompts.
5. If the installer detects multiple installations of Flex
Builder 2, it prompts you for the location to be updated.
6. Select which Flash Player 9 browser plug-in to install:
* Internet Explorer
* Netscape or Firefox
Note: Flex Builder 2.0.1 and Flex SDK 2.0.1 can run with the
base version of Flash Player 9 (Version: 9,0,16,0 dated 6/27/07).
However, it's best to install the Flash Player 9 Update.
7. (Optional) When the installation finishes, restart your
computer to ensure that the updated Flash Player browser plug-in is
enabled.
8. Start Flex Builder.

Flex Chart -- Why is it so buggy and not getting fixed

Hi
We are trying to replace our realtime dashborad with flex
3.x charts. We're getting hit with numereous memory issues such as
http://bugs.adobe.com/jira/browse/FLEXDMV-1686
http://bugs.adobe.com/jira/browse/SDK-15710
Bugs have been filed since April and no updates from Adobe at
all.
At the current state Flex chart is only good for displaying
static data that doesn't change.
Why is this not in flex's high priority list given the fact
that one of the major allure of flex (besides multi-media of
course) right now is charting on the client to off load server
load?
Why is the flex charting group so unresponsive to bugs filed
given the fact that people are shedding quite a bit of mulla to get
this functionality??

I'm attaching here the section from sdk-15710 (flex jira)
where numerous people have been asking for the availability of this
bug fix which have gone unanswered.
Hoping someone from adobe will have some answers.
eddie berman - [10/03/08 12:55 PM ]
We're in need of this fix as well. Can you give some
indication as to when it might be ready for consumption, or if it
already is how we might be able to get it? (Also any comment on
FLEXDMV-1882 would be appreciated as well). Thanks.
[ Show » ]
eddie berman - [10/03/08 12:55 PM ] We're in need of this fix
as well. Can you give some indication as to when it might be ready
for consumption, or if it already is how we might be able to get
it? (Also any comment on FLEXDMV-1882 would be appreciated as
well). Thanks.
[ Permlink | « Hide ]
kai mai - [10/22/08 06:11 PM ]
any update on when this fix will go out and how we can help
test this fix?
[ Show » ]
kai mai - [10/22/08 06:11 PM ] any update on when this fix
will go out and how we can help test this fix?
[ Permlink | « Hide ]
Alan Carwile - [11/07/08 07:20 PM ]
On the Adobe site, there are two bugs that seem to be the
cause of the memory leak we are seeing when using the Flex Charting
package with 3.0 Flex, running on Windows XP Pro SP2. Both are
recorded as Fixed, and one is also noted as Closed. Still we are
seeing what looks like one or both of these bugs.
Adobe Flex community: How do we verify for certain that we
are running versions of Flex containing these fixes? What version
has fixes for both cases? How do we make sure?
Please provide more information in the JIRA issues for both
bugs. Obviously these are of interest to the developer community,
given the follow-up posts and the number of Voters and Watchers.
Thanks,
Alan Carwile, Omneon, Inc. [email protected]
http://bugs.adobe.com/jira/browse/SDK-15710
Flex SDK
Memory Leak in Charting
Fixed, Closed
Votes: 12
Watchers: 19
http://bugs.adobe.com/jira/browse/FLEXDMV-1772
Flex Data Visualization Components
ARLabelData class in AxisRenderer.as is causing memory leak
with every new update of dataProvider in ColumnChart
Fixed, Resolved
Votes: 1
Watchers: 1

Three data sets in a single Flex chart?

Hello everyone;
I've successfully integrated two data sets into a single Flex
chart; now I'm wondering how to bring in another one. Here's an
example of what I'd want to do. Say I wanted to chart average
lifespan and average household income by US State. So I'm imagining
each state could be represented by a pair of bar charts - one
representing lifespan and using the left y axis and one
representing income and using the right y axis. The third component
would be the state, which the user should be able to display or
hide. I'm imagining states being represented by color and a label
on the x axis, and user controls to display more or fewer years.
Any change I could actually pull this off?
Thanks for any help.

I'm not entirely certain where the conflict from adding
States would appear, but I'm a little unclear on your data model.
Have you considered putting all the information into a single data
set? I would suggest filling an Array Collection with a class like
this:
public class infoHolder
public var lifespan:int;
public var salary:int;
public var stateName:string;
Then you can simply fill your chart like this:

Save flex chart to server

Hello All
I am in need of your help in saving a flex chart on to the server. Basically I want to export the chart to excel, as I dont find any resource for Flash builder 4, SDK 3.5, I opted the option of 1. saving chart as image to server and 2. accessing that image file in my excel
Any sample codes should be very helpful, as this is quite urgent. Thanks!

The problem was, that it is not possible to see the pdf directly from transaction AL11.
I used the transaction CG3Y to move the file from the server to my desktop, and there I can see the pdf file.
Solved
Thanks for the input.

Not able to get ADF select many checkbox working with binding lists

Hi,
I have 2binding lists: list A that holds the selected choices and list B for all the choices. When the user opens the page, a list of checkbox should be displayed all the choices from list B with the saved ones pre-checked from list A. When the user changes the selection, the binding list A should be updated.
I tried to use ADF select many checkbox but could not get it working for this.
There are 2 big issues:
1, can get all the choices from binding list B displayed but not able to pre-check the ones from list A.
2, when the selection changed, not able to updated list A with the new choices
I find some sample but it is talking about saving the selected choices into the managed bean not into binding object and using valueChangeListener. How to implement this in ADF? Please help.
Thanks,
Helen

Helen,
I don't think you can do this with a select many checkbox. This component works on one list whereas you want to handle two. You may archive this if you use a managed bean and handle all the list manipulation in java.
Your use case more looks like a select many shuffle (http://docs.oracle.com/cd/E18196_01/11.1.2.0.0/lovs.html).
Timo

Copy and Paste Flex chart to Word Document

Hi , I'm a newbie to Flex and was wondering if anyone knows
if it possible to use the right click button on the mouse to copy
and paste a Flex chart to a Word Document? Any help would be
greatly appreciated.
thanks

Hi,
Simply let a IE or FireFox window display your Flex chart,
and hold [Alt] and press [PrtSc] in your keyboard, Then, paste it
into Word or Paint to be edited.
Have fun!
Jeffrey

Migrate Flex Chart to AS

Hi,
I've put together a simple test app that pulls data from blazeds and inserts the results in a PieChart defined in mxml. However when I try to create the same chart in AS the chart doesn't show up. I suspect that it is perhaps related to the sequence of how things are initialized? but I'm not sure
Here is my code. I've created 3 charts. The first (mxml) chart is the one that works fine. The second (AS) is my attempt to recreate the mxml chart in AS and it does not work. The third is a sanity check of another test AS chart just to see if I can actually make an AS PieChart and it also works fine.
If anyone has any insight it would be much appreciated.
Thank you,
Kaveh
<?xml version="1.0" encoding="utf-8"?>

<mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:data="com.kg.data.*"
                    width="100%"
                    height="100%"
                    initialize="getPokerParameterNumbers()"
                    backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.charts.Legend;
            [Bindable]
            public var paramCount:ArrayCollection;
            [Bindable]
             public var expenses:ArrayCollection = new ArrayCollection([
                {Expense:"Taxes", Amount:2000},
                {Expense:"Rent", Amount:1000},
                {Expense:"Bills", Amount:100},
                {Expense:"Car", Amount:450},
                {Expense:"Gas", Amount:100},
                {Expense:"Food", Amount:200}
            // Get the initial data set from the poker db
            private function getPokerParameterNumbers():void {
                //remoteObject.getParameterTypesAndCount();
                remoteObject.getParameterCount();
                addSecondChart();
                add3rdChart();
            // Handle the recevied message.
            private function resultHandler(event:ResultEvent):void {
                statusTextArea.text += "Server responded [] : \n";
                var myObject:Object = event.result;
                paramCount.removeAll();
                for (var key:* in myObject)
                  var value:* = myObject[key];
                  statusTextArea.text += "Parameter: " + key + " Count: " + value + "\n";
                  var paramItem:Object = new Object();
                  paramItem.parameterization = key;
                  paramItem.count = value;
                  paramCount.addItem(paramItem);
                paramCount.refresh();
            private function newResultHandler(event:ResultEvent):void {
                var collectionResult:ArrayCollection = ArrayCollection(event.result);
                statusTextArea.text += "-" + collectionResult.length + "-";
                paramCount = ArrayCollection(event.result);
            // Handle a message fault.
            private function faultHandler(event:FaultEvent):void {
                statusTextArea.text += "Received fault: " + event.fault + "\n";
            public function addSecondChart():void {
                //var medalsAC:ArrayCollection;
                var chart:PieChart;
                var series:PieSeries;
                //medalsAC = getDataProvider();
                /* Define pie series. */
                series = new PieSeries();
                //series.nameField = "label";
                //series.field = "data";
                series.nameField = "name";
                series.field = "count";
                /* Remove default dropshadow filter. */
                series.filters = [];
                /* Define pie chart. */
                chart = new PieChart();
                chart.percentWidth = 100;
                chart.percentHeight = 100;
                chart.showDataTips = true;
                //chart.dataProvider = medalsAC;
                chart.dataProvider = paramCount;
                chart.series = [series];
                /* Add chart to the display list. */
                topHBox.addChild(chart);
            private function add3rdChart():void {
                var medalsAC:ArrayCollection;
                var chart:PieChart;
                var series:PieSeries;
                medalsAC = getDataProvider();
                /* Define pie series. */
                series = new PieSeries();
                series.nameField = "label";
                series.field = "data";
                /* Remove default dropshadow filter. */
                series.filters = [];
                /* Define pie chart. */
                chart = new PieChart();
                chart.percentWidth = 100;
                chart.percentHeight = 100;
                chart.showDataTips = true;
                chart.dataProvider = medalsAC;
                chart.series = [series];
                /* Add chart to the display list. */
                p1.addChild(chart);
             * Create and return a simple ArrayCollection to
             * use as a data provider.
            private function getDataProvider():ArrayCollection {
                var arr:Array = [];
                arr.push({label:"Product 1", data:3});
                arr.push({label:"Product 2", data:1});
                arr.push({label:"Product 3", data:4});
                arr.push({label:"Product 4", data:1});
                arr.push({label:"Product 5", data:5});
                arr.push({label:"Product 6", data:9});
                return new ArrayCollection(arr);
        ]]>
    </mx:Script>
    <mx:RemoteObject id="remoteObject"
        destination="pokerDataSource"
        result="newResultHandler(event);"
        fault="faultHandler(event);"/>
    <mx:HBox width="100%" id="topHBox">
        <mx:VBox>
            <mx:PieChart id="myChart"
                dataProvider="{paramCount}"
                showDataTips="true"
                selectionMode="single"
                itemRollOverColor="#FF0066">
                <mx:series>
                    <mx:PieSeries
                        field="count"
                        nameField="name"
                        labelPosition="callout"
                    />
                </mx:series>
            </mx:PieChart>
            <mx:Legend dataProvider="{myChart}"/>
        </mx:VBox>
        <mx:TextArea     id="statusTextArea"
                        width="100%"
                        height="100%"
                        backgroundAlpha="0"
                        focusAlpha="0"
                        selectable="false"/>
    </mx:HBox>
    <mx:Panel id="p1"/>
</mx:Application>

Hi,
Simply let a IE or FireFox window display your Flex chart,
and hold [Alt] and press [PrtSc] in your keyboard, Then, paste it
into Word or Paint to be edited.
Have fun!
Jeffrey

Jsp flex chart

Hello
I would like to create a horizontal bar chart according to data from a struts2 action class and place the flex chart in a jsp.
I have already seen code on how to do a horizontal bar chart @ http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=charts_types_109_03.html
I am watching James Ward's video on java and flex @ http://www.jamesward.com/blog/2008/07/21/video-flex-and-java/
How do I place the flex graph in my jsp? What kind of flex project/component do I create and where do I place it?
Appreciate all help.
Thanks

Once you compile your Flex app you can size it and embed it anywhere you
want in your web page.

Help in Binding list to Flex chart Axis.

Similar Messages

Maybe you are looking for