PDA

View Full Version : [CLOSED] Fill between two line series



jchau
Feb 19, 2014, 7:16 PM
How can I do a fill between two line series? If I set the Fill = True on the top line, the fill extends to the bottom of the chart. I tried setting Fill = true on second one and make hte style white but the Fill from the top line still bleeds down.

Daniil
Feb 20, 2014, 4:44 AM
Hi @jchau,

Yes, it looks impossible to achieve the requirement with Fill="true". The Fill of the upper line is in priority...

My next thought is to use an AreaSeries. Though, there is a quirky behavior - it overlaps with the Axes lines.

Example

<%@ 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)
{
Store s = this.Chart1.GetStore();
s.DataSource = new object[]
{
new
{
x = 0,
y1 = 25,
y2 = 50

},
new
{
x = 50,
y1 = 35,
y2 = 65

},
new
{
x = 100,
y1 = 25,
y2 = 50
}
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="y1" />
<ext:ModelField Name="y2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
<ext:NumericAxis Title="Y" Fields="y1,y2" Position="Left" Minimum="0" />
</Axes>
<Series>
<ext:LineSeries Titles="Line 1" XField="x" YField="y1" />

<ext:LineSeries Titles="Line 2" XField="x" YField="y2" Fill="true" />

<ext:AreaSeries XField="x" YField="y1">
<Renderer Handler="attributes.fill = 'white'; return attributes;" />
</ext:AreaSeries>
</Series>
</ext:Chart>
</form>
</body>
</html>

Maybe, you could try to use an AreaSeries instend of LineSeries at all?

jchau
Feb 20, 2014, 1:17 PM
Thanks. I tried the area series before too and cutting off the Y-Axis was a deal breaker.

Daniil
Feb 20, 2014, 1:51 PM
I don't know why they overlap an AreaSeries with an axis.

Maybe, this way. Dirty, but appears to be working.

Example

<%@ 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)
{
Store s = this.Chart1.GetStore();
s.DataSource = new object[]
{
new
{
x = 0,
xForArea = 0.4,
y1 = 25,
y2 = 50

},
new
{
x = 50,
xForArea = 50,
y1 = 35,
y2 = 65

},
new
{
x = 100,
xForArea = 100.4,
y1 = 25,
y2 = 50
}
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="xForArea" />
<ext:ModelField Name="y1" />
<ext:ModelField Name="y2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
<ext:NumericAxis Title="Y" Fields="y1,y2" Position="Left" Minimum="0" />
</Axes>
<Series>
<ext:LineSeries Titles="Line 1" XField="x" YField="y1" />
<ext:LineSeries Titles="Line 2" XField="x" YField="y2" Fill="true" />
<ext:AreaSeries XField="xForArea" YField="y1">
<Renderer Handler="attributes.fill = 'white'; return attributes;" />
</ext:AreaSeries>
</Series>
</ext:Chart>
</form>
</body>
</html>