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
