[CLOSED] How to change individual slice pie color

  1. #1

    [CLOSED] How to change individual slice pie color

    Hello,

    I'd like to change the color of slices from pie chart, based on their data.

    I saw the example in link http://examples2.ext.net/#/Chart/Pie/Pie_Renderer/ and I need to change the function segmentRenderer to change color, but it didn't work well.

    <%@ Page Language="C#" Culture="en-CA" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        public List<object> Data
        {
            get
            {
                return new List<object>
                {
                    new {Name = "On Time", Data1 = 50 },
                    new {Name = "Delayed", Data1 = 20 },
                    new {Name = "Another", Data1 = 30 },
                };
            }
        }
    </script>    
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Pie Chart - Ext.NET Examples</title>
        <%--<link href="/resources/css/examples.css" rel="stylesheet" />--%>
        
        <script>
            var tipRenderer = function (storeItem, item) {
                //calculate percentage.
                var total = 0;
    
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('Data1');
                });
                
                this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
            };
    
            function segmentRenderer(sprite, record, attr, index, store) {
                if (record.get('Name') == 'On Time') { color = "green" };
                if (record.get('Name') == 'Delayed') { color = "red" };
                if (record.get('Name') == 'Another') { color = "blue" };
    
    
                return Ext.apply(attr, {
                    fill: color
                });
            };
    
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Pie Chart Example</h1>
    
            <ext:Panel
                runat="server"
                Width="800"
                Height="600"
                Title=""
                Layout="FitLayout">
                <Items>
                    <ext:Chart ID="Chart1" runat="server" Animate="false" Shadow="true" InsetPadding="60" 
                        Theme="Base:gradients">
                        <LegendConfig Position="Right" />
                        <Store>
                            <ext:Store ID="Store1" runat="server" Data="<%# Data %>">
                                <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Series>
                            <ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="30" Highlight="true"
                                HighlightSegmentMargin="20">
                                <Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
                                <Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28">
                                    <Renderer Fn="tipRenderer" />
                                </Tips>
                                <Renderer Fn="segmentRenderer" />
                            </ext:PieSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>    
    </body>
    </html>
    Please, could you help me to make this work.

    thanks,

    Oliver
    Last edited by Daniil; Jan 30, 2015 at 1:16 PM. Reason: [CLOSED]
  2. #2
    Hello,

    Change your colors to Hexadecimal RGB notation and everything will work. :)

    Look at this snippet of your own code:
                if (record.get('Name') == 'On Time') { color = "#00ff00" };
                if (record.get('Name') == 'Delayed') { color = "#ff0000" };
                if (record.get('Name') == 'Another') { color = "#0000ff" };
    That's all I needed to change in order to make your sample work. :)
    Last edited by fabricio.murta; Jan 26, 2015 at 8:18 PM.
  3. #3
    Hi,

    Thanks avenger, it works, the only problem is that the legend remain with the original colors of the chart, but the main problem was solved.

    Thanks :)

    Oliver
  4. #4
    There you go!

            var tipRenderer = function (storeItem, item) {
                //calculate percentage.
                var total = 0;
    
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('Data1');
                });
                
                var tipLabel = "";
                tipLabel = storeItem.get('Name');
                var color='tan';
                if (tipLabel == 'On Time') color='green';
                else if (tipLabel == 'Delayed') color='red';
                else if (tipLabel == 'Another') color='blue';
    
                if (this.el)
                    this.el.setStyle('background', color);
                else
                    this.style = 'background: ' + color;
    
                this.setTitle(tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
            };
    ;)

    (yes, that was not easy, you got a good point for not sorting this so easily!)
    Last edited by geoffrey.mcgill; Jan 30, 2015 at 6:35 AM.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabricio, thanks for reply.

    The code works perfectly to show Tip renderer with the correct colors changed, but the problem is with the colors of the legend. I'm using the property ShowInLegend="true" and the colors are not correct.

    Please if you know how to fix this, give me an example.

    Thanks in advance.

    OliverClick image for larger version. 

