18 Replies Latest reply on Dec 26, 2012 12:39 AM by saisiva14

    Dynamically changes the linechart yfields by moving the slider

    saisiva14

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

        • 1. Re: Dynamically changes the linechart yfields by moving the slider
          megharajdeepak

          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.

          • 2. Re: Dynamically changes the linechart yfields by moving the slider
            saisiva14 Level 1

            My problem is to change the existing linechart values(i.e series1) to the current value shown in the slider.just i put one slider and one linechart component in my project.one more thing is slider value updated in my xml file.Initially the slider pointed the values which taken from my xml file.Hope you understand that what i conclude .Kindly help me to do that..Thanks in advance

            • 3. Re: Dynamically changes the linechart yfields by moving the slider
              megharajdeepak Level 1

              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>

              • 4. Re: Dynamically changes the linechart yfields by moving the slider
                saisiva14 Level 1

                hi,

                  Thanks for your help..I have one more issue in the variable radius pie chart .The problem is that when we running my code the chart is in initial state (no changes in my chart)  if once i switch to some other state and come back to my old page(i.e my chart page ),the corresponding values plotted and shows the correct value.Can you please take a quick look and reply.

                 

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

                <mx:Application

                          xmlns:mx="http://www.adobe.com/2006/mxml"

                          layout="absolute"

                          width="1116"

                          height="722"

                          xmlns:qc="qs.charts.*"  xmlns:ns="source_lib.qs.charts.*" xmlns:local="*" xmlns:charts="charts.*"   >

                 

                 

                 

                          <mx:Script>

                                    <![CDATA[

                                    ]]>

                          </mx:Script>

                          <mx:states>

                                    <mx:State name="old">

                                    <mx:RemoveChild target="{chart}"/>

                                    <mx:RemoveChild target="{button1}"/>

                                    <mx:AddChild relativeTo="{canvas1}" position="lastChild">

                                              <!-- button for navigate old state(base state) -->

                                              <mx:Button x="100" y="286" label="Old state" click="this.currentState =''"/>

                                    </mx:AddChild>

                                    <mx:AddChild relativeTo="{canvas1}" position="lastChild">

                                              <mx:Label x="194" y="320" text="This is new state, whenever we clicking on old state btn we can navigate to basestate but in size changes in piechart" fontSize="14" width="782"/>

                                    </mx:AddChild>

                          </mx:State>

                          </mx:states>

                          <mx:XML id="assessment" source="Assessment.xml" />

                          <mx:Canvas width="1092" height="702">

                 

                 

                          <mx:Panel width="1029" height="644" id="panel1" x="45" y="16">

                                    <mx:Canvas width="1016" height="595" id="canvas1">

                        <!-- piechart -->

                                              <mx:PieChart id="chart" width="534" height="413" 

                                                                   dataProvider="{assessment.assessment_parameter}" visible="true"  x="344" y="10">

                                              <mx:series >

                                                        <qc:SizedPieSeries id="series_1" width="100%" height="100%" field="radius" radiusField="score" 

                                                                                                   nameField="paramname"

                                                                                                   >

                                                        </qc:SizedPieSeries>

                                              </mx:series>

                                    </mx:PieChart>

                 

                                    <!-- button for navigate new state -->

                                    <mx:Button x="94" y="254" label="NewState" id="button1" click="this.currentState ='old'" />

                 

                                    <!-- data grid -->

                                              <mx:DataGrid dataProvider="{assessment.assessment_parameter}" id="datagrid1" x="42" y="36">

                                                        <mx:columns >

                                                                  <mx:DataGridColumn headerText="Column 1" dataField="score"/>

                                                                  <mx:DataGridColumn headerText="Column 2" dataField="radius"/>

                                                        </mx:columns>

                                              </mx:DataGrid>

                                    </mx:Canvas>

                          </mx:Panel>

                          </mx:Canvas>

                 

                </mx:Application>

                 

                 

                Thanks in advance..

                • 5. Re: Dynamically changes the linechart yfields by moving the slider
                  saisiva14 Level 1

                  hi deepak,

                      

                        I have a doubt on the barchart..I want to make a series with a current value from xml when ever change the slider value that makes a changes in current series..can u please help me to do that..I am new to design flex chart..Hope you have the experience ..Thanks in advance

                   

                  Regards,

                  siva.

                  • 6. Re: Dynamically changes the linechart yfields by moving the slider
                    megharajdeepak Level 1

                    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?

                    • 7. Re: Dynamically changes the linechart yfields by moving the slider
                      saisiva14 Level 1

                      hi,

                       

                       

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

                      <ROOTS>

                      <ROOT>

                      <name>Assignment</name>

                      <TXTA>30</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Discussion</name>

                      <TXTA>20</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>class</name>

                      <TXTA>10</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Co-study</name>

                      <TXTA>50</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Self-study</name>

                      <TXTA>60</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Exam</name>

                      <TXTA>25</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Journal</name>

                      <TXTA>30</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Lab</name>

                      <TXTA>60</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Paper</name>

                      <TXTA>80</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Patent</name>

                      <TXTA>60</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Presentation</name>

                      <TXTA>70</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Project</name>

                      <TXTA>50</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Report</name>

                      <TXTA>30</TXTA>

                      </ROOT>

                      <ROOT>

                      <name>Test</name>

                      <TXTA>40</TXTA>

                      </ROOT>

                      </ROOTS>

                      Here i attached my xml..

                       

                      <mx:BarChart x="427" y="53" id="barchart1" type="stacked" height="122" dataProvider="{xml2}" >

                                          <mx:verticalAxis>

                                                    <mx:CategoryAxis categoryField="name"/>

                                          </mx:verticalAxis>

                                          <mx:series>

                                                    <mx:BarSeries displayName="value1" xField="TXTA"/>

                                          </mx:series>

                                </mx:BarChart>

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

                      • 8. Re: Dynamically changes the linechart yfields by moving the slider
                        saisiva14 Level 1

                        slider value should be <TXTA> value...Hope you understand ..When the slider moves the corresponding xml values should be changed and plotted in the series(same series)..Thanks in advance

                        • 9. Re: Dynamically changes the linechart yfields by moving the slider
                          megharajdeepak Level 1

                          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>

                          • 10. Re: Dynamically changes the linechart yfields by moving the slider
                            saisiva14 Level 1

                            hi ,

                              thanks for your reply..ya it's working but i need changes happened in the same chart ..let as assume slider value 10,20,30,40 ..barchart contains one series that is study ..Initially the chart point out the value that is from xml for example that is 20..now i'm going drag my slider value from 20 to 30 on that time the bar series (i.e study) value will be changed .one more thing is when the slider value exceed the default value that shown in different color when it is below the default value it shows in some other color..try this challenge..i m also trying this .once you get idea about those stuffs reply .Thanks in advance..One more thing how to enable the multi browser support for flex application..how to design the application that suitable to all monitor size ?

                            • 11. Re: Dynamically changes the linechart yfields by moving the slider
                              megharajdeepak Level 1

                              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%")

                              • 12. Re: Dynamically changes the linechart yfields by moving the slider
                                saisiva14 Level 1

                                i got a error ..

                                1046: Type was not found or was not a compile-time constant: ChartItem.

                                -1046: Type was not found or was not a compile-time constant: IFill.

                                What will i do?can u help me?

                                • 13. Re: Dynamically changes the linechart yfields by moving the slider
                                  megharajdeepak Level 1

                                  You need to import those classes.

                                   

                                  Add following two lines on top:

                                  import mx.charts.ChartItem;           

                                  import mx.graphics.IFill;

                                  • 14. Re: Dynamically changes the linechart yfields by moving the slider
                                    saisiva14 Level 1

                                    Now this error came dude,

                                    Multiple markers at this line:

                                    -1046: Type was not found or was not a compile-time constant: BarSeriesItem.

                                    -1180: Call to a possibly undefined method BarSeriesItem.

                                    • 15. Re: Dynamically changes the linechart yfields by moving the slider
                                      megharajdeepak Level 1

                                                  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;

                                      • 16. Re: Dynamically changes the linechart yfields by moving the slider
                                        saisiva14 Level 1

                                        thanks a lot..i have a one more doubt in slider code..consider this is my script

                                        private function fnAddItem():void

                                                                      {

                                         

                                                                                var newXmlRow:XML=<ROOT1>

                                                        <name>Assignment</name>

                                                                                <TXTA1>{hval.value}</TXTA1>

                                                                                </ROOT1>;

                                                                                //xmlData=xmlData.appendChild(newXmlRow);

                                                                                xml2=xml2.appendChild(newXmlRow);

                                                                                barchart1.dataProvider=xml2.ROOT1;

                                                                      }

                                        <mx:XML id="xml2" source="root.xml"/>

                                        slider-->

                                        <mx:HSlider id="hval" x="121" y="393" minimum="10" maximum="60" tickInterval="10" change="fnAddItem()" />

                                         

                                        root.xml-->

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

                                        <ROOTS>

                                        <ROOT1>

                                        <TXTA1></TXTA1>

                                        </ROOT1>

                                        <ROOT>

                                        <name>Discussion</name>

                                        <TXTA2></TXTA2>

                                        </ROOT>

                                        <ROOT>

                                        <name>class</name>

                                        <TXTA3></TXTA3>

                                        </ROOT>

                                        </ROOTS>

                                         

                                        TXT values are empty now i want to update my slider value in <TXTA1>...i dont want to add more child for <TXTA1>tag..the values only updated and displayed dynamically can u pls help me to do that?Now the values are plotted in my barchart but dynalically series added..one by one i dont need that ..changes happening in single bar.

                                        • 17. Re: Dynamically changes the linechart yfields by moving the slider
                                          saisiva14 Level 1

                                          hi deepak,

                                           

                                              thanks a lot for your help while i got struggled to develop ..i got a good examples from you..now i planned to create a project that is also related to chart components..the overview of this project is predicting the values that in future.I'll explain it clearly..consider the student and subject let us assume one subject here.(y-axis as a subject name and x-axis as a student marks)ok..

                                          1. initially the chart shows the current marks of the particular subject
                                          2. i used slider that contain values range between[0,20,40,60,80,100]
                                          3. assume both the slider and chart points like 40
                                          4. when move my slider value from 40 to 60 the chart values get updated and it 'll shows in different color
                                          5. when reduce the slider value that shows in some other color
                                          6. i used colorfill function which you given to me ..it was working nice

                                          But the problem is ,

                                          initially the color is filled by orange,when my slider got updated the color 'll change but my old one is merged with new color and generate some other color

                                           

                                          My goal is to student can predict the future values from this project..if student got high marks from existing means that shows green..if they got low means shows red or some colors..

                                           

                                           

                                          Is there any components available in flex for showing the differnce(prediction)

                                           

                                           

                                          Hope you are understanding what i am trying to say.Help me to do that and suggest some components

                                           

                                          Thanks in advance..

                                          Saisiva

                                          • 18. Re: Dynamically changes the linechart yfields by moving the slider
                                            saisiva14 Level 1

                                            hi,

                                              Just tell me if it is possible or not?in flex..If it is possible let me know which component shall i use?how to differentiate the prediction values using chart?which component is suitable to do this ?kindly help me to proceed further..