Radchart Binding

[dipen shah]

Hi,

Need help to bind version name against Date. Normal value we can bind. But version value come as "Name:SARA Version:1.59.25.2" and "Name:SARA Version:1.59.25.3". How to plot this value against Date. Is there any way? I attached sample code.



.aspx

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="cc1" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head runat="server">

 

 

<title></title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<div>

 

 

<telerik:RadChart ID="testPlot" runat="Server" Width="700px"

 

 

AutoLayout="True" Skin="Office2007"

 

 

DefaultType="Line">

 

 

<PlotArea>

 

 

<XAxis>

 

 

<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">

 

 

<MajorGridLines PenStyle="Solid" Color="209, 222, 227" Width="0"></MajorGridLines>

 

 

<TextAppearance TextProperties-Color="51, 51, 51"></TextAppearance>

 

 

</Appearance>

 

 

<AxisLabel>

 

 

<TextBlock>

 

 

<Appearance TextProperties-Color="Black"></Appearance>

 

 

</TextBlock>

 

 

</AxisLabel>

 

 

</XAxis>

 

 

<YAxis>

 

 

<Appearance Color="134, 134, 134" MinorTick-Color="134, 134, 134" MinorTick-Width="0" MajorTick-Color="134, 134, 134">

 

 

<MajorGridLines Color="209, 222, 227"></MajorGridLines>

 

 

<MinorGridLines Color="233, 239, 241"></MinorGridLines>

 

 

<TextAppearance TextProperties-Color="51, 51, 51"></TextAppearance>

 

 

</Appearance>

 

 

<AxisLabel>

 

 

<TextBlock Text="">

 

 

<Appearance TextProperties-Color="Black"></Appearance>

 

 

</TextBlock>

 

 

</AxisLabel>

 

 

</YAxis>

 

 

<Appearance>

 

 

<FillStyle MainColor="White" FillType="Solid"></FillStyle>

 

 

<Border Color="134, 134, 134"></Border>

 

 

</Appearance>

 

 

</PlotArea>

 

 

<Appearance Corners="Round, Round, Round, Round, 6">

 

 

<FillStyle FillType="Image">

 

 

<FillSettings ImageDrawMode="Flip" BackgroundImage="{chart}" ImageFlip="FlipX"></FillSettings>

 

 

</FillStyle>

 

 

<Border Color="138, 138, 138"></Border>

 

 

</Appearance>

 

 

 

<Series>

 

 

<cc1:ChartSeries Name="Series 1" Type="Line">

 

 

<Appearance>

 

 

<FillStyle MainColor="55, 167, 226" SecondColor="22, 85, 161" FillType="Solid">

 

 

<FillSettings GradientMode="Vertical"></FillSettings>

 

 

</FillStyle>

 

 

<PointMark Visible="True" Figure="Circle" FillStyle-MainColor="Red" FillStyle-SecondColor="Red" Dimensions-Height="5px" Dimensions-Width="5px" Dimensions-AutoSize="false">

 

<

 

FillStyle MainColor="Red" SecondColor="Red"></FillStyle>

 

 

</PointMark>

 

 

<TextAppearance TextProperties-Color="Black"></TextAppearance>

 

 

<Border Color="69, 115, 167" />

 

 

</Appearance>

 

 

</cc1:ChartSeries>

 

 

</Series>

 

 

<Legend Visible="false">

 

 

<Appearance Visible="False" Position-AlignedPosition="TopRight" Dimensions-Margins="15.4%, 3%, 1px, 1px"

 

 

Dimensions-Paddings="2px, 8px, 6px, 3px">

 

 

<ItemTextAppearance TextProperties-Color="Black">

 

 

</ItemTextAppearance>

 

 

<ItemMarkerAppearance Figure="Square">

 

 

<Border Color="134, 134, 134"></Border>

 

 

</ItemMarkerAppearance>

 

 

<FillStyle MainColor=""></FillStyle>

 

 

<Border Color="Transparent"></Border>

 

 

</Appearance>

 

 

</Legend>

 

 

<ChartTitle TextBlock-Text="">

 

 

<Appearance Position-AlignedPosition="Top">

 

 

<FillStyle MainColor=""></FillStyle>

 

 

</Appearance>

 

 

<TextBlock Text="">

 

 

<Appearance TextProperties-Font="Tahoma, 13pt" TextProperties-Color="Black"></Appearance>

 

 

</TextBlock>

 

 

</ChartTitle>

 

 

</telerik:RadChart>

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

.code

using

 

System;

 

using

 

System.Collections.Generic;

 

using

 

System.Linq;

 

using

 

System.Web;

 

using

 

System.Web.UI;

 

using

 

System.Web.UI.WebControls;

 

using

 

System.Data;

 

using

 

Telerik.Charting;

 

using

 

Telerik.Web.UI;

 

using

 

System.Web.UI.DataVisualization.Charting;

 

public

 

partial class Default4 : System.Web.UI.Page

 

{

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

if (!Page.IsPostBack)

 

{

 

DataTable deviceTable = new DataTable();

 

deviceTable.Columns.Add(

new DataColumn("Date"));

 

deviceTable.Columns.Add(

new DataColumn("Value"));

 

 

 

DataRow newRow = deviceTable.NewRow();

 

newRow[

"Date"] = "6/29/2010";

 

newRow[

"Value"] = "Version 1.59.25.2";

 

deviceTable.Rows.Add(newRow);

 

 

DataRow newRow1 = deviceTable.NewRow();

 

newRow1[

"Date"] = "6/30/2010";

 

newRow1[

"Value"] = "Version 1.59.25.3";

 

deviceTable.Rows.Add(newRow1);

 

DataRow newRow2 = deviceTable.NewRow();

 

newRow2[

"Date"] = "7/01/2010";

 

newRow2[

"Value"] = "Version 1.59.25.4";

 

deviceTable.Rows.Add(newRow2);

testPlot.DataSource = deviceTable;

testPlot.PlotArea.XAxis.DataLabelsColumn =

"Date";

 

testPlot.Series[0].DataYColumn =

"Value";

 

testPlot.DataBind();

testPlot.Visible =

true;

 

testPlot.PlotArea.YAxis.AxisLabel.Visible =

true;

 

testPlot.PlotArea.XAxis.AxisLabel.Visible =

true;

 

testPlot.PlotArea.XAxis.AxisLabel.TextBlock.Text =

"Date";

 

 

 

}

}

}

[Ves]

Hi dipen shah,

Please, find below my answer provided in the support ticket you have started. I have attached a small example as well.

A string value cannot be YValue in RadChart and thus a string column cannot be set as DataYColumn for a ChartSeris. The YValue defines how high a point will be placed in the graph (or how high a bar would be in case of a bar series).

In this case you can introduce a fake YValue for your items (ex. 1 means "Version 1.59.25.2", 2 means "Version 1.59.25.3", etc). Than you can customize the Y axis to show these versions as labels. Please, find attached a small example, based on your code. This example shows a chart which is similar to the one you have shown.

Greetings,
Ves
the Telerik team