Name:	chartExample.png 
Views:	6 
Size:	67.8 KB 
ID:	19581
    Attached Thumbnails chartExample.jpg  
  6. #6
    There is no way to fix the legend colors?

    Thanks!

    Oliver
  7. #7
    Hello, sorry for the delay.

    You can get another approach if you want to sync the pie colors with the legend at ease. But you will still have to track the color for the tip, as it is usually a single color all the time.

    Look at the code below. Notice that I've removed the segmentRenderer, and now I am setting the color sequence in the colorSet parameter to ext:PieSeries.

    After setting the color sequence on colorSet I just load the page and experiment to see which color I should bind to the tipRenderer function in order to have a match.

    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Pie Chart - Ext.NET Examples</title>
        <%--<link href="/resources/css/examples.css" rel="stylesheet" />--%>
    
        <script runat="server">
            public List<object> Data
            {
                get
                {
                    return new List<object>
                    {
                        new {Name = "On Time", Data1 = 50 },
                        new {Name = "Delayed", Data1 = 20 },
                        new {Name = "Another", Data1 = 30 },
                    };
                }
            }
        </script>
    
        <script>
            var tipRenderer = function (storeItem, item) {
                //calculate percentage.
                var total = 0;
    
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('Data1');
                });
                
                var tipLabel = "";
                tipLabel = storeItem.get('Name');
                var color = 'tan';
                if (tipLabel == 'Delayed') color = '#ff0000';
                else if (tipLabel == 'On Time') color = '#00ff00';
                else if (tipLabel == 'Another') color = '#0000ff';
    
                if (this.el)
                    this.el.setStyle('background', color);
                else
                    this.style = 'background: ' + color;
    
                this.setTitle(tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%');
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />
    
            <h1>Pie Chart Example</h1>
    
            <ext:Panel
                runat="server"
                Width="800"
                Height="600"
                Title=""
                Layout="FitLayout">
                <Items>
                    <ext:Chart ID="Chart1" runat="server" Animate="false" Shadow="true" InsetPadding="60">
                        <LegendConfig Position="Right" />
                        <Store>
                            <ext:Store ID="Store1" runat="server" Data="<%# Data %>">
                                <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Series>
                            <ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="30" Highlight="true"
                                HighlightSegmentMargin="20" ColorSet="#00ff00,#ff0000,#0000ff">
                                <Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
                                <Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28" StyleSpec="background:blue">
                                    <Renderer Fn="tipRenderer" />
                                </Tips>
                            </ext:PieSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>    
    </body>
    </html>
    I hope this helps.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    And now you may be asking yourself "I wish there were an easier way to track the tips. This color of the font of the tips also bugs me!"

    So well, let's just make things easier then, shall we?

    Change your tipRenderer function to this:
        <script>
            var tipRenderer = function (storeItem, item) {
                //calculate percentage.
                var total = 0;
    
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('Data1');
                });
                
                var tipLabel = storeItem.get('Name');
    
                color = item.series.colorSet[item.index % 3];
    
                if (this.el)
                    this.el.setStyle('background', color);
                else
                    this.style = 'background: ' + color;
    
                this.setTitle("<font color='white'>" + tipLabel + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%</font>');
            };
        </script>
    Voila, tip dynamically getting a color from the available colorSet you specified! And moreover, its font is now a cool, more readable white!.. :)

    Just note that, if you have four items on your series (say, Delayed, On Time, Early, Another), the color will cycle once it reachs the last.

    For example, if you had a colorSet with red, green, orange, you will have segments like Delayed:red, On Time:green, Early:blue, Another:red (again!). So just make sure you have enough color in the colorSet for the number of things you're going to represent on your pie chart.

    I hope this also helps you boost your page. :)
    Last edited by fabricio.murta; Jan 30, 2015 at 4:03 AM.
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Thanks for help Fabricio,

    You can mark as closed.

    Oliver.

Similar Threads

  1. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 4:48 PM
  2. Replies: 5
    Last Post: Dec 07, 2012, 5:42 PM
  3. Replies: 2
    Last Post: Jul 12, 2012, 1:23 PM
  4. [CLOSED] Individual Image for Grid ImageCommand
    By macap in forum 1.x Premium Help
    Replies: 2
    Last Post: Jan 28, 2010, 8:51 AM
  5. Replies: 12
    Last Post: Jun 17, 2009, 1:07 PM

Tags for this Thread

Posting Permissions