ActiveRegionUrl in Legend and ChartSeriesItem

Thread is closed for posting
10 posts, 2 answers
  1. Shash
    Shash avatar
    14 posts
    Member since:
    Dec 2006

    Posted 16 Nov 2009 Link to this post

    I have following test code and I cannot get the Active Region to work, any help would be highly appreciated

    <telerik:RadChart ID="RadChart3" runat="server" Skin="Mac" Width="900" Height="500"
                <Series> 
                    <telerik:ChartSeries ActiveRegionUrl="javascript:alert('123')" Name="testSeries" Type="Line" > 
                        <Items> 
                            <telerik:ChartSeriesItem ActiveRegion-Url="javascript:alert('item1')" XValue="1" YValue="12"></telerik:ChartSeriesItem>  
                            <telerik:ChartSeriesItem ActiveRegion-Url="javascript:alert('item2')" XValue="2" YValue="15"></telerik:ChartSeriesItem>  
                            <telerik:ChartSeriesItem ActiveRegion-Url="javascript:alert('item3')" XValue="3" YValue="20"></telerik:ChartSeriesItem>  
                        </Items> 
                    </telerik:ChartSeries> 
                </Series> 
                <PlotArea> 
                   <XAxis LayoutMode="Inside" AutoScale="false" LabelStep="10" > 
                        <Appearance ValueFormat="Number" MajorGridLines-Visible="false"
                            <LabelAppearance RotationAngle="45" Position-AlignedPosition="Top"
                            </LabelAppearance> 
                        </Appearance> 
                    </XAxis> 
                    <YAxis IsZeroBased="true"
                    </YAxis> 
                </PlotArea> 
        </telerik:RadChart> 
     
  2. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 19 Nov 2009 Link to this post

    Hi Shash,

    You can find a similar task discussed in this KB article. It will shed some light on the items ActiveRegion usage, but for the legend there is an additional detail. You need to modify the legend item, and if it is an auto-generated one - it is available in the BeforeLayout event handler.

    In addition, the items ActiveRegion for line series is only available for the pointmarks, so you will need to set them to be visible. You can still leave their default transparent color.

    I have attached a small example.

    Best regards,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shash
    Shash avatar
    14 posts
    Member since:
    Dec 2006

    Posted 24 Nov 2009 Link to this post

    I saw that your example works, I'm trying to add the series in the code-behind. Following is an example. I get a runtime error when I use the following aspx and cs files.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!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>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
        <telerik:RadChart ID="RadChart3" runat="server" Skin="Mac" Width="900" Height="500"
                <PlotArea> 
                    <XAxis LayoutMode="Inside" AutoScale="false" LabelStep="10"
                        <Appearance ValueFormat="Number" MajorGridLines-Visible="false"
                            <LabelAppearance RotationAngle="45" Position-AlignedPosition="Top"
                            </LabelAppearance> 
                        </Appearance> 
                    </XAxis> 
                    <YAxis IsZeroBased="true"
                    </YAxis> 
                </PlotArea> 
            </telerik:RadChart> 
     
        </div> 
        </form> 
    </body> 
    </html> 
     

    using System; 
    using System.Collections; 
    using System.Configuration; 
    using System.Data; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.HtmlControls; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Xml.Linq; 
    using Telerik.Charting; 
     
    public partial class Default2 : System.Web.UI.Page 
        void RadChart3_BeforeLayout(object sender, EventArgs e) 
        { 
            foreach (var item in RadChart3.Legend.Items) 
            { 
                item.ActiveRegion.Attributes = "onclick=alert('abc');"
            } 
     
        } 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadChart3.BeforeLayout += new EventHandler<EventArgs>(RadChart3_BeforeLayout); 
            if (!IsPostBack) 
            { 
                ChartSeries chartSeries = new ChartSeries(); 
                chartSeries.Name = "Test Series 1"
                chartSeries.Type = ChartSeriesType.Line; 
                chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName; 
                chartSeries.Appearance.PointMark.Visible = true
                chartSeries.ActiveRegionToolTip = "Test Series"
                for (int i = 0; i < 10; i++) 
                { 
                    ChartSeriesItem chartSeriesItem = new ChartSeriesItem(); 
                    chartSeriesItem.XValue = i; 
                    chartSeriesItem.YValue = (i * 5) + (i % 2 == 0 ? (2*i) : (-2*i)); 
                    chartSeriesItem.ActiveRegion.Attributes = "onclick=alert(\'" + i.ToString() + "\')"
                    chartSeries.Items.Insert(chartSeries.Items.Count, chartSeriesItem); 
                } 
                RadChart3.Series.Add(chartSeries); 
            } 
        } 
     

  5. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 26 Nov 2009 Link to this post

    Hi Shash,

    Please, use this line:

    chartSeries.Items.Add(chartSeriesItem);

    rather than calling Insert method -- the last line in the for loop.

    Sincerely,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Shash
    Shash avatar
    14 posts
    Member since:
    Dec 2006

    Posted 30 Nov 2009 Link to this post

    Thanks Ves. That works. I also noticed that the ViewState is huge if i use a single chart with about 100 points. WebPage is taking longer to load. Is there a way to reduce this ViewState. I'm not interested in any postbacks from the Chart.
  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 02 Dec 2009 Link to this post

    Hi Shash,

    In this case you can simply disable it. Note, that you will need to generate the chart on every postback.

    Sincerely,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Edgar
    Edgar avatar
    5 posts
    Member since:
    Jul 2010

    Posted 23 Jan 2012 Link to this post

    if I am using something like:

    chartSeriesItem.ActiveRegion.Attributes =

     

    "onmouseover=\"this.parentNode.parentNode.style.cursor = 'hand';\" onmouseout=\"this.parentNode.parentNode.style.cursor = 'default';\" onclick=openDialog('" + url.ToString() + "')";

    how can I set the Height and Width for the openDialog??

     

  9. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 26 Jan 2012 Link to this post

    Hello Edgar,

    I am not sure about your openDialog implementation. Basically, you need to send the width and height as parameters. You can check the OpenWindow function in this example. You can modify it, so that width and height are received as parameters instead of hard-coding them.


    Best regards,
    Ves
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. Edgar
    Edgar avatar
    5 posts
    Member since:
    Jul 2010

    Posted 26 Jan 2012 Link to this post

    But I want to open as popup in ModalDialog, that's why I am using the javascript openDialog()
  11. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 31 Jan 2012 Link to this post

    Hi Edgar,

    The approach would be similar to my last suggestion. You can create your own method, which takes the width and height as arguments (you can populate them on the server) and then sets the size of the new window.

    Best regards,
    Ves
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017