6 Replies Latest reply on Nov 6, 2009 3:10 AM by kmcsekar

    Chart DataToLocal

    kmcsekar

      chart DataToLocal is deprecated in Flex3, and the recommendation is to use IChartElement2.

       

      Howover, I couldn't find any practical example on net that can help me to use IChartElement2 and not Chart for DataToLocal conversion.

       

       

      My requirement is to conver the data coordinate to pixle coordinate chart and draw graphics based on pixel coordinate.

       

      Thx

        • 1. Re: Chart DataToLocal
          Subeesh Arakkan Level 4

          Hi,

           

          Check my modified version of the code example from the live documenation.

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script><![CDATA[
                 import mx.charts.chartClasses.IChartElement2;
               import mx.collections.ArrayCollection;
               public var p:Point;
          
               [Bindable]
               public var expenses:ArrayCollection = new ArrayCollection([
                  {Month:"Jan", Profit:2000, Expenses:1500},
                  {Month:"Feb", Profit:1000, Expenses:200},
                  {Month:"Mar", Profit:1500, Expenses:500}
               ]);
          
               private function updateDetails(e:MouseEvent):void {
                  p = new Point(myChart.mouseX,myChart.mouseY);
                  mpos.text = "(" + p.x + "," + p.y + ")";
          
                  var d:Array = IChartElement2(e.currentTarget).localToData(p);
                  dval.text = "(" + d[0] + "," + Math.floor(d[1]) + ")";
          
                  p = IChartElement2(e.currentTarget).dataToLocal(d[0],d[1]);
                  dpos.text ="(" + Math.floor(p.x) + "," + 
                      Math.floor(p.y) + ")";
               }
          
          
            ]]></mx:Script>
            <mx:Panel title="Column Chart">
               <mx:ColumnChart id="myChart" 
                  dataProvider="{expenses}" 
                  
                  showDataTips="true"
               >
                  <mx:horizontalAxis>
                     <mx:CategoryAxis 
                          dataProvider="{expenses}" 
                          categoryField="Month"
                     />
                  </mx:horizontalAxis>
                  <mx:series>
                     <mx:ColumnSeries 
                          xField="Month" 
                          yField="Profit"
                          displayName="Profit"
                          mouseMove="updateDetails(event)"
                     />
                     <mx:ColumnSeries 
                          xField="Month" 
                          yField="Expenses"
                          displayName="Expenses"
                          mouseMove="updateDetails(event)"
                     />
                  </mx:series>
               </mx:ColumnChart>
               <mx:Legend dataProvider="{myChart}"/>
            </mx:Panel>
          
          
            <mx:Form width="300">
               <mx:FormItem label="Mouse Position:">
                  <mx:Label id="mpos"/>
               </mx:FormItem>
               <mx:FormItem label="Data Position:">
                  <mx:Label id="dpos"/>
               </mx:FormItem>
               <mx:FormItem label="DATA:">
                  <mx:Label id="dval"/>
               </mx:FormItem>
            </mx:Form>
          
          </mx:Application>
          
          1 person found this helpful
          • 2. Re: Chart DataToLocal
            kmcsekar Level 1

            Subheesh,

             

            Thx for your answer.  That really helped to understand IChartElement2.

             

            But my scenario is little different.  I don't want the data to pixel conversion through mouse event.  I would like to do that at the time of loading itself.

             

            More like, I will have the data coordinate and chart(columnchart) same like your example and would like to convert that pixel value.

             

            Assume like I want to draw a vertical line on top of column chart for every datapoint.  Thats my requirement.

             

            Thx in advance.

            • 3. Re: Chart DataToLocal
              Subeesh Arakkan Level 4

              Hmm. Have n't thought about that . How about using a LineSeries along with the ColumnSeries. Use the same dataprovider for both . All you have to do is to modiy the line chart properties.

              • 4. Re: Chart DataToLocal
                kmcsekar Level 1

                Thanks fo your quick response.

                 

                I cannot use LineSeries.  The reason is am trying to draw some graphics (it

                could be line or circle) that should drawn at any given data coordinate.

                 

                Its like this.  The column chart is constructed.  Oncreation complete, there

                will be some external component that will provide any data coordinate and

                will request the chart to draw some graphics at the given data coordinate.

                 

                Usecase: I have my own algorithm to draw the trendline on column chart and

                that will feed the datacoordinates to draw on top of chart.  The trendline

                is of custom shape, and not necessarily a simple line.

                • 5. Re: Chart DataToLocal
                  Subeesh Arakkan Level 4

                  You can use the getAllDataPoints() method of the chart to get an array of HitData items. HitData has the x and y values of the data point.

                  • 6. Re: Chart DataToLocal
                    kmcsekar Level 1

                    Subeesh

                     

                    Thanks for your response.

                    I was able to resolve it.

                    We need to create CartesianDatacanvas and add it as annotationElement.

                    Then on the updateHandler of the canvas, if we try to

                    canvas.dataToLocal(), it works perfectly.

                     

                    Thanks for your guidance again!