2 Replies Latest reply on Jun 16, 2010 11:18 AM by Peter Chaim Weinstein

    do charts work when compiling with Flex 3 compatibility?

    Peter Chaim Weinstein

      Hi -

       

      I had good success developing a line chart with Flash Builder 4, until I tried to incorporate it into my large project which compiles in Flex 3 compatibility mode. There I had trouble compiling, but got past that by including mxml for the various strokes to draw with etc. After that I hit some null pointer exceptions, which I got past by explicitly identifying the line segment and item renderers. Unfortunately, the chart still refuses to draw, I'm seeing just the horizonatal axis labels in an incorrect location.

       

      Is there a problem with my code, or do charts not work when compiling with Flex 3 compatibility?

       

      Surprisingly, even though I'm compiling with Flex 3 compatibility, the build path libraries point to the Flex 4 sdk, not the Flex 3.5 sdk. I'm having trouble figuring out how to switch to the Flex 3.5 sdks. The folder reference for the Flex 4 sdk is to .../sdks/4.0.0, but adding in Flex 3.5 requires .../sdks/3.5.0/frameworks/libs and then the resulting swcs included don't match up.

       

      I appreciate the help -

      Peter

        • 1. Re: do charts work when compiling with Flex 3 compatibility?
          Peter Chaim Weinstein Level 1

          I'm still struggling with this, 6 hours later :-(

           

          I figured out how to switch to the Flex 3.5 SDK, that did not help.

           

          I went back to the small project that works in Flex 4, and put just that into compatibility mode -- unfortunately, reproducing the problem I'm experiencing in the large project exactly. Here is my current code. Note, there is a lot of specifying of defaults, which I needed to get past compilation errors and null pointer exceptions!

           

          <?xml version="1.0"?>
          <!-- charts/BasicLine.mxml -->
          <mx:Application
              xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="initialization()"
              width="1200" height="800">       
             
              <mx:Label id="titleLabel" x="30" y="10" text="Progress Chart for " fontSize="16" />
              <!--mx:Label id="measureLabel" x="688" y="25" text="Measure:" fontSize="12" width="67"/-->
              <mx:ComboBox id="measureCombo" x="300" y="14" width="300" dataProvider="{patientMeasureNames}"
                           editable="false" change="loadPatientData()" />   
              <mx:SolidColorStroke id="axisStroke"
                                   color="#000000"
                                   weight="2"
                                   alpha="1"
                                   caps="square" />
              <mx:SolidColorStroke id="tickStroke"
                                   color="#000000"
                                   weight=".5"
                                   alpha="1" />
              <mx:SolidColorStroke id="minorTickStroke"
                                   color="#000000"
                                   weight=".25"
                                   alpha="1" />
              <mx:SolidColorStroke id="dataStroke"
                                   color="0x11538C"
                                   weight="3"
                                   alpha="1" />
              <mx:Canvas id="chartCanvas" x="30" y="50" width="600" height="500" borderStyle="solid" >
                  <mx:LineChart id="progressChart" x="10" y="10" width="800" height="400"
                                dataProvider="{patientData}"
                                showDataTips="true"   
                                horizontalAxisStyleNames="{styleNames}" verticalAxisStyleNames="{styleNames}"
                                >
                      <mx:annotationElements>
                          <mx:CartesianDataCanvas id="annotationCanvas" includeInRanges="true" />
                      </mx:annotationElements>
                      <mx:horizontalAxis>
                          <mx:DateTimeAxis id="hAxis" parseFunction="makeDateFromString"
                                           alignLabelsToUnits="true" displayLocalTime="true"
                                            maximum="{maxDate}" title="Date/Time" labelFunction="formatDateLabel" />
                      </mx:horizontalAxis>
                      <mx:verticalAxis>
                          <mx:LinearAxis id="vAxis" interval="1" maximum="{this.maxValue}" title="Pain Scale" />
                      </mx:verticalAxis>
                      <mx:series>
                          <mx:LineSeries xField="date" yField="value" displayName="(measure)" stroke="{dataStroke}"
                                         itemRenderer="mx.charts.renderers.CircleItemRenderer"
                                         lineSegmentRenderer="mx.charts.renderers.LineRenderer"
                                         >
                              <mx:lineStroke>
                                  <mx:SolidColorStroke
                                      color="0x11538C"
                                      weight="3"
                                      alpha="1" />
                              </mx:lineStroke>
                          </mx:LineSeries>               
                      </mx:series>
                      <mx:seriesFilters>
                          <mx:Array/>
                      </mx:seriesFilters>
                      <mx:horizontalAxisRenderers>
                          <mx:AxisRenderer axis="{hAxis}"
                                           axisStroke="{axisStroke}" tickStroke="{tickStroke}" minorTickStroke="{minorTickStroke}"
                                           showLine="true"
                                           tickPlacement="outside"
                                           />
                      </mx:horizontalAxisRenderers>           
                      <mx:verticalAxisRenderers>
                          <mx:AxisRenderer axis="{vAxis}"
                                           axisStroke="{axisStroke}" tickStroke="{tickStroke}" minorTickStroke="{minorTickStroke}"
                                           showLine="true"
                                           tickPlacement="none"
                                           />
                      </mx:verticalAxisRenderers>
                  </mx:LineChart>
                  <!--mx:Legend id="chartLegend"
                             x="20" y="{chartCanvas.height - chartLegend.height - 20}"
                             dataProvider="{progressChart}" /-->
              </mx:Canvas>
             
              <mx:Script>
                  <![CDATA[
                      import com.bewellcommunication.pvg.model.BackendService;
                      import com.bewellcommunication.pvg.model.Utilities;
                     
                      import flash.events.TimerEvent;
                     
                      import mx.charts.chartClasses.IAxis;
                      import mx.charts.series.items.LineSeriesItem;
                      import mx.collections.ArrayCollection;
                      import mx.collections.XMLListCollection;
                      import mx.rpc.events.ResultEvent;           
                      import mx.controls.RadioButton;
                      import mx.controls.RadioButtonGroup;
                     
                      [Bindable]
                      private var patientMeasureNames:ArrayCollection;
                      private var patientMeasureIds:Array;
                      private var dataVideoIds:Array;
                      private var videoButtons:Array;
                     
                      [Bindable]
                      private var patientData:XMLListCollection;
                     
                      [Bindable]
                      private var maxDate:Date;
                     
                      [Bindable]
                      private var maxValue:Number;

           

                      [Bindable]
                      private var styleNames:Array = new Array("axisStroke");
                     
                      private function initialization():void
                      {
                          var service:BackendService = new BackendService();
                          var xml:String = "<LoadPatientMeasures>"
                              + "\n<clientId>" + 2 + "</clientId>"
                              + "\n</LoadPatientMeasures>";
                          service.request(xml, loadPatientMeasuresFinish);
                      }
                     
                      public function loadPatientMeasuresFinish(re:ResultEvent):void
                      {
                          var xmlResult:XML = XML(re.result.valueOf().toString());
                          var error:String = xmlResult.error;
                          if (error != null && error != "")                   
                              trace(xmlResult.error + "Problem loading patient measures");        // PENDING: bwcAlert
                          else
                          {
                              this.patientMeasureNames = new ArrayCollection();
                              this.patientMeasureNames.addItem("(Select measure)");
                              this.patientMeasureIds = new Array();
                              this.patientMeasureIds.push(0);
                             
                              var xmlMeasures:XMLList = xmlResult.measures.children();
                              for each (var xmlMeasure:Object in xmlMeasures)
                              {
                                  this.patientMeasureIds.push(Number(xmlMeasure.measureId));
                                  var name:String = xmlMeasure.measureName;                        // PENDING: utils.makeSafe()
                                  this.patientMeasureNames.addItem(name);       
                              }
                          }                   
                      }
                     
                      public function loadPatientData():void
                      {
                          var measureIndex:int = this.measureCombo.selectedIndex;
                          if (measureIndex < 1)
                              return;
                          var service:BackendService = new BackendService();
                          var xml:String = "<LoadPatientData>"
                              + "\n<clientId>" + 2 + "</clientId>"
                              + "\n<measureId>" + this.patientMeasureIds[measureIndex] + "</measureId>"
                              + "\n</LoadPatientData>";
                          service.request(xml, loadPatientDataFinish);               
                      }
                     
                      public function loadPatientDataFinish(re:ResultEvent):void
                      {
                          var xmlResult:XML = XML(re.result.valueOf().toString());
                          var error:String = xmlResult.error;
                          if (error != null && error != "")                   
                              trace(xmlResult.error + "Problem loading patient data");        // PENDING: bwcAlert
                          else
                          {
                              // set data for graphing
                              this.patientData = new XMLListCollection(xmlResult.results.result);
                              this.dataVideoIds = new Array();
                              // calculate mins and maximums for axis spacing
                              var xmlResults:XMLList = xmlResult.results.children();
                              var minDate:Number = Number.MAX_VALUE;
                              var maxDate:Number = Number.MIN_VALUE;
                              var minVal:Number = Number.MAX_VALUE;
                              var maxVal:Number = Number.MIN_VALUE;
                              for each (var result:Object in xmlResults)
                              {
                                  var date:Number = Number(result.date);
                                  var val:Number = Number(result.value);
                                  if (!isNaN(val))
                                  {
                                      if (date < minDate)
                                          minDate = date;
                                      if (date > maxDate)
                                          maxDate = date;
                                      if (val < minVal)
                                          minVal = val;
                                      if (val > maxVal)
                                          maxVal = val;
                                  }
                                 
                                  // also store the video id
                                  var videoId:Number = Number(result.videoId);
                                  this.dataVideoIds.push(videoId);
                              }
                              // set scale max for each axis
                              this.maxDate = new Date(maxDate + ((maxDate - minDate) * 0.1));
                              this.maxValue = maxVal * 1.1;
                              // draw links to videos
                              var utils:Utilities = new Utilities();
                              utils.relinquishThenFinish(drawLinksToVideos);
                          }                   
                      }
                     
                      private function drawLinksToVideos(e:TimerEvent):void
                      {
                          var items:Array = this.progressChart.getItemsInRegion(this.progressChart.getRect(this.progressChart));
                          var i:int;
                          var rbg:RadioButtonGroup = new RadioButtonGroup(this.annotationCanvas);
                          this.videoButtons = new Array();
                          for (i = 0; i < items.length; i++)
                          {
                              var liveButton:RadioButton = null;
                              if (this.dataVideoIds[i] > 0)
                              {
                                  var item:LineSeriesItem = items[i];
                                  var radio:RadioButton = new RadioButton();
                                  radio.group = rbg;
                                  liveButton = radio;
                                  radio.addEventListener(Event.CHANGE, loadAndPlayVideo);
                                  this.annotationCanvas.addDataChild(radio, item.xValue, item.yValue);
                              }
                              this.videoButtons.push(liveButton);    // one for each item
                          }
                      }
                     
                      private function loadAndPlayVideo(e:Event):void
                      {
                          var utils:Utilities = new Utilities();
                          utils.relinquishThenFinish(finishLoadAndPlayVideo);
                      }
                      private function finishLoadAndPlayVideo(e:TimerEvent):void
                      {
                          // identify video to play
                          var i:int;
                          var target:int = -1;
                          for (i=0; target == -1 && i < this.videoButtons.length; i++)
                          {
                              var radio:RadioButton = this.videoButtons[i] as RadioButton;
                              if (radio != null && radio.selected)
                                  target = i;
                          }
                         
                          // play video
                          if (target > -1)
                          {
                              trace("play video: index=" + target + " id=" + this.dataVideoIds[target]);
                          }
                      }
                     
                      private function makeDateFromString(dateStr:String):Date
                      {
                          var dateNum:Number = Number(dateStr);
                          var date:Date = new Date(dateNum);
                          trace("date=" + date.toLocaleString());
                          return date;
                      }
                     
                      private function formatDateLabel(cur:Date, prev:Date, axis:IAxis):String
                      {
                          var label:String = cur.month + "/" + cur.date + " " + cur.hours + ":" + cur.minutes;
                          return label;
                      }
                     
                  ]]>
              </mx:Script>
             
          </mx:Application>

           

          Again - thanks for your help - Peter

          • 2. Re: do charts work when compiling with Flex 3 compatibility?
            Peter Chaim Weinstein Level 1

            The other thing I should mention: when LineSeries.updateDisplayList(unscaledWidth, unscaledHeight) is called, unscaledWidth and unscaledHeight are NaN. Any ideas why this might be? Setting a fixed height and width for the LineSeries in the mxml did not help.

             

            Thanks,

            Peter