Pie Chart with Legend

Hey Experts,
I have a small issue but cannot seem to find the solution. I have a pie chart with legends which I want to show side by side (horizontally). First pie chart and then legends. My requirement is that when the window is resized, the pie chart should also resize. I am able to show the chart and legends horizontally but when the legends list is long, the pie chart is always aligned in the center vertically. I tried setting all properties such as verticalAlign = "top", verticalCenter = "false", tried putting pie chart and legends in a separate VBox but nothing seems to work. Below is the code snippet.
I believe others would have faced this problem. Can someone help?
<mx:HBox width="100%" height="100%" verticalAlign="top" verticalCenter="false">
     <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
          <mx:PieChart id="pieChart" width="100%" height="100%" showDataTips="true" minWidth="200" minHeight="200" verticalCenter="false"/>
     </mx:VBox>
     <mx:VBox width="100%" verticalAlign="top" verticalCenter="false">
          <mx:Legend width="100%" height="100%" dataProvider="{pieChart}"/>
     </mx:VBox>
</mx:HBox>

Hi Dajji,
Here is the code which resolves the problem...
Note: In the code below I have removed the percentage width and height for PieChart.....that resolves the problem.....but the thing here is as you resize
your browser window the piechart width and height will not change accordingly...? Do you need PieChart to change its dimensions as your browser window
resizes...???
However if you specify width="100%" and height="100%" for PieChart you never gonna acheive the PieChart to be vertically alined to top.....why because
as you specified width="100%" and height="100%" for PieChart it occupies the total dimensions of the VBox but the actual visible portion dimensions are
less... because within the VBox you also have the legends so Flex will assign the sizes proportionately....for PieChart and Legends..
Hope you got my point...So you should remove the width="100%" and height="100%" for PieChart then you can acheive what you needed...
<?xml version="1.0"?>
<!-- Simple example to demonstrate the PieChart control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
    <mx:Script>
        <![CDATA[         
        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 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 },
            { 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 displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
            var temp:String= (" " + percentValue).substr(0,6);
            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
        ]]>
    </mx:Script>
    <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%" layout="horizontal" verticalAlign="top">
           <mx:VBox verticalAlign="top" height="100%" width="100%">
             <mx:PieChart id="chart"
                 showDataTips="true"
                 dataProvider="{medalsAC}">         
                 <mx:series>
                     <mx:PieSeries
                         nameField="Country"
                         field="Gold"
                         labelFunction="displayGold">
                     </mx:PieSeries>
                 </mx:series>
             </mx:PieChart> 
           </mx:VBox>                 
         <mx:Legend dataProvider="{chart}"/>
    </mx:Panel>
</mx:Application>
Thanks,
Bhasker Chari

