1 Reply Latest reply on May 27, 2010 1:51 AM by megharajdeepak

    How to shift line series towards left?

    megharajdeepak Level 1

      Hello,

      I am using CartesianChart which has a ColumnSeries and a LineSeries(form property is 'Horizontal'):

      <mx:CartesianChart id="ccDetail" dataProvider="{acHeaderChartData}" percentWidth="100"
                  percentHeight="100" showDataTips="true" >
                 
                  <mx:series>
                  <mx:ColumnSeries id="csCarbonUsage"
                                  xField="Char30"
                                  yField="CarbonUsage"
                                  displayName="Carbon Usage"
                                  itemRenderer="BenchmarkColor"
                                  >
                                   
                                 
                        </mx:ColumnSeries>
                      <mx:LineSeries id="ls" xField="Char30" yField="BenchMark" form="horizontal">
                          <mx:lineStroke>
                              <mx:Stroke 
                                  color="0xffdd00"
                                  weight="3"
                                  alpha=".8"
                              />
                          </mx:lineStroke>
                      </mx:LineSeries>
                     
                  </mx:series>
              </mx:CartesianChart>

       

      As of now, this is how it looks:

       

      Capture.PNG

       

      The yellow coloured line series starts from the middle of the column, instead I want it to start from the beginning, something like this(blue lines):

      Capture2.PNG

       

      Can you please let me know how to achieve this?

       

      -Deepak

        • 1. Re: How to shift line series towards left?
          megharajdeepak Level 1

          After cracking my head for sometime, I was able to resolve it

           

          Instead of LinseSeries, I used another ColumnSeries, which uses a ItemRenderer, with this piece of code in it:

          override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
             
                       super.updateDisplayList(unscaledWidth, unscaledHeight);
                       var g:Graphics = graphics;
                   
                       if(_chartItem != null){
                         
                            g.lineStyle(2,0xFFdd00,1);
                         
                          g.drawRect(0,0,width, 1);  // this draws a horizontal line with height = 1 and width would be same as the current column
                          g.endFill();
                       
                           
                       }
                 
                  }

           

          This is how the chart looks now:

           

           

          Capture3.PNG