This is a migrated thread and some comments may be shown as answers.

How to make Chart Title a hyperlink - HtmlChart

4 Answers 206 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 29 Dec 2015, 11:54 AM

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

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Vasil
Telerik team
answered on 01 Jan 2016, 04:26 PM
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
0
Paul
Top achievements
Rank 1
answered on 05 Jan 2016, 04:31 PM

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

 

0
Zach
Top achievements
Rank 1
answered on 02 Aug 2016, 08:24 PM
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?
0
Paul
Top achievements
Rank 1
answered on 03 Aug 2016, 08:21 AM

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

 

Tags
Chart (HTML5)
Asked by
Paul
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Paul
Top achievements
Rank 1
Zach
Top achievements
Rank 1
Share this question
or