PDA

View Full Version : [CLOSED] Donut Chart Colorset



bayoglu
Mar 08, 2013, 11:10 PM
Hello,

I need to change a donut chart's color set based on the value. For this, I found my way but I don't think it is the normal way (;

Chart series value changes based on selection of a combobox. So I am calling below code in combobox's change handler:



App.MyChart.series.items[0].colorSet = [SelectedColorCode, "#eee"];


Chart color changes this way but there is also fluctuation of colors. I have a video demonstrating the issue but can not attach here. How can I change donut chart color set in a healthy way?

Chart markup:


<ext:Chart ID="MyChart" runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" StoreID="MyStore" >
<AnimateConfig Easing="ElasticIn" Duration="1000" />
<Axes>
<ext:GaugeAxis AxisID="MyAxis" Minimum="0" Maximum="100" Steps="10" Margin="-10" Title="My Title">
</ext:GaugeAxis>
</Axes>
<Series>
<ext:GaugeSeries AngleField="MySeries" Donut="0" ColorSet="#F49D10,#ddd">
</ext:GaugeSeries>
</Series>
</ext:Chart>


Thanks.

Baidaly
Mar 09, 2013, 12:28 AM
Hello!

Please, take a look at the following example:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public List<object> Values = new List<object>
{
new
{
Name = "1",
Data1 = 30
}
};
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True" />
<ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Change colorset" OnClientClick="#{Chart2}.series.items[0].colorSet = ['#F49D10', ' #ddd']; #{Chart2}.redraw();">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;"
InsetPadding="50">
<Store>
<ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:GaugeAxis Minimum="10" Maximum="50" Steps="4" Title="Title">
</ext:GaugeAxis>
</Axes>
<Series>
<ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
</ext:GaugeSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

bayoglu
Mar 09, 2013, 1:32 AM
Thank you Baidaly.
I am using AnimateConfig as seen in my original post. I guess the problem is related with it, especially when gauge value comes nearer to the minimum value.


<AnimateConfig Easing="ElasticIn" Duration="1000" />

I modified your code to re-generate the issue. Try the code below, you will catch fluctuations shortly. Is there something to correct with AnimateConfig?

Thanks.




<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public List<object> Values = new List<object>
{
new
{
Name = "1",
Data1 = 40
}
};
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Panel ID="Panel1" runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Change colorset" OnClientClick="App.Store1.data.getAt(0).set('Data1', Math.floor((Math.random()*10)+10)); #{Chart2}.series.items[0].colorSet = ['#'+Math.floor(Math.random()*16777215).toString(16 ), ' #ddd']; #{Chart2}.redraw();">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;"
InsetPadding="50">
<Store>
<ext:Store ID="Store1" runat="server" Data="<%# Values %>" AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<AnimateConfig Easing="ElasticIn" Duration="1000" />
<Axes>
<ext:GaugeAxis Minimum="10" Maximum="50" Steps="4" Title="Title">
</ext:GaugeAxis>
</Axes>
<Series>
<ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
</ext:GaugeSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

Baidaly
Mar 09, 2013, 2:02 AM
You can remove animation before changing of ColorSet:


App.Chart2.animate = null;

bayoglu
Mar 09, 2013, 7:07 PM
You can remove animation before changing of ColorSet:


App.Chart2.animate = null;

Removing animation before color set change also does not help. I guess there is something wrong with ElasticIn animation. Please investigate the full sample below. Chage ComboBox value from Val 1 to any other and see how colors smash. If I use Easing="EaseIn", then it has a smooth color change and looks good.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData();
this.Store1.DataBind();

this.ComboStore.DataSource = this.ComboStoreData();
this.ComboStore.DataBind();
Combo1.SetValue(1);
}
}
private List<object> TestData()
{
List<object> data = new List<object>
{
new
{
Name = "1",
Data1 = 1
}
};
return data;
}

private List<object> ComboStoreData()
{
List<object> data = new List<object>
{
new {
Name = "Val 1",
ComboData = 1
},
new {
Name = "Val 2",
ComboData = 10
},
new {
Name = "Val 3",
ComboData = 45
},
new {
Name = "Val 4",
ComboData = 80
}
};
return data;
}
</script>
<script type="text/javascript">
function ComboChange(item, newValue, oldValue) {
App.Store1.data.getAt(0).set('Data1', newValue);
var animate = App.Chart1.animate;
App.Chart1.animate = null;
if(newValue <= 3){
App.Chart1.series.items[0].colorSet = ['#99CC00', '#ddd'];
}
else if(newValue <= 15){
App.Chart1.series.items[0].colorSet = ['#FFFF00', '#ddd'];
}
else if(newValue <= 60){
App.Chart1.series.items[0].colorSet = ['#FF6600', '#ddd'];
}
else{
App.Chart1.series.items[0].colorSet = ['#FF0000', '#ddd'];
}
App.Chart1.animate = animate;
App.Chart1.redraw();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Panel ID="Panel1" runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ComboBox ID="Combo1" runat="server" DisplayField="Name" ValueField="ComboData" FieldLabel="Change colorset">
<Store>
<ext:Store runat="server" ID="ComboStore">
<Model>
<ext:Model runat="server" IDProperty="ComboData">
<Fields>
<ext:ModelField Name="Name"></ext:ModelField>
<ext:ModelField Name="ComboData" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Change Fn="ComboChange"></Change>
</Listeners>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" InsetPadding="50">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<AnimateConfig Easing="ElasticIn" Duration="1000" />
<Axes>
<ext:GaugeAxis Minimum="0" Maximum="100" Steps="4" Title="Title">
</ext:GaugeAxis>
</Axes>
<Series>
<ext:GaugeSeries AngleField="Data1" Donut="0" ColorSet="#99CC00,#ddd">
</ext:GaugeSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

Baidaly
Mar 10, 2013, 9:27 PM
Try this one:


function ComboChange(item, newValue, oldValue) {
App.Store1.data.getAt(0).set('Data1', newValue);
var animate = App.Chart1.animate;
App.Chart1.animate = null;
if(newValue <= 3){
App.Chart1.series.items[0].colorSet = ['#99CC00', '#ddd'];
}
else if(newValue <= 15){
App.Chart1.series.items[0].colorSet = ['#FFFF00', '#ddd'];
}
else if(newValue <= 60){
App.Chart1.series.items[0].colorSet = ['#FF6600', '#ddd'];
}
else{
App.Chart1.series.items[0].colorSet = ['#FF0000', '#ddd'];
}
App.Chart1.redraw();
var task = new Ext.util.DelayedTask(function(){
App.Chart1.animate = animate;
});

task.delay(500);
}