How to Pass Hidden Field like values to RadChart?

[Thirunarayanan]

I have a RadChart Bar graph. It shows date values in X axis and some count on the Bars. My Bar graph has 2 series.

Now I am working on a requirement - User clicks on a Bar and will be shown a Pop-up window. I need to pass some database table identifier values as a comma separated string to the pop up to fetch some data to show in the pop up such that the comma separated values correspond to different bars in the graph. I could not find a way to bind this comma separated string value to any of the Bars (chartseriesitems). Do not know if at all this is possible.

This is my data source for the RadChart:

var listDisengTrains = Final.Select(g => new { Date =
Convert.ToDateTime(g.Date).ToOADate(), Trains1 = g.Trains1,
Trains2 = g.Trains2, Trains1RecIds = "12345,23456", Trains2RecIds = "34567,45678,56789"});

As of now, I have bound Date to the X-axis, Trains1 to Series 1 and Trains2 to Series 2.
I do not know to which property of the ChartSeriesItem class can I bind Trains1RecIds and Trains2RecIds. So that I can get these comma separated string values in the code behind when the user clicks on any of the Bars in the graph and pass it as a parameter to a javascript function as shown below.

protected void ChartTrains_ItemDataBound(object
sender, ChartItemDataBoundEventArgs e)<BR>{<BR>if (e.SeriesItem !=
null)<BR>{<BR>if (e.ChartSeries.Index %
2 == 0)<BR>{ <BR>e.SeriesItem.ActiveRegion.Url =
string.Format("javascript:ShowTrainInfoForm({0}",
?)<BR>}<BR>else<BR>{<BR>;<BR>}<BR><BR>}<BR>}<BR>​

Please help me to solve this.

TIA
thiru

[Danail Vasilev]

Hello Thiru,

You can use the DataItem of the argument in order to access columns from the data source. For example:
ASPX:

<telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="600px" OnItemDataBound="RadChart1_ItemDataBound">
    <Series>
        <telerik:ChartSeries Type="Bar" Name="Series 1" DataYColumn="Trains1">
        </telerik:ChartSeries>
        <telerik:ChartSeries Type="Bar" Name="Series 2" DataYColumn="Trains2">
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <XAxis AutoScale="false" DataLabelsColumn="Date" Appearance-ValueFormat="ShortDate" Appearance-CustomFormat="yyyy/MM/dd">
        </XAxis>
    </PlotArea>
</telerik:RadChart>

C#:

protected void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
{
    if (e.SeriesItem != null)
    {
        if (e.ChartSeries.Index % 2 == 0)
        {
            string trains1RecIDs = (e.DataItem as DataRowView).Row["Trains1RecIds"].ToString();
            e.SeriesItem.ActiveRegion.Url = trains1RecIDs;
        }
    }
}
protected void Page_Load(object sender, EventArgs e)
{
    RadChart1.DataSource = ConvertColumnToODate(GetData(), "Date");
    RadChart1.DataBind();
}

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("ID");
    dt.Columns.Add("Trains1");
    dt.Columns.Add("Trains2");
    dt.Columns.Add("Date");
    dt.Columns.Add("Trains1RecIds");
    dt.Columns.Add("Trains2RecIds");

    dt.Rows.Add(1, 30, 24, new DateTime(2012, 05, 10), "http://www.telerik.com", 4567);
    dt.Rows.Add(2, 10, 44, new DateTime(2012, 05, 13), "http://www.bing.com", 5678);
    dt.Rows.Add(3, 20, 54, new DateTime(2012, 05, 15), "http://www.google.com", 6789);

    return dt;
}

protected DataTable ConvertColumnToODate(DataTable dt, string columnName)
{
    for (int i = 0; i < dt.Rows.Count; i++)
    {

        dt.Rows[i][columnName] = (DateTime.Parse(dt.Rows[i][columnName].ToString())).ToOADate();
    }
    return dt;
}

Regards,
Danail Vasilev
Telerik

 

 

[Thirunarayanan]

Thanks much. Just in time. And surprisingly, this just dawned on me today while i was travelling to my office. Will try and see how this works.