In a previous post I described how to convert an SSRS graph into a Highcharts graph by consuming the XML output of the report from the SSRS Web Service and converting that to an input for a Highcharts graph.

That article seemed to be very popular (in fact was the top most popular for a while), so I decided to take this concept a step further, In this article I will show you how, using JavaScript injection into SSRS reports, you can display a Highcharts graph from within SSRS itself (just like any other SSRS report) when the SSRS report is rendered into HTML.

I have created a working example of the SSRS and Highcharts integration (1 RDL 1 JS file), I will be referencing this code throughout the article, and also show which bits of the code you will need to edit to get Highcharts to show on your own SSRS setup.

The concept is very simple and is based on the fact that the SSRS report authoring schema and the SSRS rendering engine supports embedding a limited number of HTML tags, which we can use to execute click-driven JavaScript and control the placement of our Highcharts (or any JS based graphing library) with the SSRS report container.

The two HTML elements used within the SSRS report in the example are the <a> and the <span> tags.

SSRS JavaScript Injection through <a> (Link) Tag

There is an excellent article by Oud-medewerkers that demos how to inject JavaScript into SSRS via an Link tag, the main idea is simple:

• Add a Textbox element to an SSRS report.
• In the Value expression of the Textbox, add an HTML Hyperlink element <a> with the href attribute performing a JavaScript function (as shown in the image below). Be sure to escape your code properly.

• In the Placeholder Properties of the Selected Text inside the TextBox, select the HTML radio button under the Markup Type section.

And that is it really, once you click on the link (in the HTML rendered SSRS report), the JavaScript will be executed.

To get Highcharts on run in SSRS, we need to use the technique above to add a reference to a JS file on the server in the Head section, this JS file will have all the necessary code to create a placeholder for the Highcharts graph, and render it on the SSRS report. The expression in the Value field looks like this:

You’ll need to replace “http://ai-prd-ssrs-1/highchartdemo.js” in the code above with your local path.

Highcharts SSRS Placeholder using <span> Tag

The <div> tags are used by Highcharts (in the RenderTo:<div-id> parameter) as a placeholder of where the chart should be rendered on the page, but since SSRS does not allow a <div> tag to be rendered, we have to get around the issue by adding a placeholder <span> tag in SSRS as an intermediate placeholder which, using JavaScript, we will find and append the required <div> tag onto.

You can add a <span> tag in SSRS using the same technique described above, the expression in the Value field looks like this:

JavaScript for Loading Highcharts in SSRS Reports

The JS file is really self explanatory, the main structure is divided into 3 section, the first section is the latest JQuery library code, the second section is the latest Highcharts library code, and the last section is some custom written JavaScript to write the <div> placeholder and load the Highchart graph, I have combined all JS into a single file so everything can be loaded at once, and I wouldn’t need to add code to handle waiting on JS files to be retrieved from the server before executing certain functions.

And that is it really! now you can render your Highcharts graphs from within SSRS itself. This concept could obviously be extended, for example I use a demo chart in the JS file, but instead you could make a call to the SSRS Web Service and grab the XML data as input to generate the Highcharts graph. I’ve demoed this technique in the previous article.