PDA

View Full Version : [CLOSED] Add target line to Column Chart



livehealthierGF
May 30, 2013, 7:09 PM
Is is possible to add a horizontal "target line" to the column chart? I want to add one or more static horizontal lines at certain location(s) on the vertical axis. I do not want lines for every Major tick mark on the grid. I would also like to be able to style them as dotted/dashed lines.

Baidaly
May 30, 2013, 11:45 PM
Hello!

You should add a new line series. Please, take a look at the following sample:



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public void Page_Load(object sender, EventArgs e)
{
Store1.Data = new object[]
{
new
{
X = 1,
Y = 0,
Line1X = 0,
Line1Y = 10
},
new
{
X = 50,
Y = 50,
Line1X = 50,
Line1Y = 10
},
new
{
X = 100,
Y = 100,
Line1X = 100,
Line1Y = 10
}

};
Store1.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel
runat="server"
Title="Line Chart"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;">
<Store>
<ext:Store
runat="server"
ID="Store1"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="X" Type="Int" />
<ext:ModelField Name="Y" Type="Int" />
<ext:ModelField Name="Line1X" Type="Int" />
<ext:ModelField Name="Line1Y" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="X"
Title="X"
Position="Bottom">
</ext:NumericAxis>

<ext:NumericAxis
Fields="Y"
Title="Y"
Position="Left">
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="X" YField="Y">
<Label Field="Y" Display="Under" Color="#0F0"></Label>
</ext:LineSeries>
<ext:LineSeries XField="Line1X" YField="Line1Y" ShowMarkers="False" ShowInLegend="False">
<Style StrokeDashArray="10" StrokeWidth="3" Fill="#000" Stroke="#FFF" FillOpacity="1"></Style>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>