RadChart Clickable Region

Thread is closed for posting
3 posts, 0 answers
  1. Dave
    Dave avatar
    2 posts
    Member since:
    Dec 2007

    Posted 16 May 2014 Link to this post

    I have a RadChart that is a stackbar chart.  We have a click event tied to the bars in the chart, which works fine.  However, if a series is empty we'd like for the user to be able to click in the region where the bar "would" be so we can provide a dialog and allow them to take action.  So far I have not been able to find a way for that to work in the RadChart or the RadHtmlChart.

    And alternative would be to make the axis labels clickable.  However, I haven't been able to find a way to get that to work with the RadChart or RadHtmlChart either.  Are either of these possible?
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 20 May 2014 Link to this post

    Hello Dave,

    Empty values in RadChart for stacked bar series are not displayed and therefore I am afraid it is not possible to click on them.

    Regarding clicking on x-axis items you can use active regions. For example:
    ASPX:
    <telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="600px" >
        <Series>
            <telerik:ChartSeries Type="StackedBar" Name="Series 1">
                <Items>
                    <telerik:ChartSeriesItem YValue="30">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="10">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
            <telerik:ChartSeries Type="StackedBar" Name="Series 2">
                <Items>
                    <telerik:ChartSeriesItem YValue="30">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="10">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea>
            <XAxis AutoScale="false">
                <Items>
                    <telerik:ChartAxisItem TextBlock-Text="item 1"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 2"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 3"></telerik:ChartAxisItem>
                </Items>
            </XAxis>
            <YAxis>
            </YAxis>
        </PlotArea>
    </telerik:RadChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadChart1.PlotArea.XAxis.Items[0].ActiveRegion.Url="javascript:alert(1);";
        RadChart1.PlotArea.XAxis.Items[1].ActiveRegion.Url = "javascript:alert(2);";
        RadChart1.PlotArea.XAxis.Items[2].ActiveRegion.Url = "javascript:alert(3);";
    }



    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. Dave
    Dave avatar
    2 posts
    Member since:
    Dec 2007

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

    this worked for me.

    thanks!
Back to Top