PDA

View Full Version : [OPEN] [#211] Chart color set



bayoglu
Apr 15, 2013, 2:15 PM
Hello,

I have problems with setting chart color set. Let me explain the chart usage first. It mainly draws a line series in a known range. There are also ranges defined for possible values all pointing an area. Labels are Low, Medium, High, and Critical. In real scneario those labels are extracted during page load (not static), this is why I am dynamically adding those fields to the store with a default value (anyway, makes no sense with the threat).

The problem is that, if I use animate=true, chart colors and legend colors do not match. Each label (data range) explained above has a specific color code. I want the line series have black color and each range has its own color. For this I used ChartTheme and defined colors config Item. When animate=false, it looks like I wanted, when animate=true, both the line series and the first area (which shoul have green color) are black.

1) Could you advice on how to correct this with "animate=true".
2) How can I do the same this without using ChartTheme and setting area series colorArrayStyle from code behind?

Figure attached below:
6018

Sample Code:


<%@ 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();
}
}
private List<object> TestData()
{
List<object> data = new List<object>
{
new {
ID = 0,
Date = DateTime.Today.AddDays(-2),
Data = 1
},
new {
ID = 1,
Date = DateTime.Today.AddDays(-2).AddHours(6),
Data = 3
},
new {
ID = 2,
Date = DateTime.Today.AddDays(-1),
Data = 5
},
new {
ID = 3,
Date = DateTime.Today.AddDays(-1).AddHours(6),
Data = 7
},
new {
ID = 4,
Date = DateTime.Today.AddDays(-1).AddHours(10),
Data = 1
},
new {
ID = 5,
Date = DateTime.Today.AddHours(6),
Data = 3
},

};
return data;
}
</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="Area Series for Threshold" Width="800" Height="500" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Bin>
<ext:ChartTheme ID="MyChartTheme" runat="server" ThemeName="MyTheme">
<CustomConfig>
<ext:ConfigItem Name="colors" Value="['#000000','#99CC00','#FFFF00','#FF6600','#FF0000']" Mode="Raw" />
</CustomConfig>
</ext:ChartTheme>
</Bin>
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Legend="true" Theme="MyTheme" Animate="false" Flex="1">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Data" Type="Int" />
<ext:ModelField Name="Low" Type="Int" DefaultValue="2" />
<ext:ModelField Name="Medium" Type="Int" DefaultValue="2" />
<ext:ModelField Name="High" Type="Int" DefaultValue="2" />
<ext:ModelField Name="Critical" Type="Int" DefaultValue="2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:TimeAxis Fields="Date" Position="Bottom" Title="Time" DateFormat="Y, MMM dd">
</ext:TimeAxis>
<ext:NumericAxis Title="Value" Fields="Data,Low,Medium,High,Critical" Position="Left">
<Label>
<Renderer Handler="return value" />
</Label>
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Date" YField="Data" Smooth="3" ShowInLegend="false">
</ext:LineSeries>
<ext:AreaSeries Axis="Left" XField="Date" YField="Low,Medium,High,Critical" ShowInLegend="true">
<Style Opacity="0.93" />
</ext:AreaSeries>
</Series>
</ext:Chart>
<ext:Chart ID="Chart2" runat="server" StyleSpec="background:#fff;" Legend="true" Theme="MyTheme" Animate="true" StoreID="Store1" Flex="1">
<Axes>
<ext:TimeAxis Fields="Date" Position="Bottom" Title="Time" DateFormat="Y, MMM dd">
</ext:TimeAxis>
<ext:NumericAxis Title="Value" Fields="Data,Low,Medium,High,Critical" Position="Left">
<Label>
<Renderer Handler="return value" />
</Label>
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Date" YField="Data" Smooth="3" ShowInLegend="false">
</ext:LineSeries>
<ext:AreaSeries Axis="Left" XField="Date" YField="Low,Medium,High,Critical" ShowInLegend="true">
<Style Opacity="0.93" />
</ext:AreaSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>


Thanks.

Daniil
Apr 15, 2013, 5:10 PM
Hi @bayoglu,

It looks like a bug. We are investigating.


2) How can I do the same this without using ChartTheme and setting area series colorArrayStyle from code behind?


It should be possible to do via a Series' Renderer.

Baidaly
Apr 15, 2013, 11:42 PM
Hello!

We have created a request to Sencha: http://www.sencha.com/forum/showthread.php?261370

bayoglu
Apr 16, 2013, 1:53 PM
Hello!

We have created a request to Sencha: http://www.sencha.com/forum/showthread.php?261370

Thanks, I will track from the threat.

Daniil
Apr 16, 2013, 3:05 PM
Created an Issue to track the defect.
https://github.com/extnet/Ext.NET/issues/211