This is a migrated thread and some comments may be shown as answers.

[Solved] Change DataFieldY on series Server Side

1 Answer 148 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 01 Apr 2014, 01:39 PM

RadHtmlChart-DataFieldY.zip

Hello Tom,

Please find below an example on how this can be achieved.

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">

<PlotArea>

<Series>

<telerik:ScatterLineSeries DataFieldY="SellQuantity1" DataFieldX="SellDate">

<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">

</LabelsAppearance>

<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />

</telerik:ScatterLineSeries>

</Series>

<XAxis BaseUnit="days">

<TitleAppearance Text="Sell Date">

</TitleAppearance>

<LabelsAppearance DataFormatString="d">

</LabelsAppearance>

<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>

<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Quantity">

</TitleAppearance>

<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>

<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>

</YAxis>

</PlotArea>

<ChartTitle Text="Sold Cars per Date">

</ChartTitle>

</telerik:RadHtmlChart>

<telerik:RadButton ID="RadButton1" runat="server" Text="Change DataFieldY1" ButtonType="ToggleButton" ToggleType="Radio" GroupName="gp1" OnClick="RadButton1_Click1" Checked="true" />

<telerik:RadButton ID="RadButton2" runat="server" Text="Change DataFieldY1" ButtonType="ToggleButton" ToggleType="Radio" GroupName="gp1" OnClick="RadButton1_Click2" />

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("SellQuantity1", typeof(int));

dt.Columns.Add("SellQuantity2", typeof(int));

dt.Columns.Add("SellDate", typeof(DateTime));

dt.Rows.Add(1, 2, 12, new DateTime(2011, 06, 12));

dt.Rows.Add(2, 5, 15, new DateTime(2011, 12, 12));

dt.Rows.Add(3, 6, 16, new DateTime(2012, 06, 17));

dt.Rows.Add(4, 4, 14, new DateTime(2012, 09, 18));

dt.Rows.Add(5, 7, 17, new DateTime(2013, 03, 18));

return dt;

}

protected void RadButton1_Click1(object sender, EventArgs e)

{

(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).DataFieldY = "SellQuantity1";

}

protected void RadButton1_Click2(object sender, EventArgs e)

{

(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).DataFieldY = "SellQuantity2";

}

You can find the full runnable VS example in the attached archive.

Regards,
Danail Vasilev
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.