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

    Flex4 chart - reload data / change one value

    PHANTOMIASA

      Hello all!

       

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

       

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

       

      In my Main.mxml I create the component with

       

      public var chart:MyChart = new MyChart();

       

      and I put it onto the screen with

      this.addElement(chart);
      

       

      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}

          to

          {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.