9 Replies Latest reply on Mar 24, 2008 8:30 AM by Solerous

    flex data binding events

    Solerous Level 1
      I would like to use captureImage to take a snapshot of chart data which is updated dynamically. However, I don't know which event gets fired when I update the arrays which are bound to the chart series data. Does anyone know what event I should listen for in order to get this to work?
        • 1. Re: flex data binding events
          Gregory Lafrance Level 6
          Maybe PropertyChangeEvent ?

          See this FB 2.0.1 or via LiveDocs:

          Defining binding watchers
          • 2. Re: flex data binding events
            ntsiii Level 3
            How about in the result handler function? I'd use callLater() to invoke the snapshot functionality to make sure the data has been fully applied.

            • 3. Re: flex data binding events
              Solerous Level 1
              I tried binding and ChangeWatcher, but I could never get the event to fire.

              I also tried callLater() but it only draws the first element (the title of the chart) and then fires captureImage so its still a blank chart.

              This seems a lot harder than it should be.
              • 4. Re: flex data binding events
                ntsiii Level 3
                Ahh, ok, you want an event that fires when the actual rendering is complete. Knowing when the data update is complete is not helping you. I have not worked in this area enough to help with that, maybe someone else will.

                Read through the events, maybe something will pop for you.

                • 5. flex data binding events
                  Solerous Level 1
                  Ok, I can get the image to draw the first time the chart is initialized using AddEventListener:

                  public var watcher:ChangeWatcher;

                  private function messageHandler(message:IMessage):void {
                  var arr:Array = message.body as Array;
                  var collectArray:ArrayCollection = new ArrayCollection(arr);

                  var result:AxisObject;
                  rootAxis = collectArray[0] as AxisObject;
                  axis1 = collectArray[1] as AxisObject;
                  axis2 = collectArray[2] as AxisObject;

                  array1 = axis1.data;
                  array2 = axis2.data;

                  // add chart if it has not been added yet
                  if (dynaChart.getChildren().length <= 1) {
                  dynaChart.addEventListener(FlexEvent.UPDATE_COMPLETE, drawImage);


                  But apparently, the UPDATE_COMPLETE event will not fire when the messagHandler is called for subsequent updates. I tried to put some binding between the chart and the data, thinking this would fire the UPDATE_COMPLETE event, or at least get noticed by a ChangeWatcher, but nothing happens after the initial creation of the chart. Here is the code from makeChart() where the binding is set up:

                  public function makeChart():void {
                  genericChart = new LineChart();
                  dynaChart.title = "Chart";
                  // Define the category axis.
                  var hAxis:CategoryAxis = new CategoryAxis();
                  hAxis.dataProvider = axis1.data;
                  hAxis.labelFunction = formatHorizLabel;
                  hAxis.categoryField = "point1" ;
                  hAxis.title = rootAxis.title;
                  var vAxis1:LinearAxis = new LinearAxis();
                  vAxis1.labelFunction = formatVertLabel;
                  var vAxis2:LinearAxis = new LinearAxis();
                  vAxis2.labelFunction = formatVertLabel;

                  genericChart.horizontalAxis = hAxis;
                  genericChart.verticalAxis = vAxis1;

                  var mySeries:Array=new Array();

                  series1 = new LineSeries();
                  series1.dataProvider = array1;

                  series2 = new PlotSeries();
                  series2.dataProvider = array2;
                  series2.verticalAxis = vAxis2;

                  // set up binding and watch the data
                  BindingUtils.bindProperty(axis2, "data", series2, "dataProvider");
                  watcher = ChangeWatcher.watch(axis2, "data", msg);

                  var ar1:AxisRenderer = new AxisRenderer();
                  ar1.axis = vAxis1;
                  var ar2:AxisRenderer = new AxisRenderer();
                  ar2.axis = series2.verticalAxis;
                  var ar3:AxisRenderer = new AxisRenderer();
                  ar3.axis = hAxis;

                  genericChart.horizontalAxisRenderers = [ar3];
                  genericChart.verticalAxisRenderers = [ar1, ar2];
                  genericChart.series = [series1, series2];
                  genericLegend.dataProvider = genericChart;

                  • 6. Re: flex data binding events
                    Solerous Level 1
                    I've looked at the event descriptions in LiveDocs and in the examples and I still don't see how to capture an event for when a custom binding is updated.

                    Is it the fact that I am reinitializing the variables rather than doing removes and inserts and such?
                    • 7. Re: flex data binding events
                      Sreenivas R Adobe Employee
                      It looks like axis2 object for which the binding is setup is changing in the messageHandler.

                      In a sample I tried updateComplete event always gets fired after the chart has been udpated with new data.
                      • 8. flex data binding events
                        Solerous Level 1
                        Here is a possible problem. Previously I was just sending the same data over and over in each message. So I finally changed the data that I was sending and I now realize that the chart is not even updating itself with the new data. So it now seems that the problem is in the messageHandler method. Why would this code not update the chart? Perhaps I am defining the databinding incorrectly?
                        • 9. Re: flex data binding events
                          Solerous Level 1
                          I made the following changes to the code and it seems to work!

                          if (dynaChart.getChildren().length <= 1) {
                          genericChart.addEventListener(FlexEvent.UPDATE_COMPLETE, drawImage);
                          else {
                          hAxis.dataProvider = axis1.data;
                          series1.dataProvider = array1;
                          series2.dataProvider = array2;