How to Pass Hidden Field like values to RadChart?

Thread is closed for posting
3 posts, 0 answers
  1. Thirunarayanan
    Thirunarayanan avatar
    2 posts
    Member since:
    May 2014

    Posted 07 May 2014 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 10 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thirunarayanan
    Thirunarayanan avatar
    2 posts
    Member since:
    May 2014

    Posted 12 May 2014 in reply to Danail Vasilev Link to this post

    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.
Back to Top