What's New?

[CLOSED] How to change individual slice pie color

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Jan 26, 2015, 12:13 PM

    [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 https://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 12:16 PM. Reason: [CLOSED]
  2. #2
    Jan 26, 2015, 7:08 PM
    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 7:18 PM.
  3. #3
    Jan 26, 2015, 7:29 PM
    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
    Jan 27, 2015, 1:13 AM
    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 5:35 AM.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jan 27, 2015, 11:07 PM
    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 Click image for larger version.  Name: chartExample.jpg  Views: 3  Size: 95.5 KB  ID: 19591  
  6. #6
    Jan 29, 2015, 11:24 PM
    There is no way to fix the legend colors?

    Thanks!

    Oliver

Similar Threads

  1. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 3:48 PM
  2. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  3. [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
  4. [CLOSED] Individual Image for Grid ImageCommand
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 28, 2010, 7:51 AM
  5. [CLOSED] Change background color of textfield, textarea, combobox after text change
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM

Tags for this Thread

Posting Permissions