Feb 14, 2014, 11:45 AM
[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:
--------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------
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>-------------------------------------------------------------------------------------------------------------------------------------------------------------
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 7:45 AM.
Reason: Please use [CODE] tags, [CLOSED]
