Apr 15, 2013, 2:15 PM
[OPEN] [#211] Chart color set
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:
Sample Code:
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:
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>
Last edited by Daniil; Apr 16, 2013 at 3:05 PM.
Reason: [OPEN] [#211]
Originally Posted by Baidaly
