[FIXED] [#1646] Highlight a slice of pie chart programmatically

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [#1646] Highlight a slice of pie chart programmatically

    Hi ,

    Is there a way to highlight / break out a slice of a pie chart programmatically?

    Thank you,
    Vamsi.
    Last edited by fabricio.murta; Jan 30, 2020 at 9:02 PM.
  2. #2
    Hello @Vamsi!

    You have the Ext.chart.AbstractChart.setHighlightItem() method to do so. There's an example using it in a bar chart: Combination Chart Samples > Dashboard.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi,

    I tried as you mentioned method setHighlightItem, but no luck.

    Thank you,
    Vamsi.
  4. #4
    Hello @Vamsi!

    Maybe the example is a little too complex and involves more than is necessary for you to understand the concept. Please share a test case showing your basic scenario, and how you're trying to do so.

    Then from that, we'll be able to pinpoint what's left for your objective to be attained. I believe that would be a sure-shot to allow us to properly help you, with something closer to what you need.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Sir,

    I have to push out the slice of pie chart programmatically as shown in attached image like popup April slice

    Here is my code:
    <%@ Page Language="C#" %>
    
    <script runat="server">
        public List<object> Data
        {
            get
            {
                return new List<object>
                {
                    new { Month = "Jan", Data = 0 },
                    new { Month = "Feb", Data = 20 },
                    new { Month = "Mar", Data = 0 },
                    new { Month = "Apr", Data = 18},
                    new { Month = "May", Data = 18},
                    new { Month = "Jun", Data = 0},
                    new { Month = "Jul", Data = 16},
                    new { Month = "Aug", Data = 1},
                    new { Month = "Sep", Data = 16},
                    new { Month = "Oct", Data = 16},
                    new { Month = "Nov", Data = 15},
                    new { Month = "Dec", Data = 1}
                };
            }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.X.Js.Call("Sliceout");
        }
    </script>
    <script>
        function Sliceout() {
            
            App.Chart1.setHighlightItem("Apr");
        }
    </script>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Stacked Bar Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Pie Bar Chart Sample</h1>
    
            <ext:Container
                runat="server"
                Width="800"
                Height="500"
                Layout="FitLayout">
                <Items>
                    <ext:PolarChart
                        ID="Chart1"
                        runat="server" FlipXY="true">
                        <Store>
                            <ext:Store runat="server" Data="<%# Data %>" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Dock="bottom" runat="server" />
                        <Interactions>
                            <ext:ItemHighlightInteraction />
                            <ext:RotateInteraction />
                        </Interactions>
                        <Series>
                            <ext:PieSeries
                                AngleField="Data"
                                ShowInLegend="true"
                                Donut="0"
                                HighlightMargin="20">
                                <Label Field="Month" Display="Rotate" FontSize="18" FontFamily="Arial" />
                            </ext:PieSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
    Thank you,
    Vamsi.
    Attached Thumbnails Click image for larger version. 

Name:	Sliceout.png 
Views:	69 
Size:	31.8 KB 
ID:	25265  
  6. #6
    Hello @Vamsi!

    Thanks for providing the test case. It seems you weren't sure how to get the item to be highlighted in the charts? Just providing "Apr" is very very misleading (for the application) as there are so many places to look for it. Besides, in the documentation, it says the parameter "must be the one that you get from item events". Which well, I agree does not help much.

    In turn, the example using it suggests how you can get that given a record. Well again, in a misleading way, because it names the record as storeItem (this is the exact location in the example pointed in our last post). While a record is an item within a store, this makes a little harder to infer we're talking about store records there.

    Now, knowing that what we need is a record from the chart store, all that's left is just a App.Chart1.getStore().findRecord("Month", "Apr"), and voila, puzzle solved!

    Still confused? Here's how a working version of your client-side method would look like:

    function Sliceout() {
        var chart = App.Chart1,
            store = chart.getStore(),
            record = store.findRecord("Month", "Apr"),
            record_id = store.indexOf(record),
            series = chart.getSeries()[0],
            series_item = series.getItemByIndex(record_id);
    
        chart.setHighlightItem(series_item);
    }
    And that's about it! Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Thank you for quick reply and now working as expected for normal pie chart.

    But there was an issue with 3D pie chart is not working with above code. Is there any code changes required in 3D pie chart.

    Thank you,
    Vamsi.
  8. #8
    Sir,Waiting for your reply.

    Thank you,
    Vamsi.
  9. #9
    Hello @Vamsi!

    Sorry for the delay, I am just posting to let you know I'm looking at the issue right away. Hopefully will post back again soon.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hello again, @vamsi!

    Unfortunately the setHighlightItem() method is broken for the pie 3d series. The slice retrieved via mouse pointer (which is correctly highlighted) does not match the one the getItemByIndex() returns.

    I couldn't find a simple override to make it work the way it is now, we'd needed to log this as an issue. We've then logged the issue after #1646 in github and will post a follow-up here as soon as we have the issue logged.

    We've elaborated on the test case you provided with the pie3d (side by side with a 2d one). The reviewed test case illustrating the exact problem is in the github issue pointed above.

    Hope you understand. Again, we're going to post a follow-up here as soon as we get the issue fixed, but we don't really have exactly when that'd happen.
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Sep 13, 2016, 5:19 AM
  2. [CLOSED] How to change individual slice pie color
    By Oliver in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 30, 2015, 12:11 PM
  3. Replies: 19
    Last Post: Dec 19, 2012, 2:24 PM
  4. Pie chart example
    By Gamerome in forum 2.x Help
    Replies: 2
    Last Post: Sep 09, 2012, 7:17 PM
  5. [CLOSED] Highlight a slice of pie chart programmatically
    By jchau in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 12, 2012, 12:23 PM

Posting Permissions