[CLOSED] Change gauge color dinamically

[ifminfomaster]

Hello, i have to upgrade my project from ext.net 2.* to 3.2.
I have a problem with code to change colors of a gauge when store data is changing. There is no error but colors are not changed.
here is my definition of gauge and store:

             <ext:Store ID="StoreSLAGrouped" runat="server" RemoteSort="false" >
                <Model>
                    <ext:Model ID="ModelSLAGrouped" runat="server">
                        <Fields>
                            <ext:ModelField Name="AdOperatore" Type="Int" />
                            <ext:ModelField Name="Risposte" Type="Int" />
                            <ext:ModelField Name="Risposte30" Type="Int" />
                            <ext:ModelField Name="ForAbb" Type="Int" />
                            <ext:ModelField Name="Abb" Type="Int" />
                            <ext:ModelField Name="SLA30" Type="Float"/>
                            <ext:ModelField Name="OLTRESLA30" Type="Int"/>
                            <ext:ModelField Name="PAbb" Type="Float"/>
                            <ext:ModelField Name="OLTREPAbb" Type="Int"/>
                        </Fields>
                    </ext:Model>
                </Model>
                <Listeners>
			<DataChanged Fn="GaugeChange"/>
		</Listeners>
            </ext:Store>

                           <ext:PolarChart ID="PolarOltreSLA30"
                                    runat="server"
                                    StyleSpec="background:#fff;"
                                    InsetPadding="25" Flex="1" StoreID="StoreSLAGrouped" Title="SLA 30" Animation="true">
                                    <Axes>
                                        <ext:NumericAxis Position="Gauge" Minimum="0" Maximum="100" MajorTickSteps="10" Margin="-10" >
                                            <Label FillStyle="#7F8C8D" FontSize="9" Font="Calibri" />
                                            <TitleConfig FontSize="12" Font="Calibri" TextAlign="Center" X="95" Y="90" />
                                        </ext:NumericAxis>
                                    </Axes>
                                    <Series>
                                        <ext:GaugeSeries Field="SLA30" Donut="0" Colors="#F49D10,#FFFFFF" TotalAngleDegrees="180" >
                                           
                                        </ext:GaugeSeries>
                                    </Series>
                                </ext:PolarChart>

And here my function javascript for change colors:

      var GaugeChange = function (item, newValue, oldValue) {
            var it = item.data.getAt(0);
            if (typeof (it) !== 'undefined') {
                var value = it.data.OLTRESLA30;
                var chart = App.PolarOltreSLA30;
                var oldcolors = chart.colors;
                var styles = chart.series[0].style;
                var subStyles = chart.series[0].subStyle;

                var axes = chart.axes[0];
                if (typeof (value) !== 'undefined') {
                    if (value < 1) {
                        chart.series[0].config.colors[0] = '#F75843';//rosso
                    }
                    else {
                        chart.series[0].config.colors[0] = '#16C92B';//verde
                    }
                    value = it.data.SLA30;
                    if (axes.setTitle !== undefined) {
                        axes.setTitle(Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2) + ' %');
                    }
                    chart.redraw();
                }
                value = it.data.OLTREPAbb;
                chart = App.PolarPAbb;
                axes = chart.axes[0];
                if (typeof (value) !== 'undefined') {
                    if (value < 1) {
                        chart.series[0].config.colors[0] = '#F75843';//rosso
                    }
                    else {
                        chart.series[0].config.colors[0] = '#16C92B';//verde
                    }
                    value = it.data.PAbb;
                    if (axes.setTitle !== undefined) {
                        axes.setTitle(Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2) + ' %');
                    }
                    chart.redraw();
                }

            }
        }

[fabricio.murta]

Hello @ifminformaster! Welcome to Ext.NET forums!

Just by looking to your example, I couldn't really see what is wrong. Charts have changes significantly from 2.x to 3.x so its expected that scripts on 2.x may not work on 3.x.

At a first, shallow thought, your issue might need to follow the lines on this example: Bar Renderer Sample. This example sets the chart color depending on the value of the gauges (bars), I believe similarly to what you need.

That said, we would require to be able to actually run your sample so we can debug and determine the cause and suggest how the script should be changed. Can you provide us with a working test case? Just a simple constant-data like the examples in our examples explorer, so we can, for example, click a button to change data and then see the exact problem that's happening to you.

