[CLOSED] Chart: Gauge color

  1. #1

    [CLOSED] Chart: Gauge color

    Is there a way to color the area of a gauge chart with different colors depending on the current value ?

    I mean: in a set from 0 to 100 it should be green from 0 to 60, yellow from 61 to 85 and red for the rest

    If possible could you suggest a way ?

    http://examples2.ext.net/#/Chart/Gauge/Basic/

    thanks in advance
    Last edited by Daniil; Apr 08, 2013 at 8:41 AM. Reason: [CLOSED]
  2. #2
    Hello!

    You should use Series Renderer:

    <ext:GaugeSeries AngleField="Data1" Donut="80" ColorSet="#3AA8CB,#AA0">
    	<Renderer Handler="
    		// First part of Gauge
    		if (index == 0) { 
    			if (record.data.Data1 > 50)
    				attributes.fill = '#E50202'; 
    			else
    				attributes.fill = '#50E500'; 
    		} 
    		// Second part of Gauge
    		else { 
    			if (record.data.Data1 > 50)
    				attributes.fill = '#0016E5'; 
    			else
    				attributes.fill = '#E5E54B'; 
    		} 
    		return attributes;"></Renderer>
    </ext:GaugeSeries>
  3. #3

    Gauge effect example

    Thanks for tip.

    I made up an example to enjoy the effect

    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script runat="server">
            public List<object> GaugeData
            {
                get
                {
                    var random = new Random();
                    return new List<object> 
                { 
                    new {Name = "Orders", Data1 = random.Next(1,180)}
                };
                }
            }
    
            protected void updateStore(object sender, DirectEventArgs e)
            {
                try
                {
                    Store4.DataSource = GaugeData;
                    Store4.DataBind();
                }
                catch (Exception x)
                {
                    Notification.Show(new NotificationConfig
                    {
                        Title = "updating data on chart",
                        Icon = Icon.Information,
                        Html = x.Message
                    });
                }
            }
        
        </script>
        <script type="text/javascript">
            var myRenderer = function (sprite, record, attributes, index, store) {
                if (index == 0) {
                    if (record.data.Data1 > 75)
                        attributes.fill = '#E50202';
                    else
                        attributes.fill = '#50E500';
                }
                else {
                    if (record.data.Data1 > 75)
                        attributes.fill = '#0016E5';
                    else
                        attributes.fill = '#E5E54B';
                }
                return attributes;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel4" runat="server" Title="Gauge test" Region="West" Layout="FitLayout"
            Width="400" Height="400" MinWidth="200" Split="true" Collapsible="true" Flex="1">
            <TopBar>
                <ext:Toolbar ID="Toolbar4" runat="server">
                    <Items>
                        <ext:Label ID="date" runat="server" Text="" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart4" runat="server" Animate="true" StyleSpec="background:#fff;"
                    InsetPadding="25" Flex="1">
                    <Store>
                        <ext:Store ID="Store4" runat="server" Data="<%# GaugeData %>" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model4" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis AxisID="GaugeAxis" Minimum="0" Maximum="200" Margin="7">
                            <CustomConfig>
                                <ext:ConfigItem Name="steps" Value="4" Mode="Raw" />
                            </CustomConfig>
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="80" ColorSet="#3AA8CB,#AA0">
                            <Renderer Fn="myRenderer" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        <ext:TaskManager ID="TaskManager1" Interval="0" runat="server">
            <Tasks>
                <ext:Task TaskID="DataTask" AutoRun="true" Interval="1000">
                    <DirectEvents>
                        <Update OnEvent="updateStore" After="#{date}.setText(Ext.Date.format(new Date(), 'H:i:s'));" />
                    </DirectEvents>
                </ext:Task>
            </Tasks>
        </ext:TaskManager>
        </form>
    </body>
    </html>
    bye
  4. #4
    Hi @tanky65,

    Thank you for sharing the full example. We appreciate it.

Similar Threads

  1. [CLOSED] How to change label color for the chart.
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 30, 2013, 6:57 AM
  2. [CLOSED] Chart.Legend background color ?
    By Zenalyse in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 19, 2013, 1:57 PM
  3. [CLOSED] How can change color for only one chart column
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 12, 2013, 8:08 AM
  4. Can i create chart gauge in v.1
    By yazid in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2012, 5:52 AM
  5. On the ext.net v2.x gauge chart problems
    By huidesy in forum 2.x Help
    Replies: 8
    Last Post: Jul 05, 2012, 8:07 PM

Tags for this Thread

Posting Permissions