15 Replies Latest reply on Jan 3, 2011 9:10 AM by Slim222

    Chart Y-Axis values don't print

    em_volant

      I am using FlexPrintJob to print a chart that I have generated. I do this by grabing the UIComponent that contains the graph, its title, and its legend and I send it to the FlexPrintJob. Everything prints fine except that the Y-Axis values (which appear on the screen and on an image when I export it). Even the X-Axis values print. Infact, the Y-Axis label prints fine. Any ideas?

        • 1. Re: Chart Y-Axis values don't print
          BhaskerChari Level 4

          Hi em_volant,

           

          Can you please post the sample code reproducing your problem???

           

          Thanks,

          Bhasker Chari

          • 2. Re: Chart Y-Axis values don't print
            em_volant Level 1

            Here is the method I use to print.

             

            private function doPrint(obj:UIComponent):void
            {
               var job:FlexPrintJob = new FlexPrintJob();
                           
               job.printAsBitmap = false;
                           
               if (job.start() != true) return;
               job.printAsBitmap = false;
                           
               job.addObject(obj, FlexPrintJobScaleType.SHOW_ALL);
                           
               job.send();

            }

             

            Unless there is some setting for "don't print y-axis" then I think this is a bug. Seems like someone else had the same issue (http://forums.adobe.com/message/2374674#2374674)

             

            I would include the code for the chart but it is dynamicaly generated now and is very large. But you can use a basic chart and it will do the same thing. I was using a columnchart.

            • 3. Re: Chart Y-Axis values don't print
              BhaskerChari Level 4

              Hi em volant,

               

              I have tested the sample by taking a coulmn chart and tried to print the chart in my case it is printing fine...including the y-axis labels.

               

              I have used the below code:

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                  <mx:Script>
                      <![CDATA[
                       import mx.printing.FlexPrintJobScaleType;
                       import mx.core.UIComponent;
                       import mx.printing.FlexPrintJob;         
                      import mx.collections.ArrayCollection;

                      [Bindable]
                      private var medalsAC:ArrayCollection = new ArrayCollection( [
                          { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                          { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
                         
                      private function doPrint(obj:UIComponent):void
                {
                   var job:FlexPrintJob = new FlexPrintJob();
                               
                   job.printAsBitmap = false;
                               
                   if (job.start() != true) return;
                   job.printAsBitmap = false;
                               
                   job.addObject(obj, FlexPrintJobScaleType.SHOW_ALL);
                               
                   job.send();
               
                }
                      
                      ]]>
                  </mx:Script>

                  <!-- Define custom colors for use as fills. -->
                  <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
                  <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
                  <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>

                  <!-- Define custom Strokes for the columns. -->
                  <mx:Stroke id="s1" color="yellow" weight="2"/>
                  <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
                  <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>

                  <mx:Panel title="ColumnChart and BarChart Controls Example"
                      height="100%" width="100%" layout="horizontal">
                      <mx:ColumnChart id="column"
                          height="100%"
                          width="30%"
                          paddingLeft="5"
                          paddingRight="5"
                          showDataTips="true"
                          dataProvider="{medalsAC}"
                      >               
                          <mx:horizontalAxis>
                              <mx:CategoryAxis categoryField="Country"/>
                          </mx:horizontalAxis>
                             
                          <mx:series>
                              <mx:ColumnSeries
                                  xField="Country"
                                  yField="Gold"
                                  displayName="Gold"
                                  fill="{sc1}"
                                  stroke="{s1}"
                              />
                              <mx:ColumnSeries
                                  xField="Country"
                                  yField="Silver"
                                  displayName="Silver"
                                  fill="{sc2}"
                                  stroke="{s2}"
                              />
                              <mx:ColumnSeries
                                  xField="Country"
                                  yField="Bronze"
                                  displayName="Bronze"
                                  fill="{sc3}"
                                  stroke="{s3}"
                              />
                          </mx:series>
                      </mx:ColumnChart>

                      <mx:Legend dataProvider="{column}"/>
                <mx:Button label="Print Chart" click="doPrint(column);"/>
                  </mx:Panel>
              </mx:Application>

               

              Also find the screenshot of the print that I have taken..

               

              Thanks,

              Bhasker Chari

               

              chartprint.JPG

              • 4. Re: Chart Y-Axis values don't print
                em_volant Level 1

                I created a new project, took your exact code, and then tested it out and it still didn't print the y-axis values. Maybe it is some project setting?

                 

                My compiler settings are as follows:

                Use default SDK (currently "Flex 4.0")

                Use minimum version required by the Flex SDK

                and I am not using Flex 3 compatibility mode.


                What are you using. Any ideas?

                • 5. Re: Chart Y-Axis values don't print
                  BhaskerChari Level 4

                  Hi,

                   

                  I am using Flex3...

                   

                  I think another option you can try is take a screen shot of the chart by using the ImageSnap shot class and try to print this instead of printing the chart directly.

                   

                  Check out this link for you reference..

                   

                  http://blog.flexexamples.com/2007/11/17/taking-screenshots-in-flex-3-using-the-imagesnapsh otcapturebitmapdata-method/

                   

                  Thanks,

                  Bhasker Chari

                  1 person found this helpful
                  • 6. Re: Chart Y-Axis values don't print
                    em_volant Level 1

                     

                     

                    I tried what you said and it works but the print quality of the text drops drastically compared to the clean text that the normal print has. I think this is because the text is embedded in the image and they are not printed using the native fonts of the printer or OS. IDK, any ideas for making it functional and legible?

                    • 7. Re: Chart Y-Axis values don't print
                      rtalton Level 4

                      em_volant wrote:

                       

                      Infact, the Y-Axis label prints fine. Any ideas?


                      Is it the Y Axis data labels which are not printing?

                      Are you using embedded fonts?

                      Are you using Runtime Shared libraries?

                      • 8. Re: Chart Y-Axis values don't print
                        em_volant Level 1

                        The title for the Y-Axis is displaying. The tick values on the Y-Axis are not displaying. The tick values are automaticly generated by the ColumnChart. In my case, it goes from 0 to 100 and increment by 20. The Y-Axis is for percents. Since the text is not created by me I can't say what type it is. I use RSLs but this part of the program is not one.

                        -erik

                        • 9. Re: Chart Y-Axis values don't print
                          rtalton Level 4

                          Can you post the code for this chart?

                          • 10. Re: Chart Y-Axis values don't print
                            em_volant Level 1

                            It is dynamicaly generated so I cant. Also I can create any column/line chart in flex 4 in a brand new project and it will give me the same problem.

                            -erik

                            • 11. Re: Chart Y-Axis values don't print
                              rtalton Level 4

                              Maybe you can post a screen shot of the chart, and circle the problem area?

                              • 12. Re: Chart Y-Axis values don't print
                                em_volant Level 1

                                The y-axis tick values (0, 20, 240, 60 ,80 100) don't show up when it prints.

                                report.png

                                • 13. Re: Chart Y-Axis values don't print
                                  em_volant Level 1

                                  click on the image and it will come up clear. Not sure why it is black...


                                  • 14. Re: Chart Y-Axis values don't print
                                    em_volant Level 1

                                    So I figured out a "work around" (hack) that does the trick. Since I know that my y-axis values will allways be 0, 20, 40, 60, 80, 100 I decided to recreate the y-axis values myself as follows:

                                     

                                    <s:VGroup height="{barYAxisHeight}" top="24" left="20" horizontalAlign="right" visible="{printing}">
                                       <s:Group height="100%">
                                          <s:Label text="100" />
                                       </s:Group>
                                       <s:Group height="100%">
                                          <s:Label text="80" />
                                       </s:Group>
                                       <s:Group height="100%">
                                          <s:Label text="60" />
                                       </s:Group>
                                       <s:Group height="100%">
                                          <s:Label text="40" />
                                       </s:Group>
                                       <s:Group height="100%">
                                          <s:Label text="20" />
                                       </s:Group>
                                       <s:Group>
                                          <s:Label text="0"/>
                                       </s:Group>
                                    </s:VGroup>
                                    

                                     

                                    This code exists in the same container as my graph and legend. I bind its visibility to a variable that I set to true right before adding the graph component to the print job and set to false right after it is added. The height is bound to a variable that I set when i print as follows:

                                     

                                    private function doPrint(source:UIComponent):void
                                    {
                                         barYAxisHeight = GridLines(barGraph.backgroundElements[0]).height + 9;
                                                        
                                         var job:FlexPrintJob = new FlexPrintJob();
                                                        
                                         job.printAsBitmap = false;
                                                        
                                         if (job.start() != true) return;
                                                        
                                         printing = true;
                                         job.addObject(source, FlexPrintJobScaleType.SHOW_ALL);
                                         printing = false;
                                                        
                                         job.send();
                                    }
                                    

                                     

                                    The print is seamless and prints the labels right where they should be, given that you line everything up correctly. This wont work if you don't know what your tick values should be. I'd like someone to fix this bug and not have to do such a lame hack...but it gets the job done.

                                     

                                    So if anyone comes up with a better mothod (or fixes the issue) then please let me know!

                                    • 15. Re: Chart Y-Axis values don't print
                                      Slim222

                                      Hi Everyone,

                                       

                                      I found that the problem is not the code, but with what SDK version that you use.  I filed a bug with Adobe and you can monitor any progress that they make by checking the link below.  Basically for SDK 3,0 it's fine, but  the y-axis disppears in SDK 3.4 and 3.5.  For SDK 4.5 it's working again according to Adobe.

                                       

                                      http://bugs.adobe.com/jira/browse/FLEXDMV-2538