11 Replies Latest reply on Jul 12, 2010 4:21 AM by sudhirm

    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?

        • 1. Re: Graph/Chart datatip shows up with dark background and dark text
          Deeptika Gottipati Adobe Employee

          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

          • 3. Re: Graph/Chart datatip shows up with dark background and dark text
            em_volant Level 1

            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.

            • 4. Re: Graph/Chart datatip shows up with dark background and dark text
              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

              • 5. Re: Graph/Chart datatip shows up with dark background and dark text
                em_volant Level 1

                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.

                • 6. Re: Graph/Chart datatip shows up with dark background and dark text
                  stickamw Level 1

                  Thanks man!  That works perfectly!

                   

                  Adrian

                  • 7. Re: Graph/Chart datatip shows up with dark background and dark text
                    Deeptika Gottipati Adobe Employee

                    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

                    • 8. Re: Graph/Chart datatip shows up with dark background and dark text
                      stickamw Level 1

                      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>

                      • 9. Re: Graph/Chart datatip shows up with dark background and dark text
                        em_volant Level 1

                        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>

                        • 10. Re: Graph/Chart datatip shows up with dark background and dark text
                          Deeptika Gottipati Adobe Employee

                          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

                          • 11. Re: Graph/Chart datatip shows up with dark background and dark text
                            sudhirm

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

                             

                            Thanks,

                            Sudhir