How to make Chart Title a hyperlink - HtmlChart

5 posts, 1 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2011

    Posted 29 Dec 2015 Link to this post

    Hi,

    Is there a way to turn the chart title of a RadHtmlChart into a hyperlink when you click on it like you could with the RadChart using the ActiveRegion properties?

    Many thanks,

    Andy

     

  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 01 Jan Link to this post

    Hi Andy,

    With the current version it can not be done out of the box using the provided configuration.

    It can be done using custom JavaScript, since the SVG supports links. You can find the header element(by it's text) and wrap it inside <a> tag with xlink set.

    Regards,
    Vasil
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Jan Link to this post

    Thanks for the tip Vasil. I managed to get the functionality I wanted using JavaScript. My situation was complicated by the fact there could be many charts on one page. I've included code below in case anyone else needs it.

    RadHtmlChart.ChartTitle.Text = "RadHtmlChartTitle" & RadHtmlChart.ChartTitle.Text
    RadHtmlChart.Attributes("titlelink") = "yourlocationhere"
    RadHtmlChart.ClientEvents.OnLoad = "RadHtmlChart_OnLoad"

    function RadHtmlChart_OnLoad(sender) {
     
        // Get the value of the hyperlink from the main chart div
        var titleLink = $("#" + sender.get_id())[0].getAttribute("titlelink");
     
        // Find the SVG text element for the chart title (identified by the RadHtmlChartTitle prefix)
        var title = $("#" + sender.get_id() + " text:contains('RadHtmlChartTitle')");
     
        // Remove the prefix from the actual title text
        title[0].textContent = title[0].textContent.replace("RadHtmlChartTitle", "");
     
        // Create an SVG "a" element and set its href tag to titleLink
        var svg = $("#" + sender.get_id() + " svg")[0];
        var svgNS = svg.getAttribute('xmlns');
        var svgXLinkNS = svg.getAttribute('xmlns:xlink');
        var a = document.createElementNS(svgNS, "a");
        a.setAttributeNS(svgXLinkNS, "xlink:href", titleLink);
     
        // Wrap the title text element with the "a" element
        title.wrap(a);
     
    }

    All the best,

    Andy

     

  5. Zach
    Zach avatar
    11 posts
    Member since:
    Jul 2014

    Posted 02 Aug in reply to Andrew Link to this post

    I'm trying to use this example code on my site.  It works in IE, but not Firefox or Chrome.  Anybody else having that issue?
  6. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2011

    Posted 03 Aug in reply to Zach Link to this post

    Hi Zach,

    Good job you asked. I ended up changing my approach again because I needed to keep the hyperlink if a user clicked on the legend to add/remove a series or the chart was in a tab strip. I haven't tested the below because its a sub-set of my actual code. It also doesn't have to be so complicated if you don't need to worry about tab strips. It does work in IE, Firefox and Chrome though...

    RadChart.ChartTitle.Text = yourtitle
    RadChart.Attributes("titletext") = RadChart.ChartTitle.Text
    RadChart.ClientEvents.OnLoad = "RadHtmlChart_OnLoad"
    RadChart.ClientEvents.OnLegendItemClick = "RadHtmlChart_AfterLegendClick"

    RadTabStrip.OnClientTabSelected = "RadHtmlChart_TabSelected"

    RadChart.Attributes("titlelink") = yourlink

    var HTMLCharts = [];
     
    function RadHtmlChart_OnLoad(sender) {
     
        HTMLCharts[HTMLCharts.length] = sender.get_id();
     
        // timeout required for use in tab control
        setTimeout(function () { RadHtmlChart_TitleLink(sender.get_id()); }, 50);
     
    }
     
    function RadHtmlChart_TabSelected(sender, eventArgs) {
         
        // Re-link titles after tab change
        for (var i = 0; i < HTMLCharts.length; i++) {
            RadHtmlChart_TitleLink(HTMLCharts[i]);
        }
     
    }
     
    function RadHtmlChart_AfterLegendClick(args) {
     
        var ChartTitleId = args.sender.element[0].id;
        setTimeout(function () { RadHtmlChart_TitleLink(ChartTitleId); }, 50);
     
    }
     
    function RadHtmlChart_TitleLink(id) {
     
        // Get the value of the hyperlink from the main chart div
        var titleLink = $("#" + id)[0].getAttribute("titlelink");
        var titleText = $("#" + id)[0].getAttribute("titletext");
     
        if ((titleLink) && (titleText)) {
     
            var title = $("#" + id + " text:contains('" + titleText + "')");
     
            // Turn title text into a hyperlink using onclick
            if (title.length > 0) {
     
                title[0].setAttribute("style", title[0].getAttribute("style") + "cursor:pointer;");
                title[0].setAttribute("onclick", "top.location.href = '" + titleLink + "';");
     
            }
     
        }
     
    }

    All the best,

    Andy

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017