Click on a bar event

Thread is closed for posting
3 posts, 0 answers
  1. Adigard
    Adigard avatar
    61 posts
    Member since:
    Oct 2011

    Posted 19 Jan 2012 Link to this post

    Greetings,
    I have a RadChart control, this is basically just bars, but i need to open a RadWindow when i click on a specific bar
    Is this possible?
    Thank you in advance
  2. Adigard
    Adigard avatar
    61 posts
    Member since:
    Oct 2011

    Posted 19 Jan 2012 Link to this post

    this is what i have so far :


    List<ConnexionFrequencyByCompany> ConnexionFrequencybyCompanyList = new List<ConnexionFrequencyByCompany>();
    ConnexionFrequencybyCompanyList = DAaccess.LibDataUsers.LibDataUsers.GetHistoUsersByCompanyByFrequency((DateTime)RadDateTimePicker1.SelectedDate, (DateTime)RadDateTimePicker2.SelectedDate);
     
     
    foreach (var item in ConnexionFrequencybyCompanyList)
    {
     
        ChartSeries series1 = new ChartSeries(item.NameCompany, ChartSeriesType.Bar);
     
        RadChart1.Series.Add(series1);
        series1.AddItem(Convert.ToDouble(item.NumberOfConnections));
     
     
     
        RadChart1.Visible = true;
    }

    I need to be able to click on the bars to open a popup or radwindow/
    i already checked out this link : http://www.telerik.com/help/aspnet/chart/advancedopenpopup.html


    Not working for me unfortunately
    thanks in advance
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 23 Jan 2012 Link to this post

    Adigard:

    This works for me to open a popup window when clicking on the second bar in the series (value=11).

    Default.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function ShowPopUpDialog(url) {
                window.open(url, 'MyPopUpWindow', 'height = 500px, width = 500px', true);
            
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
            <div>
                <telerik:RadChart ID="RadChart1" runat='server'>
                </telerik:RadChart>
            </div>
        </form>
    </body>
    </html>

    Default.aspx.cs:
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using Telerik.Charting;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                LoadChart();
            }
        }
     
        private void LoadChart()
        {
            RadChart1.Series.Clear();
     
            ChartSeries c = new ChartSeries("Series1", ChartSeriesType.Bar);
            c.AddItem(5);
            c.AddItem(11);
            c.AddItem(25);
            c.AddItem(23);
            RadChart1.AddChartSeries(c);
     
            //Define which chart series item will be clickable
            int i = 1;
      
            RadChart1.Series[0].Items[i].ActiveRegion.Url = "javascript:ShowPopUpDialog('http://www.telerik.com');"
        }
    }
     
    See attached "radchart_seriesclick_popsupwindow.png" image for display on clicking chart series item #2.

    Hope this helps!
Back to Top