If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Forum Guidelines For Posting New Topics
- More information required

[ifminfomaster]

Hello fabricio, i have seen your example and this is my new code:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Gauge</title>
    <script runat="server">
        public List<object> Data
        {
            get
            {
                Random rnd = new Random();
                int rndN = rnd.Next(1, 100);
                
                return new List<object>
                {
                    new {Name = "Test", Data1 = rndN }
                };
            }
        }

        protected void ReloadData(object sender, DirectEventArgs e)
        {
            this.PolarChart1.GetStore().DataBind();
            this.PolarChart2.GetStore().DataBind();
        }
    </script>

    <script>

        function chartRenderer(sprite, config, rendererData, index) {
            var  value = rendererData.value;
            var nexIndex = 0;
            var colors = ['#4EE37E','#E34EB3','#4E69E3','#629194','#946562'];

            if (value < 20) { nexIndex = 0 };
            if (value >= 20 & value < 40) { nexIndex = 1 };
            if (value >= 40 & value < 60) { nexIndex = 2 };
            if (value >= 60 & value < 80) { nexIndex = 3 };
            if (value >= 85) { nexIndex = 4 };

            return {
                fill: colors[nexIndex]
            };
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" />

         <ext:Viewport ID="Main" runat="server" Flex="1" Layout="BorderLayout" Stateful="true">
        <Bin>

            <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>

         </Bin>
        <Items>
        <ext:Panel ID="Panel1"
            runat="server"
            Width="800"
            Height="600"
            Title="">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>  
             <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" 
                            runat="server" 
                            Text="Reload Data" 
                            Icon="ArrowRefresh" 
                            OnDirectClick="ReloadData" 
                            />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:PolarChart ID="PolarChart1"
                    runat="server"  StyleSpec="background:#FFFFFF;"
                    InsetPadding="25" Flex="1" StoreID="Store1">
                    <Axes>
                        <ext:NumericAxis Position="Gauge" Minimum="0" Maximum="100" MajorTickSteps="10" Margin="-10"  >
                        </ext:NumericAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries Field="Data1" Donut="30" Colors="#F49D10,#FFFFFF" TotalAngleDegrees="180">
                            <Renderer Fn="chartRenderer" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:PolarChart>
                <ext:PolarChart ID="PolarChart2"
                    runat="server"  StyleSpec="background:#FFFFFF;"
                    InsetPadding="25" Flex="1" StoreID="Store1">
                    <Axes>
                        <ext:NumericAxis Position="Gauge" Minimum="0" Maximum="100" MajorTickSteps="10" Margin="-10"  >
                        </ext:NumericAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries Field="Data1" Donut="30" Colors="#F49D10,#FFFFFF" TotalAngleDegrees="180">
                        </ext:GaugeSeries>
                    </Series>
                </ext:PolarChart>
            </Items>
        </ext:Panel>
        </Items>
        </ext:Viewport>
    </form>    
</body>
</html>

the first chart is renderer and the second one no. Now on the first gauge colors change but not how i want...it's all background color to change
Can you help me?

[fabricio.murta]

Hello, @ifminfomaster, sorry for the long delay replying your inquiry!

To get the desired behavior, just change your javaScript to return null every time sprite.rendererIndex is 1.

        function chartRenderer(sprite, config, rendererData, index) {
            var  value = rendererData.value;
            var nexIndex = 0;
            var colors = ['#4EE37E','#E34EB3','#4E69E3','#629194','#946562'];

            if (sprite.rendererIndex == 1) return null;

            if (value < 20) { nexIndex = 0 };
            if (value >= 20 & value < 40) { nexIndex = 1 };
            if (value >= 40 & value < 60) { nexIndex = 2 };
            if (value >= 60 & value < 80) { nexIndex = 3 };
            if (value >= 85) { nexIndex = 4 };

            return {
                fillStyle: colors[nexIndex],
            };
        }

I found that by adding a breakpoint in the return line above. I noticed the code was parsed two times: first for the smaller gauge sprite and another for the background sprite.

Hope that helps!

[ifminfomaster]

Thanks it works!!!!