Graph/Chart datatip shows up with dark background and dark text

[em_volant]

I am using graphs/charts on Flash Builder 4. I am not using a datatip renderer, funciton, or anything. The basic datatip that shows up has a dark semi-translucent background and dark text and is unreadable. Normaly shouldn't the background be white and semi-translucent? My hack to get around it is to make a custom datatip renderer and set the background color to white after the super() in the constructor. But it seems like overkill. Is there some other setting that affects the background color of a chart?

[Deeptika Gottipati]

Thank you for pointing this out.

We tried with 4.1 SDK and we are able to reproduce the issue when Flex 3 compatibility mode is set.

We are not able to reproduce this issue with normal 4.0, 4.1 and 3.5 SDKs. Please let us know if you are seeing this in any configuration other than 4.1 with Flex 3 compatibility mode set.

We will log a bug and work on this.

Thanks,

Deeptika

[sudhirm-rRcgag]

http://bugs.adobe.com/jira/browse/FLEXDMV-2466 has been logged for the same.

Thanks,

Sudhir

[em_volant]

I checked my flex projects and all of them are set to "Use default SDK (currently "Flex 4.0")" and "Use Flex 3 compatibility mode" is not checked. I ran a little test and created a new project with basicaly the same settings and the data tips were fine. I then put the graph in the top level of my application that has the problem and the datatips were still fine. Then I took the exact same code from the new test project I created and I turned it into a module in the appliciton with the problem. When that module loaded it had the dark data tips. So it must also have something to do with being in a module. That is where I am experiencing all my problems with my other graphs.

[stickamw]

Hi Guys,

     I too am seeing this problem.  I am compiling using the 4.0 SDK with the Flex 3 Compat mode turned OFF.

     I am using the SWFLoader to load my mini-Apps into a main "Dashboard" app.  When I have ANY charts at all in these mini-apps, the background color on the dataTips is the dark translucent color.  In nearly all cases, I'm doing no special handling to the dataTips.

     Has anyone come upon the solution here?

Thanks,

Adrian

[em_volant]

Actually I just tested it with only a module loader. My app has a app(swf) loader that loads apps with module loaders. So I guess both loaders mess it up. My hack was to create a custom dat tip renderer as follows:

public class WhiteDataTip extends DataTip
{
   public function WhiteDataTip ()
   {
      super();
      this.setStyle("backgroundColor", '#FFFFFF');
   }
}

And then I set the data tip renderer on the graph. I had to do my dynamicaly so I did the following:

pieChart.setStyle("dataTipRenderer", InteroDataTip);

Where pieChart is the id of my pieChart.

[stickamw]

Thanks man!  That works perfectly!

Adrian

[Deeptika Gottipati]

I am not able to reproduce the issue using modules. Can you please attach a small sample with modules that reproduces the issue, to the bug http://bugs.adobe.com/jira/browse/FLEXDMV-2466

Thanks,

Deeptika

[stickamw]

I've added it to the bug as requested.  For you own perusal, here is the code that recreates the error.  This is using the 4.0 SDK with compatibility mode turned OFF.

SWFLoaderTTBug.mxml

<?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">

      <fx:Script>

            <![CDATA[

                  import mx.controls.SWFLoader;

            ]]>

      </fx:Script>

      <s:Group>

            <s:layout>

                  <s:VerticalLayout paddingBottom="15" paddingLeft="15" paddingRight="15" paddingTop="15" />

            </s:layout>

      <s:Label text="SWF Loader Tooltip Bug" fontSize="24" />

      <mx:SWFLoader id="testTableSWF"  source="ToBeLoadedApp.swf" />

      </s:Group> 

</s:Application>

***************************************************************************************************

ToBeLoadedApp.mxml

<?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">

      <s:layout>

            <s:VerticalLayout/>

      </s:layout>

      <fx:Script>

            <![CDATA[

                  import mx.collections.ArrayCollection;

                  private var tableData:ArrayCollection = new ArrayCollection(

                        [

                              {Month: "1", HighTemp: 32, LowTemp: 1},

                              {Month: "2", HighTemp: 41, LowTemp: 11},

                              {Month: "3", HighTemp: 47, LowTemp: 21},

                              {Month: "4", HighTemp: 60, LowTemp: 24},

                              {Month: "5", HighTemp: 63, LowTemp: 45},

                              {Month: "6", HighTemp: 70, LowTemp: 44},

                        ]);

            ]]>

      </fx:Script>

      <mx:BarChart id="testChart" dataProvider="{tableData}" showDataTips="true">

            <mx:verticalAxis>

                  <mx:CategoryAxis categoryField="Month"/>

            </mx:verticalAxis>

            <mx:series>

                  <mx:BarSeries

                        yField="Month"

                        xField="HighTemp"

                        displayName="Highest Temperature"/>

                  <mx:BarSeries

                        yField="Month"

                        xField="LowTemp"

                        displayName="Lowest Temperature"/>

            </mx:series>

      </mx:BarChart>

</s:Application>

[em_volant]

I signed up for a bug account a few days ago to put the code up there but I have yet to recieve my activation email. So here is the code for the module. It is basicaly the same as stickamw's code but with modules. I am using Flex 4.0 without 3.0 compatability mode.

*************** DatatipApp.mxml ******************

<?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">
    <mx:ModuleLoader width="100%" height="100%"
                     url="GraphModule.swf" />
</s:Application>

*************** GraphModule.mxml ******************

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute">
    <fx:Script>
        <![CDATA[
           
            import mx.collections.ArrayCollection;
           
            private var tableData:ArrayCollection = new ArrayCollection(
                [
                    {Month: "1", HighTemp: 32, LowTemp: 1},
                    {Month: "2", HighTemp: 41, LowTemp: 11},
                    {Month: "3", HighTemp: 47, LowTemp: 21},
                    {Month: "4", HighTemp: 60, LowTemp: 24},
                    {Month: "5", HighTemp: 63, LowTemp: 45},
                    {Month: "6", HighTemp: 70, LowTemp: 44},
                ]);
           
        ]]>
    </fx:Script>
   
    <mx:BarChart id="testChart" dataProvider="{tableData}" showDataTips="true">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="Month"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries
                yField="Month"
                xField="HighTemp"
                displayName="Highest Temperature"/>
            <mx:BarSeries
                yField="Month"
                xField="LowTemp"
                displayName="Lowest Temperature"/>
        </mx:series>
    </mx:BarChart>
</mx:Module>

[Deeptika Gottipati]

Hi,

Thanks for providing the samples. We are able to reproduce the issue.

We will log a bug and work on the fix.

Thanks,

Deeptika

[sudhirm]

Separate issue is logged for the ModuleLoader\SWFLoader problem http://bugs.adobe.com/jira/browse/FLEXDMV-2472 .

Thanks,

Sudhir