[CLOSED] Donut Chart Colorset

  1. #1

    [CLOSED] Donut Chart Colorset

    Hello,

    I need to change a donut chart's color set based on the value. For this, I found my way but I don't think it is the normal way (;

    Chart series value changes based on selection of a combobox. So I am calling below code in combobox's change handler:

    App.MyChart.series.items[0].colorSet = [SelectedColorCode, "#eee"];
    Chart color changes this way but there is also fluctuation of colors. I have a video demonstrating the issue but can not attach here. How can I change donut chart color set in a healthy way?

    Chart markup:
    <ext:Chart ID="MyChart" runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" StoreID="MyStore" >
        <AnimateConfig Easing="ElasticIn" Duration="1000" />
        <Axes>
            <ext:GaugeAxis AxisID="MyAxis" Minimum="0" Maximum="100" Steps="10" Margin="-10" Title="My Title">
            </ext:GaugeAxis>
        </Axes>
        <Series>
            <ext:GaugeSeries AngleField="MySeries" Donut="0" ColorSet="#F49D10,#ddd">
            </ext:GaugeSeries>
        </Series>                                                
    </ext:Chart>
    Thanks.
    Last edited by Daniil; Mar 14, 2013 at 9:46 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Please, take a look at the following example:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        public List<object> Values = new List<object>
                {
                    new
                        {
                            Name = "1",
                            Data1 = 30
                        }
                };
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" SourceFormatting="True" />
        <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Change colorset" OnClientClick="#{Chart2}.series.items[0].colorSet = ['#F49D10', ' #ddd']; #{Chart2}.redraw();">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;"
                    InsetPadding="50">
                    <Store>
                        <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="10" Maximum="50" Steps="4"  Title="Title">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  3. #3
    Thank you Baidaly.
    I am using AnimateConfig as seen in my original post. I guess the problem is related with it, especially when gauge value comes nearer to the minimum value.

    <AnimateConfig Easing="ElasticIn" Duration="1000" />
    I modified your code to re-generate the issue. Try the code below, you will catch fluctuations shortly. Is there something to correct with AnimateConfig?

    Thanks.


    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        public List<object> Values = new List<object>
                {
                    new
                        {
                            Name = "1",
                            Data1 = 40
                        }
                };
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
        <ext:Panel ID="Panel1" runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Change colorset" OnClientClick="App.Store1.data.getAt(0).set('Data1', Math.floor((Math.random()*10)+10)); #{Chart2}.series.items[0].colorSet = ['#'+Math.floor(Math.random()*16777215).toString(16), ' #ddd']; #{Chart2}.redraw();">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;"
                    InsetPadding="50">
                    <Store>
                        <ext:Store ID="Store1" runat="server" Data="<%# Values %>" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <AnimateConfig Easing="ElasticIn" Duration="1000" />
                    <Axes>
                        <ext:GaugeAxis Minimum="10" Maximum="50" Steps="4"  Title="Title">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  4. #4
    You can remove animation before changing of ColorSet:

    App.Chart2.animate = null;
  5. #5
    Quote Originally Posted by Baidaly View Post
    You can remove animation before changing of ColorSet:

    App.Chart2.animate = null;
    Removing animation before color set change also does not help. I guess there is something wrong with ElasticIn animation. Please investigate the full sample below. Chage ComboBox value from Val 1 to any other and see how colors smash. If I use Easing="EaseIn", then it has a smooth color change and looks good.

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData();
                this.Store1.DataBind();
    
                this.ComboStore.DataSource = this.ComboStoreData();
                this.ComboStore.DataBind();
                Combo1.SetValue(1);
            }
        }
        private List<object> TestData()
        {
            List<object> data = new List<object>
                {
                    new
                        {
                            Name = "1",
                            Data1 = 1
                        }
                };
            return data;
        }
    
        private List<object> ComboStoreData()
        {
            List<object> data = new List<object>
                {
                    new {
                            Name = "Val 1",
                            ComboData = 1
                        },
                    new {
                            Name = "Val 2",
                            ComboData = 10
                        },
                    new {
                            Name = "Val 3",
                            ComboData = 45
                        },
                    new {
                            Name = "Val 4",
                            ComboData = 80
                        }                                                                             
                };
            return data;
        }    
    </script>
    <script type="text/javascript">
        function ComboChange(item, newValue, oldValue) {
            App.Store1.data.getAt(0).set('Data1', newValue); 
            var animate = App.Chart1.animate;
            App.Chart1.animate = null;
            if(newValue <= 3){
                App.Chart1.series.items[0].colorSet = ['#99CC00', '#ddd'];
            } 
            else if(newValue <= 15){
                App.Chart1.series.items[0].colorSet = ['#FFFF00', '#ddd'];
            }
            else if(newValue <= 60){
                App.Chart1.series.items[0].colorSet = ['#FF6600', '#ddd'];
            }
            else{
                App.Chart1.series.items[0].colorSet = ['#FF0000', '#ddd'];
            }
            App.Chart1.animate = animate;
            App.Chart1.redraw();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
        <ext:Panel ID="Panel1" runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:ComboBox ID="Combo1" runat="server" DisplayField="Name" ValueField="ComboData" FieldLabel="Change colorset">
                            <Store>
                                <ext:Store runat="server" ID="ComboStore">
                                    <Model>
                                        <ext:Model runat="server" IDProperty="ComboData">
                                            <Fields>
                                                <ext:ModelField Name="Name"></ext:ModelField>
                                                <ext:ModelField Name="ComboData" Type="Int"></ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Change Fn="ComboChange"></Change>
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" InsetPadding="50">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <AnimateConfig Easing="ElasticIn" Duration="1000" />
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="4"  Title="Title">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="0" ColorSet="#99CC00,#ddd">
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  6. #6
    Try this one:

    function ComboChange(item, newValue, oldValue) {
    	App.Store1.data.getAt(0).set('Data1', newValue); 
    	var animate = App.Chart1.animate;
    	App.Chart1.animate = null;
    	if(newValue <= 3){
    		App.Chart1.series.items[0].colorSet = ['#99CC00', '#ddd'];
    	} 
    	else if(newValue <= 15){
    		App.Chart1.series.items[0].colorSet = ['#FFFF00', '#ddd'];
    	}
    	else if(newValue <= 60){
    		App.Chart1.series.items[0].colorSet = ['#FF6600', '#ddd'];
    	}
    	else{
    		App.Chart1.series.items[0].colorSet = ['#FF0000', '#ddd'];
    	}
    	App.Chart1.redraw();
    	var task = new Ext.util.DelayedTask(function(){
    		App.Chart1.animate = animate;
    	});
    	
    	task.delay(500);
    }

Similar Threads

  1. [CLOSED] Chart Tip
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 05, 2012, 12:49 AM
  2. Pie chart example
    By Gamerome in forum 2.x Help
    Replies: 2
    Last Post: Sep 09, 2012, 7:17 PM
  3. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  4. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. Chart
    By zanotto in forum 2.x Help
    Replies: 7
    Last Post: Mar 09, 2012, 11:47 AM

Posting Permissions