3 Replies Latest reply on Feb 14, 2011 12:21 PM by billted98

    Add border stroke around chart

    billted98

      Hello,

       

      Racking my brain on this after hours of searching for an answer online - hope I'm just missing an obvious solution.  How do you draw a border around the area that displays the data in a chart?

       

      Screen shot 2011-02-11 at 3.14.16 PM.png

      Screen-shot-2011-02-11-at-3.14_2.jpg

       

      Closest I could come was to generate a second set of axes, but then I had all kinds of trouble removing the axes titles?

       

      Thanks for any input.

        • 1. Re: Add border stroke around chart
          Deeptika Gottipati Adobe Employee

          DataGraphics feature in charts can be used to draw a border like that.

           

          First, CartesianDataCanvas should be added as an annotation element for that chart.

           

          <mx:annotationElements>

               <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>

          </mx:annotationElements>

           

          In the updateComplete() of the chart (or in any event listener where you want the border to be drawn), something like this can be done

           

          private function drawBorder():void{

               var right:Number = horizontalAxis.maximum;

               var left:Number = horizontalAxis.minimum;

               var top:Number = vertictalAxis.maximum;

               var bottom:Number = vertictalAxis.minimum;

               canvas.clear();

               canvas.lineStyle(3);

               canvas.moveTo(left,top);

               canvas.lineTo(left,bottom);

               canvas.lineTo(right,bottom);

               canvas.lineTo(right,top);

               canvas.lineTo(left,top);

          }

           

          Note: horizontalAxis and verticalAxis used in above example are ids of chart's horizontal and vertical axis respectively.

           

          Hope this helps.

           

          Thanks,

          Deeptika

          • 2. Re: Add border stroke around chart
            Deeptika Gottipati Adobe Employee

             

            DataGraphics feature in charts can be used to draw a border like that.

             

             

             

            First, CartesianDataCanvas should be added as an annotation element for that chart.

             

             

            <mx:annotationElements>

                  <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>

            </mx:annotationElements>

             

            In the updateComplete() of the chart (or in any event listener where you want the border to be drawn), something like this can be done

             

            private function drawBorder():void{

                  var right:Number = horizontalAxis.maximum;

                  var left:Number = horizontalAxis.minimum;

                  var top:Number = vertictalAxis.maximum;

                  var bottom:Number = vertictalAxis.minimum;

                  canvas.clear();

                  canvas.lineStyle(3);

                  canvas.moveTo(left,top);

                  canvas.lineTo(left,bottom);

                  canvas.lineTo(right,bottom);

                  canvas.lineTo(right,top);

                  canvas.lineTo(left,top);

            }

             

            Note: horizontalAxis and verticalAxis used in above example are ids of chart's horizontal and vertical axis respectively.

             

            Hope this helps.

             

            Thanks,

            Deeptika

            1 person found this helpful
            • 3. Re: Add border stroke around chart
              billted98 Level 1

              Thank you Deeptika.  That is making more sense, but I am still not able to make it work.  I am new to Flash Builder.  I tried to follow your suggestion correctly:

               

              I put the annotationElements code inside the ColumnChart tag:

               

                          <mx:ColumnChart id="columnchart1"
                              creationComplete="columnchart1_creationCompleteHandler(event)"
                              dataProvider="{getDataResult2.lastResult}"
                              horizontalCenter="0"
                              paddingTop="40"
                              width="750"
                              showDataTips="true">
                             
                              <mx:annotationElements>
                                        <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
                              </mx:annotationElements>

                             ...

               

              Then I put the drawBorder function in the script area:

               

                  <fx:Script>
                      <![CDATA[
                          import mx.controls.Alert;
                          import mx.events.FlexEvent;
                         
                          protected function columnchart1_creationCompleteHandler(event:FlexEvent):void
                          {
                              getDataResult2.token = chinaCP_10_2010_Data.getData();
                          }
                         
                          public function defineVerticalLabel(
                              cat:Object,
                              pcat:Object,
                              ax:LinearAxis):String
                          {
                              return numForm.format(cat) +'%';
                          }
                         
                          private function drawBorder():void{
                                   var right:Number = categoryAxis.maximum;
                                   var left:Number = categoryAxis.minimum;
                                   var top:Number = linearAxis.maximum;
                                   var bottom:Number = linearAxis.minimum;
                                   canvas.clear();
                                   canvas.lineStyle(3);
                                   canvas.moveTo(left,top);
                                   canvas.lineTo(left,bottom);
                                   canvas.lineTo(right,bottom);
                                   canvas.lineTo(right,top);
                                   canvas.lineTo(left,top);
                          }                
                      ]]>
                  </fx:Script>

               

              Above, notice that I changed the var names to categoryAxis and linearAxis based on the code (below) in my chart.  (I tried to give id to <mx:horizontalAxis> and <mx:verticalAxis> but got this error: "Could not resolve <mx:horizontalAxis> to a component implementation."):

               

                              <mx:horizontalAxis>
                                  <mx:CategoryAxis id="categoryAxis" categoryField="Month"/>
                              </mx:horizontalAxis>

                             
                              <mx:verticalAxis>
                                  <mx:LinearAxis id="linearAxis"
                                      title="PERCENT CHANGE YEAR/YEAR"
                                      interval="2"
                                      maximum="10"
                                      maximumLabelPrecision="3"
                                      minimum="-4"
                                      labelFunction="defineVerticalLabel"/>
                              </mx:verticalAxis>

               

              After all of this, I am getting this error message in Flash Builder:


              1119: Access of possibly undefined property maximum through a reference with static type mx.charts:CategoryAxis.

               

              And I am getting this error message from Flash Player if I try to run it:

               

              TypeError: Error #1034: Type Coercion failed: cannot convert "
                                        " to flash.display.DisplayObject.
                  at mx.charts.chartClasses::ChartBase/http://www.adobe.com/2006/flex/mx/internal::addElements()[E:\dev\4.x\frameworks\projects\d atavisualization\src\mx\charts\chartClasses\ChartBase.as:4429]
                  at mx.charts.chartClasses::CartesianChart/http://www.adobe.com/2006/flex/mx/internal::updateSeries()[E:\dev\4.x\frameworks\projects\ datavisualization\src\mx\charts\chartClasses\CartesianChart.as:1562]
                  at mx.charts.chartClasses::ChartBase/commitProperties()[E:\dev\4.x\frameworks\projects\datav isualization\src\mx\charts\chartClasses\ChartBase.as:1964]
                  at mx.charts.chartClasses::CartesianChart/commitProperties()[E:\dev\4.x\frameworks\projects\ datavisualization\src\mx\charts\chartClasses\CartesianChart.as:1375]
                  at mx.core::UIComponent/validateProperties()[E:\dev\4.x\frameworks\projects\framework\src\mx \core\UIComponent.as:7933]
                  at mx.managers::LayoutManager/validateProperties()[E:\dev\4.x\frameworks\projects\framework\ src\mx\managers\LayoutManager.as:572]
                  at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:700]
                  at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1072]

               

              I'm afraid my researching these problems hasn't gotten me any closer to a solution.  Do you have any more ideas?

               

              Thank you!