[CLOSED] Display Text with in the Gauge Chart.

  1. #1

    [CLOSED] Display Text with in the Gauge Chart.

    Hello,

    I am using ext.net gauge chart control,i need to display the text within the gauge. I am trying for it , could not find solution.
    Please check the below code & help me to solve this problem.

    Thanks in Advance.

    Guage.aspx:
    --------------------------------------------------------------------------------------------------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Gauge Chart - Ext.NET Examples</title>
        <style type="text/css">
            .clss1
            {
                margin: 0;
                border: Black;
                color: Black;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Width="900" Height="150" Border="false">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch">
                </ext:HBoxLayoutConfig>
            </LayoutConfig>
            <Items>
                <ext:Chart ID="Chart1" runat="server" InsetPadding="50" Flex="1" Cls="clss1">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model3" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="60" ColorSet="#FF0000,#ddd" Highlight="true">
                            <HighlightConfig Size="1" />
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips2" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data1')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                            <Label Field="Data1" Display="InsideEnd" Color="#333" TextAnchor="middle">
                                <%--<Renderer Handler="return Ext.util.Format.number(value, '0');" />--%>
                            </Label>
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <AnimateConfig Easing="BounceOut" Duration="500" />
                    <Store>
                        <ext:Store ID="Store2" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data2" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries Title="Yes" ShowInLegend="true" AngleField="Data2" Donut="60" ColorSet="#FF0000,#ddd"
                            Highlight="true">
                            <%-- <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />                           
                            </Listeners>--%>
                            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data2')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                            <%-- <Renderer Fn="myRenderer" />
                            <Listeners>
                                <ItemClick Handler="">
                                </ItemClick>
                            </Listeners>--%>
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart3" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <AnimateConfig Easing="BounceOut" Duration="500" />
                    <Store>
                        <ext:Store ID="Store3" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model2" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data3" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data3" Donut="60" ColorSet="#FF0000,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips3" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data3')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart4" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <Store>
                        <ext:Store ID="Store4" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model4" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data4" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data4" Donut="60" ColorSet="#FF0000,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips4" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data4')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        <ext:Panel ID="Panel2" runat="server" Width="900" Height="150" Border="false">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch">
                </ext:HBoxLayoutConfig>
            </LayoutConfig>
            <Items>
                <ext:Chart ID="Chart5" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <Store>
                        <ext:Store ID="Store5" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model5" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data5" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data5" Donut="60" ColorSet="#FFFF00,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips5" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data5')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart6" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <AnimateConfig Easing="BounceOut" Duration="500" />
                    <Store>
                        <ext:Store ID="Store6" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model6" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data6" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data6" Donut="60" ColorSet="#7FFF00,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips6" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data6')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart7" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <AnimateConfig Easing="BounceOut" Duration="500" />
                    <Store>
                        <ext:Store ID="Store7" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model7" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data7" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data7" Donut="60" ColorSet="#FF0000,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips7" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data7')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
                <ext:Chart ID="Chart8" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <Store>
                        <ext:Store ID="Store8" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model8" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data8" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data8" Donut="60" ColorSet="#7FFF00,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips8" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data8')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        <ext:Window ID="window1" runat="server" Hidden="true" Height="300" Width="300">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch">
                </ext:HBoxLayoutConfig>
            </LayoutConfig>
            <Content>
                <ext:Chart ID="Chart9" runat="server" StyleSpec="background:#fff;" InsetPadding="50"
                    Flex="1">
                    <Store>
                        <ext:Store ID="Store9" runat="server" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model9" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="5" Margin="0">
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="60" ColorSet="#7FFF00,#ddd" Highlight="true">
                            <Listeners>
                                <ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1]});" />
                            </Listeners>
                            <Tips ID="Tips9" runat="server" TrackMouse="true" Width="80" Height="40">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + '<br />' + storeItem.get('Data8')+'%'); this.update(storeItem.get('data'));">
                                </Renderer>
                            </Tips>
                            <Style Stroke="#000000" StrokeWidth="1" />
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Content>
        </ext:Window>
        </form>
    </body>
    </html>
    Gauge.aspx.cs:
    -------------------------------------------------------------------------------------------------------------------------------------------------------------

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    using Ext.Net;
    
    public partial class Guage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Store store1 = this.Chart1.GetStore();
            store1.DataSource = this.Data1;
            store1.DataBind();
            Store store2 = this.Chart2.GetStore();
            store2.DataSource = this.Data2;
            store2.DataBind();
            Store store3 = this.Chart3.GetStore();
            store3.DataSource = this.Data3;
            store3.DataBind();
            Store store4 = this.Chart4.GetStore();
            store4.DataSource = this.Data4;
            store4.DataBind();
            Store store5 = this.Chart5.GetStore();
            store5.DataSource = this.Data5;
            store5.DataBind();
            Store store6 = this.Chart6.GetStore();
            store6.DataSource = this.Data6;
            store6.DataBind();
            Store store7 = this.Chart7.GetStore();
            store7.DataSource = this.Data7;
            store7.DataBind();
            Store store8 = this.Chart8.GetStore();
            store8.DataSource = this.Data8;
            store8.DataBind();
            Store store9 = this.Chart9.GetStore();
            store9.DataSource = this.Data1;
            store9.DataBind();
    
        }
        //protected void BindData(object sender, DirectEventArgs e)
        //{
        //}
    
    
        //protected void ReloadData(object sender, DirectEventArgs e)
        //{
        //    Store store1 = this.Chart1.GetStore();
        //    store1.DataSource = this.Data1;
        //    store1.DataBind();
        //    Store store2 = this.Chart2.GetStore();
        //    store1.DataSource = this.Data2;
        //    store1.DataBind();
        //    Store store3 = this.Chart3.GetStore();
        //    store1.DataSource = this.Data3;
        //    store1.DataBind();
    
        //}
        private object[] Data1
        {
            get
            {
                return new object[]
                {
                   
                    new object[] {"SUPPLY",75}
                    
                };
            }
        }
        private object[] Data2
        {
            get
            {
                return new object[]
                {
                   
                    new object[] {"STORAGE",60}
                    
                };
            }
        }
        private object[] Data3
        {
            get
            {
                return new object[]
                {
                   
                    new object[] {"DISTRIBUTION",60}
                   
                };
            }
        }
        private object[] Data4
        {
            get
            {
                return new object[]
                {
                   
                    new object[] {"DESIGN",75}
                    
                };
            }
        }
        private object[] Data5
        {
            get
            {
                return new object[]
                {
    
                    new object[] {"CONTROL",50}
    
                };
            }
        }
        private object[] Data6
        {
            get
            {
                return new object[]
                {
    
                    new object[] {"DOCUMENTATION",80}
    
                };
            }
        }
        private object[] Data7
        {
            get
            {
                return new object[]
                {
    
                    new object[] {"TRAINING COMPETENCE & RESPONSIBILITY",75}
    
                };
            }
        }
        private object[] Data8
        {
            get
            {
                return new object[]
                {
    
                    new object[] {"REVIEW & ONGOING IMPROVEMENT",100}
    
                };
            }
        }
    }
    Last edited by Daniil; Feb 20, 2014 at 8:45 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @mohan.bizbites,

    Please follow:
    Forum Guidelines For Posting New Topics
  3. #3
    Please edit the existing post, do not create a new post. As stated here:
    http://forums.ext.net/showthread.php?10205
  4. #4
    No feedback from the original poster. Marked as closed.

Similar Threads

  1. [2.3] Any handsome Skin for Gauge chart?
    By Webezi in forum 2.x Help
    Replies: 3
    Last Post: Dec 08, 2013, 12:04 AM
  2. [CLOSED] Gauge chart issues
    By advBackOffice in forum 2.x Premium Help
    Replies: 1
    Last Post: May 02, 2013, 5:23 PM
  3. [CLOSED] Chart: Gauge color
    By tanky65 in forum 2.x Premium Help
    Replies: 3
    Last Post: Apr 08, 2013, 9:42 AM
  4. Can i create chart gauge in v.1
    By yazid in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2012, 6: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, 9:07 PM

Posting Permissions