3 Replies Latest reply on Jun 15, 2010 2:21 PM by rtalton

    Flex4 chart - reload data / change one value


      Hello all!


      I use Flex 4 and I have a container with a LineChart in this way in a mxml component:


          <fx:Model id="results" source="../assets/data.xml"/>
      <s:Panel x="0" y="0" title="chart">
          <mx:LineChart id="myChart" dataProvider="{results.result}" showDataTips="true">
                  <mx:CategoryAxis categoryField="month"/>
                  <mx:GridLines gridDirection="both"/>
                  <mx:LineSeries yField="line1" displayName="first line"/>
                  <mx:LineSeries yField="line2" displayName="second line"/>
          <mx:Legend dataProvider="{myChart}"/> 


      In my Main.mxml I create the component with


      public var chart:MyChart = new MyChart();


      and I put it onto the screen with



      But now I have a problem: I get the data by reading a XML file (the way I get the data does not matter, so it is possible to change


      the fetch type of the data if this can solve my problem).


      Now I have a Mouse-Event in which the data, one value of line1, need to be changed.


      So my question:


      How can I change one value of my data and the chart/diagram will be reloaded?


      And, is it possible to make for the milliseconds the user has to wait for the new chart(in reality I have to calculate the value and this costs time) that a "waiting spinner"


      (http://en.wikipedia.org/wiki/Spinning_wait_cursor) will appear and disappear? What possibilities do I have to make this a little bit animated, so that the user can see that there was a reload?


      Best Regards and thanks a lot in advance for your help!

        • 1. Re: Flex4 chart - reload data / change one value
          PHANTOMIASA Level 1

          I think I know how I can change the data of my chart.

          I have to use an ArrayCollection for the dataProvider.


          I took this ArrayCollection:

          public var testDataForDataProvider:ArrayCollection = new ArrayCollection([
              {month:"Jan", testNumber:100, otherNumber:200},
              {month:"Feb", testNumber:110, otherNumber:300},
              {month:"Mar", testNumber:100},
              {month:"Apr", testNumber:120},


          Doing a

          testDataForDataProvider.addItem({month:"Jun", testNumber:100});

          the chart refreshs itselt and I see the new value.


          But: How can I change for example the value of

          {month:"Mar", testNumber:100}


          {month:"Mar", testNumber:222}


          The String "Mar" for month is unique. Can I access this via this unique key and change values?


          Best Regards.

          • 2. Re: Flex4 chart - reload data / change one value
            PHANTOMIASA Level 1

            I solved everything, except the thing with the waiting spinner.

            How can I put a spinner onto the Flexh Chart (embedded in a SkinnableContainer).


            It would be nice if it is possible to put a layer over the SkinnableContainer so the flex chart is not 100% clear to see and a spinner is on top.

            How can I do this?


            Best Regards.

            • 3. Re: Flex4 chart - reload data / change one value
              rtalton Level 4

              One way to prevent user interaction while you are waiting for data is to use a modal pop-up Title Window. You can then use a SWFLoader inside the Title Window to play an animation like a spinner. Note that the TitleWindow can easily be styled to remove the solid borders,  etc., so the user will not even recognize it as a TitleWindow.