4 Replies Latest reply on Aug 15, 2011 1:22 PM by Jimmi Prajapapati

    Flex 3 to Flex 4 migration issue (Flex charting and Special char)

    Jimmi Prajapapati

      Hi All,

       

      I have migrated Flex 3 to Flex 4 and in Flex charting axis label, I am not able to see less then sign ( < ). I tried to use &lt;  but it's not working, I have attached sample code.

       

       

      <?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" initialize="init()">
          
           <fx:Declarations>
              
               <s:SolidColor id="s1" color="#738994"/>
              
               <mx:SeriesInterpolate id="seriesInterpolate" duration="800"/>
              
               <mx:SeriesSlide id="seriesSlide" duration="800" direction="up"/>
              
               <mx:SeriesZoom id="seriesZoom"
                             
                              duration="1000"
                             
                              minimumElementDuration="50"
                             
                              elementOffset="50"
                             
                              verticalFocus="top"
                             
                              horizontalFocus="left"
                             
                              relativeTo="chart"/>
              
           </fx:Declarations>
          
           <fx:Script>

       

              <![CDATA[
                  
                   import mx.collections.ArrayCollection;
                  
                   [Bindable]
                  
                   public var student:ArrayCollection = new ArrayCollection([
                      
                       {Stream: "Management", Girls:1000, Boys:1400, TotalStudent:2400},
                      
                       {Stream: "&lt;Computer Science", Girls:800, Boys:1200, TotalStudent:2000},
                      
                       {Stream: "< Mechanical", Girls:200, Boys:1500, TotalStudent:1700},
                      
                       {Stream: "> Electical", Girls:800, Boys:850, TotalStudent:1650},
                      
                       {Stream: "Electronics", Girls:500, Boys:1000, TotalStudent:1500},
                      
                       {Stream: "Civil", Girls:300, Boys:900, TotalStudent:1200}
                      
                   ]);
                  
                   private function update():void {
                      
                       var str:String = catfDP.selectedItem.data;
                      
                       if(str == "Girls"){
                          
                           cs1.yField = str;
                          
                           cs1.displayName = str;
                          
                           cs1.setStyle("fill" , "738994");
                          
                       }else if(str == "Boys"){
                          
                           cs1.yField = str;
                          
                           cs1.displayName = str;
                          
                           cs1.setStyle("fill" , "999990");
                          
                       }else{
                          
                           cs1.yField = str;
                          
                           cs1.displayName = str;
                          
                           cs1.setStyle("fill" , "406374");
                          
                       }
                      
                   }
                  
                   private function init():void{
                      
                       catfDP.selectedIndex= 0;
                      
                       effectDP.selectedIndex= 0;
                      
                   }
                  
               ]]>
              
           </fx:Script>
          
           <s:Panel title="Chart Effect Example" width="627" height="565">
              
               <s:layout>
                  
                   <s:VerticalLayout/>
                  
               </s:layout>
              
               <mx:ApplicationControlBar dock="true" width="625" height="82">
                  
                   <mx:Form>
                      
                       <mx:FormItem label="Category Field:">
                          
                           <s:DropDownList id="catfDP" change="update();" prompt="--Select--" width="136"
                                          
                                           height="19">
                              
                               <s:dataProvider>
                                  
                                   <mx:ArrayList>
                                      
                                       <fx:Object data="Girls" label="Girls" />
                                      
                                       <fx:Object data="Boys" label="Boys" />
                                      
                                       <fx:Object data="TotalStudent" label="TotalStudent" />
                                      
                                   </mx:ArrayList>
                                  
                               </s:dataProvider>
                              
                           </s:DropDownList>
                          
                       </mx:FormItem>
                      
                       <mx:FormItem label="Choose Chart Effect:">
                          
                           <s:DropDownList id="effectDP" change="update();" width="136" prompt="--Select--">
                              
                               <s:dataProvider>
                                  
                                   <mx:ArrayList>
                                      
                                       <fx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
                                      
                                       <fx:Object label="seriesSlide" data="{seriesSlide}" />
                                      
                                       <fx:Object label="seriesZoom" data="{seriesZoom}" />
                                      
                                   </mx:ArrayList>
                                  
                               </s:dataProvider>
                              
                           </s:DropDownList>
                          
                       </mx:FormItem>
                      
                   </mx:Form>
                  
               </mx:ApplicationControlBar>
              
               <mx:ColumnChart id="cchart"
                              
                               dataProvider="{student}"
                              
                               showDataTips="true"
                              
                               width="621"
                              
                               fontFamily="verdana" height="402">
                  
                   <mx:verticalAxis>
                      
                       <mx:LinearAxis title="Number of Students" />
                      
                   </mx:verticalAxis>
                  
                   <mx:horizontalAxis>
                      
                       <mx:CategoryAxis dataProvider="{student}"
                                       
                                        categoryField="Stream"
                                       
                                        title="Stream"/>
                      
                   </mx:horizontalAxis>
                  
                   <mx:series>
                      
                       <mx:ColumnSeries id="cs1"
                                       
                                        xField="Stream"
                                       
                                        yField="Girls"
                                       
                                        displayName="Girls"
                                       
                                        fill="{s1}"
                                       
                                        showDataEffect="{effectDP.selectedItem.data}"/>
                      
                   </mx:series>
                  
               </mx:ColumnChart>
              
               <s:HGroup>
                  
                   <mx:Legend dataProvider="{cchart}"
                             
                              direction="horizontal"/>
                  
                   <s:VGroup>
                      
                   </s:VGroup>
                  
               </s:HGroup>
              
           </s:Panel>
          
      </s:Application>

        • 1. Re: Flex 3 to Flex 4 migration issue (Flex charting and Special char)
          Flex harUI Adobe Employee

          You are in a CDATA block so you should be able to just use "<".  Did that

          not work?

          • 2. Re: Flex 3 to Flex 4 migration issue (Flex charting and Special char)
            Jimmi Prajapapati Level 1

            I tried to use  ( < ), but when I use this sign , Label is not dispay at all. It was working fine with Flex 3.5 sdk.

            • 3. Re: Flex 3 to Flex 4 migration issue (Flex charting and Special char)
              Flex harUI Adobe Employee

              Looks like the default label changes to be Spark Label in the Spark theme

              that doesn't support html labels.  You can switch themes or use the

              following to use mx:Label or create a custom renderer

               

                          <mx:horizontalAxis>

                               

                              <mx:CategoryAxis id="haxis"

                                  

                                               dataProvider=""

                                  

                                               categoryField="Stream"

                                  

                                               title="Stream"/>

                               

                          </mx:horizontalAxis>

                           

                          <mx:horizontalAxisRenderers>

                              <mx:AxisRenderer axis=""

              labelClass="mx.controls.Label" />

                          </mx:horizontalAxisRenderers

              1 person found this helpful
              • 4. Re: Flex 3 to Flex 4 migration issue (Flex charting and Special char)
                Jimmi Prajapapati Level 1

                Thank you very much for you answer.

                 

                I have solved this problem using Itemrenderer.

                 

                 

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                autoDrawBackground="true">
                   
                    <mx:Label htmlText="{data.text}"/>
                   
                </s:ItemRenderer>

                 

                 

                and in chart I have used labelRenderer. in label I have used  &lt; for ( < ) sign.

                 

                <mx:horizontalAxis>
                                <mx:CategoryAxis
                                    dataProvider="{expenses}"
                                    categoryField="Month"
                                    title="FY 2006"
                                    id="a1"
                                    />
                            </mx:horizontalAxis>
                           
                            <mx:horizontalAxisRenderers>
                                <mx:AxisRenderer labelRotation="45" axis="{a1}" labelRenderer="chase.BarChartLabelRenderer"/>
                            </mx:horizontalAxisRenderers>
                            <mx:verticalAxisRenderers>
                                <mx:AxisRenderer labelRotation="45" axis="{a1}" labelRenderer="chase.BarChartLabelRenderer"/>
                            </mx:verticalAxisRenderers>