Similar Messages

  • Pie chart with legend as a column

    Watch the Keynote '09 Video Tutorial "Create and Edit a Chart": http://www.apple.com/iwork/tutorials/#keynote-chart . A pie chart is shown where the legend appears as bullets arranged in a column. When I try to create a pie chart, the legend appears as bullets arranged in a row. How to switch the legend from a row format to a column format, as in the video?

    Hi Pion - I worked on those videos, so I've got your answer.
    You can select a chart's legend separately - click on it until you see bounding boxes just for the legend - then drag the left bounding box towards the right, and the numbers will become a column.
    Let's say you wanted that layout for future charts in that presentation. First arrange your legend as you would like it, then click once on the chart itself to select the chart (the legend will be de-selected - no problem). Then go to *Format - Advanced - Set Chart and Legend Geometry for All Masters*. The relationship between the legend and the cart will then stay the same.

  • Change colors in multiple pie chart - with legend

    I need to change the colors of groups shown in multiple pie chart diagram in CR XI.
    I managed to actually change the colors in the diagram by using highlighting rules in the wizard. (Sorry, I need to guess the correct English terms since I am using the German version.)
    But the colors in the legend are not affected by the rules, so the legend displays colors which are not shown in the diagrams at all. How can I fix this?
    Thanks in Advance
       Andreas

    Hi Andreas
    I have the same problem.
    I found this BO note:
    https://websmp230.sap-ag.de/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sno/ui_entry/entry.htm?param=69765F6D6F64653D3030312669765F7361706E6F7465735F6E756D6265723D3131383434373026
    I says that this behaviour is by design and cannot change
    Not what you would expect really! 
    If the series colour can be changed then why does the series marker colour not match the series it represents?
    Patrick

  • SSRS 2008: how to show an empty chart with legend and x and y axis when no data available

    Hi,
    I am using SSRS 2008, I generated one chart in report designer with the data from Analysis Services (Cube).
    According to the dataset, there is no data returned when I run the query. so when I preview the chart, there is nothing but "no data available" showing on the chart.
    Here I want to know is there any possible to show an empty chart with legend and x and y axis?
    If it is possible, can you tell me how can I make it?
    Best Regards.
    Connie Zhu

    Hi,
    When there is no data, the chart displays the message "no data available". But using a little work around, you can display an empty chart.
    Please find the below steps given to achieve this
    1. Create a new dataset using TSQL to return 1 row of data having the category field and value field set to 0. Add the fields that are necessary for the category fields, series fields and datafields.
       A simple example would be like
       SELECT 'abc' as Category, 0 as Amount
    2. Add a new chart, set the category field to 'Category' and set the data field to Amount from above dataset created in step 1.
    3. In the new chart, right click the category axis and select axis properties, Click on the labels tab, check on
    'Hide axis labels' and then click ok
    4. Now set the Visibility property of both the charts depending on the rows returned from your main dataset
       a. click on your main chart and set its Hidden property to :
    =iif(CountRows("MainDataSet"),false,true) 
       b. click on the new blank chart added and set its Hidden proprety to (the opposite) :
    =iif(CountRows("MainDataSet"),true,false) 
       Note : Please change the dataset name in above expression "MainDataset" to the name of your chart's dataset
    5. Resize the new chart to the same size as your main chart, then position the new chart on the place as the main chart.
       (Note : You can set the position of new chart to be same by copying the location property from the main chart) 
    6. Now run and observe the result. When there are no rows returned by your main dataset, the new chart (the blank chart) should be displayed.
    I've added a working sample of this kind of a report
    here.
    Hope this helps. Please feel free to discuss if you have any questions.
    Please click "Mark as Answer" if this resolves your problem or "Vote as Helpful" if you find it helpful.
    BH

  • Bubble Chart with legend changes axis dimensions according to labels length

    I have a Bubble Chart with legend on the right. Data are by series and  the series are set  dynamically with a  drop down combo which replace the content of each series from time to time.  Every time the series changes, also the name of the series changes and the legend on the right  shows the new series names. The problem is that also the x axis dimension changes according to the new labels size, so the bubble chart changes its axis width in relation to the labels length in the legend. Is its possible to make somehow the bubble chart axis of a fixed lenght?
    Xcelsius 2008, SP4, Windows XP
    Thanks in advance

    Hi Matt,
    I just got a chance to try out your suggestions, and the
    chart that is right in the main application renders the labels
    fine, but the exact same code loaded in as a module doesn't. And it
    never does, not even if the scale changes. Do you know why that
    would be?
    Mukul

  • Pie chart with two measures and date dimension navigation not working

    Hi Experts,
    Pie chart with two measures and date dimension navigation not working. Any help is appreciated.
    Thanks
    V

    Hi Deepak,
    I had time dimension in the RPD.
    I have stacked bar chart with same time dim like year & month in the report. when I go to legand and set navigation it is working fine. But not with pie chart.
    I am not not sure what is the problem. When I click on Pie chart it is not navigating to the target report. Can it be any other issues..???

  • Pie chart with NULL values

    I have a report(pie chart) with year, State, Category(Electronics,Home Appliances, Grocery) and % profit margin. The requirement is in a state if any of the categories is NULL the other two should become null as well for that state so that the whole pie chart will disappear. For example if electronics profit margin is NULL for a chosen state then Home appliances and Grocery profit margin should become null for that state as well. Can anyone please advise how this can be accomplished.
    Thanks
    R
    Edited by: user1146711 on Jul 13, 2012 11:37 AM

    user1146711 wrote:
    I have a report(pie chart) with year, State, Category(Electronics,Home Appliances, Grocery) and % profit margin. The requirement is in a state if any of the categories is NULL the other two should become null as well for that state so that the whole pie chart will disappear. For example if electronics profit margin is NULL for a chosen state then Home appliances and Grocery profit margin should become null for that state as well. Can anyone please advise how this can be accomplished.
    Thanks
    R
    Edited by: user1146711 on Jul 13, 2012 11:37 AMTry this:
    --1) In addition to your mentioned columns, add 4 more "% profit margin" columns. (I am assuming this is a measures column.)--
    --2) In each of the first 3 columns, click on the fx button, then on the Filters button and create a column filter "where category = 'Electronics' for the 1st column, "where category = 'Home Applicances' for the second column, etc...--
    Each of the 3 columns in step 2 will contain the measure for the specific category, for the given year, some of which may be NULL according to your data.
    --3) In the 4th dummy column, make it a concatenation of the prevous 3 columns.--
    Because this is a concatenation, if any of the previous 3 columns are NULL, the sum will also be NULL. Make sense?
    --4) Then finally, put a filter on the 4th column, "Is not Null."--
    Now if any of the individual categories has a null, the whole state will be eliminated from your report. Hide the 4 columns. That's it.
    The above won't work as the values of every row will have NULLs due to the way I said to build the report.
    Okay, try this:
    1) Build a small report with Year, State, SUM(% Profit Margin) and a concatenated column Year-State.
    2) Put a filter on the SUM(% Profit Margin) column "Is Not Null."
    If there are NULLS in any of the four categories, because your database does not substitute a 0, then the sum will be Null and there won't be a row that corresponds to that Year and State. The only rows that should appear in this report are those states for the year, that had a value in all 4 categories. The last column, Year-State will be unique and be the identifier.
    3) Now build your main report with all your normal columns (Year, State, Category, % Profit Margin) and add a hidden column that is the concatenation of Year-State.
    4) On the Year-State column, put a filter "based on another request" and point it to the "Year-State" column of the small report.
    This should produce only rows where all 4 categories had a value in it for the given year.
    Edited by: David_T on Jul 14, 2012 7:49 AM
    Edited by: David_T on Jul 16, 2012 2:48 PM

  • Printing chart with legend type "DATATABLE" only shows graph.

    Hi All,
    We are running BI 7.01, distributing webtemplates via the Portal.
    When a report contains a chart with Legend Type "DATATABLE", the table under the graph does not get printed when creating a PdF print. The report output shows the data fine. How can I get these DATATABLE legends to become visible when printing in PDF?
    Thanks,
    Eduard

    Thanks for the quick reply.
    Isn't this an Adobe/Portal related phenomenon? The 3.5 version of the same report works fine and it uses the same IGS. I thought the IGS was only needed for rendering the graph to display on screen, but is it also needed to create a PDF? I figured that once the output is on screen, the IGS's work is done. Or am I totally off here?
    Thanks,
    Eduard

  • Pie Chart with Portal 3.0.8.9.8

    I have two portal installations, one with version 3.0.8.9.8 and the other with version 3.0.9.8.0. I have enabled the beta feature "Image Charts From Query Wizard" on both installations. I can successfully create and display a pie chart on the newer version (3.0.9.8). However, on the earlier version (3.0.8.9.8), I can only create the pie chart but it does not display. That is to say, the pie chart creation is successful, but when I run it, it times out and never displays the pie chart. Has anyone experienced problems displaying a pie chart with 3.0.8.9.8? I need to create one on this older installation since it is the version my client is using.
    Thanks,
    Kendra

    Do you have any logged error in jserv.log. Can you isolate the action of running the chart in 3.0.8.9.8 and find out corresponsing logging messages in jserv.log and error.log.

  • Pie chart With one value

    Hello Experts,
    I am new to apex.
    I want to plot a pie chart with only one value.
    that one value should look like a one slice in the pie chart.
    I tried it, but it showing as entire pie chart as one value.
    So Please help me in this regard.
    Its very urgent.
    Please.

    Hi,
    Try creating the entire chart using custom XML and PL-SQL, it will give you full control over the sql and xml . Take look at this thread Re: Help Needed : Changing the Color of Bar Graph Dynamically , Change the data_plot_settings to line and you can refer to the http://www.anychart.com/products/anychart/docs/xmlReference/index.html for more detail on the tags and syntax. Thanks.
    Regards,
    Manish

  • Pie chart with resizable slice ?

    Hello All,
    Is it possible to create a pie chart with re-sizable slice.. ie user should be able to decrease  and increase  the area of any slice by just using mouse drag. If I increase area of any particular slice, other adjacent slice should automatically get reduced.  Please provide me some pointers on this .
    Regards,
    Dharmendra

    Hi Deepak,
    I had time dimension in the RPD.
    I have stacked bar chart with same time dim like year & month in the report. when I go to legand and set navigation it is working fine. But not with pie chart.
    I am not not sure what is the problem. When I click on Pie chart it is not navigating to the target report. Can it be any other issues..???

  • Pie chart with Quartz 2D,

    Hi!
    I'm trying to create a pie chart with Quartz 2D, can't find out how to do it, maybe anyone can point me in the right direction?
    Thanks really much for your help!

    I'm going to start the same task, I'm just reading the quartz 2d guide, but I'm thinking you can draw semicircles paths transforming the % of your data in angles, then creating paths from the end of the semicircle to the center of the circunference. sounds good for you? any comments? how was your approach?

  • Create Multiple Pie Charts with Drill Down capability(foreach in mainreport

    Hello All,
    i need to create a report with 4 pie charts, which should have drilldown capability. i tried to do that, and i can do only for two charts. i need for the rest 2 also.
    Please help.
    Thanks

    See this thread:
    BO Design studio Chart Component issue ...!! | SCN
    If Chart is bound to DS_1 and On Select event of chart is as below:
    DS_2.setFilter(dimension, CHART_1.getSelectedMember(dimension));"
    This works when you click a value on one chart it will select another.
    I haven't tried it with hierarchies.

  • Pie Chart and legend symbols

    Hi forum,
    who can help me to customize legend symbols in pie chart?
    Thanks in advanced

    Look at the last lines in caspian.css
    .pie-legend-symbol.chart-pie {
        -fx-background-radius: 8px;
        -fx-padding: 8px;
        -fx-border-color: null;
    }You can provide your own css for pie-legend-symbol.chart-pie to style the symbol how you like.
    If you need more control, do a css lookup after the chart has been shown on the stage:
    Set<Node> items = chart.lookupAll("Label.chart-legend-item");
    int i = 0;
    // these colors came from caspian.css .default-color0..4.chart-pie
    Color[] colors = { Color.web("#f9d900"), Color.web("#a9e200"), Color.web("#22bad9"), Color.web("#0181e2"), Color.web("#2f357f") };
    for (Node item : items) {
      Label label = (Label) item;
      final Rectangle rectangle = new Rectangle(10, 10, colors);
    final Glow niceEffect = new Glow();
    niceEffect.setInput(new Reflection());
    rectangle.setEffect(niceEffect);
    label.setGraphic(rectangle);
    i++;
    Here is a full example: https://gist.github.com/1422628                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

  • XSL for a Pie chart with a very simple XML data file

    Hi All
    Using BI Pub Desktop 10.1.3.2.1 with Oracle Apps R12.1.3.
    I am trying to do a pie chart for the below data in an xml file. Normally this is pretty straight forward but with the below simple data structure I am a bit stuck, maybe thinking about it too much. Appreciate any help on what the xsl should like.
    xml file contains only the below. There is no other data in the file.
    <G2>
    <ITEM>ALL</ITEM>
    <AA>10</AA>
    <BB>20</BB>
    <CC>50</CC>
    <DD>30</DD>
    </G2>
    I want to be able to have a pie chart that shows the labels: AA, BB, CC and DD with the corresponding data values of 10,20,50 and 30.
    Thanks for viewing the question.
    Cheers Cel

    Please disregard. i went back to the original blog code and started over, and figured this out.

Maybe you are looking for