0 Replies Latest reply on Sep 29, 2011 2:22 PM by C LAB

    Line Chart glitch - grid lines thick at certain heights

    C LAB

      The Flex Line Chart control does not display correctly at certain heights.  The gridlines that are supposed to be 1px pin stripes are sometimes displayed up to 100px wide.  This can be demonstrated with 1 line of code

       

      <mx:LineChart height="33000" x="200" y="0" id="chart_1"  width="100" ></mx:LineChart>

       

       

       

      I also have another small app that uses a timer to demonstrate how as the height increases the gridlines increase from:

       

      1px to 100px

      then back to 1px

      .... then as the chart's height increases another 7000px the 1px gridlines display correctly

      then it repeats going back to thick, then thin etc... almost a pulsating effect

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init();">

          <fx:Script>

              <![CDATA[

                  import flash.utils.Timer;

                  import flash.events.TimerEvent;

       

                  private var timer:Timer = new Timer(10);

       

                  private function init():void{

                      timer.addEventListener(TimerEvent.TIMER, changeheight);

                      timer.start();

                  }

       

                  private function changeheight(event:TimerEvent):void{

                      chart_1.height=chart_1.height+30;

                      lblHeight.text="Chart Height:"+String(chart_1.height)+"px ";

                  }            

              ]]>

          </fx:Script>

       

          <mx:LineChart height="33000" x="200" y="0" id="chart_1"  width="100" ></mx:LineChart>   

          <s:Label id="lblHeight"  />

          <s:Button y="80" click="timer.start();" label="Start" />

          <s:Button y="100" click="timer.stop();" label="Stop" />

      </s:Application>