Skip navigation
saisiva14
Currently Being Moderated

Dynamically changes the linechart yfields by moving the slider

Dec 3, 2012 10:04 PM

I would like to generate the line chart with a dynamic updates from slider values..Kindly help me to do that..Thanks in advance

 
Replies
  • Currently Being Moderated
    Dec 4, 2012 2:39 AM   in reply to saisiva14

    Your chart has only one line or multiple lines? If you can ellaborate little more or paste your sample code here, that would help to understand your problem precisely.

    It mainly depends on your data, it's attributes to dynamically assign these attributes based on slider selection, at runtime.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 2:11 AM   in reply to saisiva14

    Hopefully, this shall solve your purpose. This gets your line series dynamically:

    <?xml version="1.0"?>

    <!-- charts/BasicLineStroke.mxml -->

    <s:Application

        xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:mx="library://ns.adobe.com/flex/mx"

        xmlns:s="library://ns.adobe.com/flex/spark"

        creationComplete="drawChart()"

        height="100%" width="100%">

       

        <fx:Script>

            <![CDATA[

                import mx.charts.series.LineSeries;

                import mx.events.FlexEvent;

                import mx.events.SliderEvent;

                import mx.rpc.events.ResultEvent;

               

                import spark.events.IndexChangeEvent;

               

                protected function drawChart():void

                {

                    // TODO Auto-generated method stub

                    var ls:LineSeries = new LineSeries();

                    ls.yField='@'+String(cb.selectedItem.@attributeName);

                    ls.displayName=String(cb.selectedItem.@desc);

                   

                    var seriesArray:Array = []; // you can push all your line series here, if you have more than one also

                    seriesArray.push(ls);

                    myChart.series = seriesArray;

                   

                }

               

            ]]>

        </fx:Script>

       

        <fx:Declarations>

            <fx:XML id="myXML" xmlns="">

                <root>

                    <row month="Jan" seriesA="200" seriesB="545" seriesC="234"/>

                    <row month="Feb" seriesA="234" seriesB="123" seriesC="865"/>

                    <row month="Mar" seriesA="753" seriesB="456" seriesC="345"/>

                    <row month="Apr" seriesA="123" seriesB="322" seriesC="846"/>

                </root>

            </fx:XML>

           

           

        </fx:Declarations>

       

        <s:layout>

            <s:VerticalLayout/>

        </s:layout>

       

        <s:Panel title="Line Chart" width="100%" height="100%">

           

            <s:layout>

                <s:VerticalLayout/>

            </s:layout>

           

            <s:ComboBox id="cb" change="drawChart()" selectedIndex="0" labelField="@desc">

                <s:dataProvider>

                    <s:XMLListCollection>

                        <fx:XMLList xmlns="">

                            <row attributeName="seriesA" desc="Series A"/>

                            <row attributeName="seriesB" desc="Series B"/>

                            <row attributeName="seriesC" desc="Series C"/>

                        </fx:XMLList>

                    </s:XMLListCollection>

                </s:dataProvider>

               

            </s:ComboBox>

           

            <mx:LineChart id="myChart"

                          dataProvider="{myXML.row}"

                          showDataTips="true" width="100%" height="100%">

                <mx:horizontalAxis>

                    <mx:CategoryAxis categoryField="@month"/>

                </mx:horizontalAxis>

               

            </mx:LineChart>

            <mx:Legend dataProvider="{myChart}"/>

        </s:Panel>

    </s:Application>

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 11:30 PM   in reply to saisiva14

    Can you paste your xml here and from this xml what do you want to show on the chart on X and Y axis? and also, what values you want to show on slider?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 2:30 AM   in reply to saisiva14

    Try this. I hope this is what you wanted.

     

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" minWidth="955" minHeight="600"

                    width="100%" height="100%" layout="vertical" horizontalAlign="left" verticalAlign="middle"

                    creationComplete="application1_creationCompleteHandler(event)">

        <mx:Script>

            <![CDATA[

                import mx.events.FlexEvent;

                import mx.events.SliderEvent;

               

                [Bindable]private var dataValues:Array = [];

                protected function application1_creationCompleteHandler(event:FlexEvent):void

                {

                    // TODO Auto-generated method stub

                   

                    for each(var node:XML in xml.ROOT)

                    {

                        dataValues.push(String(node.TXTA));

                    }

                   

                    dataValues.sort(Array.NUMERIC);

                   

                    hSlider.values = dataValues;

                    hSlider.minimum = dataValues[0];

                    hSlider.maximum = dataValues[dataValues.length-1];

                    hSlider.labels = dataValues;

                    hSlider.snapInterval = 10;

                    hSlider.tickInterval = 10;

                   

                    hSlider_changeHandler();

                }

               

                protected function hSlider_changeHandler():void

                {

                    // TODO Auto-generated method stub

                    for each(var node:XML in xml.ROOT)

                    {

                        if(Number(node.TXTA) == hSlider.value)

                        {

                            sliderXML = new XML('<ROOTS>'+node.toXMLString()+'</ROOTS>');

                            break;

                        }

                    }

                   

                    barchart2.dataProvider = sliderXML.ROOT;

                   

                }

               

            ]]>

        </mx:Script>

       

       

       

        <mx:HSlider id="hSlider" width="100%" change="hSlider_changeHandler()" />

       

        <mx:HBox width="100%" height="100%">

            <mx:VBox width="50%" height="100%">

               

               

                <mx:BarChart  id="barchart1" type="stacked"  showDataTips="true" dataProvider="{xml.ROOT}" >

                   

                    <mx:verticalAxis>

                       

                        <mx:CategoryAxis categoryField="name"/>

                       

                    </mx:verticalAxis>

                   

                    <mx:series>

                       

                        <mx:BarSeries  xField="TXTA" />

                       

                    </mx:series>

                   

                </mx:BarChart>

               

               

            </mx:VBox>

           

            <mx:VBox width="50%" height="100%">

                <mx:BarChart  id="barchart2" type="stacked"  showDataTips="true" >

                   

                    <mx:verticalAxis>

                       

                        <mx:CategoryAxis categoryField="name"/>

                       

                    </mx:verticalAxis>

                   

                    <mx:series>

                       

                        <mx:BarSeries  xField="TXTA" />

                       

                    </mx:series>

                   

                </mx:BarChart>

               

            </mx:VBox>

        </mx:HBox>

       

        <mx:XML id="sliderXML"/>

        <mx:XML id="xml" xmlns="">

            <ROOTS>

               

                <ROOT>

                   

                    <name>Assignment</name>

                   

                    <TXTA>10</TXTA>

                   

                </ROOT>

               

                <ROOT>

                   

                    <name>Discussion</name>

                   

                    <TXTA>20</TXTA>

                   

                </ROOT>

               

                <ROOT>

                   

                    <name>class</name>

                   

                    <TXTA>30</TXTA>

                   

                </ROOT>

               

                <ROOT>

                   

                    <name>Co-study</name>

                   

                    <TXTA>40</TXTA>

                   

                </ROOT>

               

                <ROOT>

                   

                    <name>Self-study</name>

                   

                    <TXTA>50</TXTA>

                   

                </ROOT>

               

               

               

            </ROOTS>

        </mx:XML>

    </mx:Application>

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 3:28 AM   in reply to saisiva14

    Add fill function for your bar series for colour change:

    private static const DEFAULT_VALUE:Number = 30;

               

                private function barSeries_fillFunc(item:ChartItem, index:Number):IFill {

                    var currItem:BarSeriesItem = BarSeriesItem(item);

                    if(Number(currItem.item.TXTA) >= DEFAULT_VALUE)

                    {

                        return new SolidColor(0xFF0000, 1.0);//if TXTA value is 30 or more, show in RED

                    }else

                    {

                        return new SolidColor(0x00FF00, 1.0);// if TXTA value is less than 30, show in GREEN

                    }

                   

                }

     

    <mx:BarChart  id="barchart2" type="stacked"  showDataTips="true" >

                   

                    <mx:verticalAxis>

                       

                        <mx:CategoryAxis categoryField="name"/>

                       

                    </mx:verticalAxis>

                   

                    <mx:series>

                       

                        <mx:BarSeries  xField="TXTA" fillFunction="barSeries_fillFunc" />

                       

                    </mx:series>

                   

                </mx:BarChart>

     

    One more thing how to enable the multi browser support for flex application..

    Flex application depends on flash player, whichever browser has flash player, flex application works on it. This feature is what makes it browser independent.

     

    how to design the application that suitable to all monitor size

    For this you need to specify your containers' size in terms of percentage(width = "25%" height="80%")

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 3:56 AM   in reply to saisiva14

    You need to import those classes.

     

    Add following two lines on top:

    import mx.charts.ChartItem;           

    import mx.graphics.IFill;

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 4:39 AM   in reply to saisiva14

                import mx.charts.series.items.BarSeriesItem;

                import mx.events.FlexEvent;

                import mx.events.SliderEvent;

                import mx.charts.ChartItem;

                import mx.graphics.IFill;

                import mx.graphics.SolidColor;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points