HtmlRadChart bar action url

3 posts, 0 answers
  1. Humberto
    Humberto avatar
    2 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2014 Link to this post


    Hello my name is Humberto and i need put a link in a stakbar of my RadHtmlChart but i can't find some way to do it
    can you help me?
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 11 Feb 2014 Link to this post

    Hi Humberto,

    You can handle OnClientClicked/OnClientHovered client-side event of the chart where can be obtained additional columns from the data source that contains the links which are to be redirected. For example:
    JavaScript:
    <script type="text/javascript">
        function OnClientSeriesClicked(sender, args) {
            var currLink = args.get_dataItem().myLinks;
            window.open(currLink, "_blank");
        }
    </script>
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400" OnClientSeriesClicked="OnClientSeriesClicked">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="myYValues" Name="Series 1">
                    <LabelsAppearance>
                        <ClientTemplate>
                            Redirect to #=dataItem.myLinks#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <TooltipsAppearance>
                        <ClientTemplate>
                            Redirect to #=dataItem.myLinks#
                        </ClientTemplate>
                    </TooltipsAppearance>
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="myXValues">
            </XAxis>
        </PlotArea>
        <ChartTitle Text="Chart Title">
        </ChartTitle>
    </telerik:RadHtmlChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID");
        dt.Columns.Add("myYValues");
        dt.Columns.Add("myLinks");
     
        dt.Rows.Add(1, 30, "http://www.telerik.com");
        dt.Rows.Add(2, 10, "http://www.bing.com");
        dt.Rows.Add(3, 20, "http://www.google.com");
     
        return dt;
    }

    You may also find useful ClientTemplate for Series Labels and Tooltips help article.


    Regards,
    Danail Vasilev
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Humberto
    Humberto avatar
    2 posts
    Member since:
    Feb 2014

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

    Thanks a lot Danail Vasilev !!!
    i can do what you show me

    Best Regards.
Back to Top