How to Add JavaScript Drill-Through Charts in Your Web Application

What You Will Need
• ActiveReportsJS
• Visual Studio Code

Controls Referenced
• Chart

Tutorial Concept
JavaScript Drill-Through Charts — A method for users to analyze hierarchical data presented in a web application. This tutorial shows how to integrate drill-through charts using JavaScript, empowering users to gain valuable insights from your data.

Drill-through charts have become a valuable tool for users trying to gather more information from their data. These charts allow users to easily navigate multiple layers of data and hone in on specific data points. The need for these types of charts has risen from increasingly complex data sets where users have to handle large amounts of information.

Thankfully, ActiveReportsJS makes it easy to incorporate charts into your JavaScript report, as well as bind your chart data together through the use of parameterized drill-through navigation, allowing your users to traverse between them.

In this article, we’ll review how you can add drill-through chart functionality to your JavaScript report using ActiveReportsJS. We’ll be covering the following topics:

• Create a Report and Bind a Data Source
• Adding Subreport Parameters
• Build Line and Stacked Column Charts
• Setup Drill-through Navigation between Reports
• Load the Report into a JavaScript Application

If you’d like to see the completed application, you can find the repository here.

Create a Report and Bind a Data Source

The first thing we’ll need to do is set up the basics of the report: binding it to a data source. To create our report, we will use the ActiveReportsJS Standalone Report Designer, which you can download .

On the right-hand side of the designer is the Data panel, which is used to set up the report’s data sources and data sets.

As for these sections, the Data Sources section is where we outline where we’ll be getting our data from, the Data Set section is where we will store the data that we retrieve, and the Parameters section allows us to include interactivity between the report and users; we’ll be returning to this later when we incorporate drill-through functionality.

Click the Add button in the data sources section to bring up the creation wizard:

This allows us to select where the data we use will be coming from. In our case, we’re retrieving JSON data from an OData data source so that we will select JSON Format as the data format, Remote JSON Provider as the source type, and then we will put the URL for our endpoint. With that set up, we can hit Save Changes, and the data source has been connected.

Now, to set up the data set, click on the Plus button next to the source to bring up the data set wizard:

This is where the data that we retrieve will live. However, to make sure that we get the data that we want, we have to set up a few parameters, outlined below:

The Uri/Path tells the OData service where we want to retrieve the data from, the Parameter property limits what fields we retrieve data from at the location, and then the Json Path outlines what data we want to retrieve from our selected fields; in this case, all of the data.

Now, before we close out the wizard, we have to make sure to validate the data. This is just a check to ensure the data can be retrieved for the report. If everything works correctly, you should see items appear in the Database Fields array, like in the image above.

We will do this again to create a new data set. You can see the setup below:

And just like that, we’ve bound our data sets to the report.

Before we move to the next section, however, we will save this template we’ve created as two different reports. These will each be used to display the charts.

Click the Save As button at the top of the designer, and save the first report as DrillThroughReport.rdlx-json and the second as DrillThroughSubReport.rdlx-json.

Next, we will add some charts to bind the data to.

Adding Subreport Parameters

Now, we’ll set up the parameters to allow users to navigate between the main report (the master chart) and subreports (the sub-charts).

As mentioned previously, parameters are used to allow a level of interactivity between the user and the report; in this case, we will use them to display the correct data in the subreport when a user drills through to the data.

Open up the DrillThroughSubReports.rdlx-json file in the Report Designer. Click the Add button in the Parameters section of the data panel to bring up the parameter view:

This is where we can define the type of data our parameters accept. For this parameter, set the following properties:

Here, we’re giving the report the name we’ll be using to reference this parameter and the type of data to accept. It’s also being given a default value to display in case, for some reason, there is an issue with the value this parameter has been given.

One other thing to point out is the Hidden property. By default, when a parameter is set on the report, the Report Viewer will display a panel allowing users to set their values. However, in this case, the values are being given to the parameters from the master report, so we don’t want users to have access to this parameter, so we set it to hidden.

Now, we’re going to set up a second parameter similar to the first:

And now, we can set up the subreport’s data set to make use of these parameters properly.

Click on the pencil icon next to the Sales data set of the report, and like when we set up the $select filter, we’re going to set up another, called $filter. Beneath the $select filter, add another one, give it the name $filter, and the following value:

ChannelKey+eq+{@ChannelKey}+and+Year(DateKey)+eq+{@SalesYear}

Now, click Validate; this will bring up another window displaying the default values that we had set up previously. Click Save & Run, and then if everything is set up correctly, it should validate.

Build Line and Stacked Column Charts

Now, we can include the charts we will use in the reports. Since we’ve already got the subreport open, we will complete that one first.

To start, drag and drop a chart control from the control toolbox on the left-hand side into the report area. The chart creation wizard will come up; you can close that; we will be using the properties panel to set up the chart.

First, select the chart, and in the properties panel, expand the Plot list and click on the pencil icon:

This will open up the Plot object of the chart. Then, expand the Values list and add a new item. Set the VALUE property to {SalesAmount} and the Aggregate to Sum. This will allow us to display the sum of each month’s total sales.

Then, back in the Plot properties, set the following properties:

Now that we have the chart set up and the data that we want to plot bound, we’re going to do some additional styling and formatting of the X and Y axis, as well as the header. To select a specific element of the chart, expand the hamburger button in the top-left of the Report Designer, click on Explorer, and select the element you want to edit. To see the properties that we’re changing, see the tables below:
X-Axis

Y-Axis

Header

The Lookup function that we created in the Caption property of the header takes the value of the first argument — the ChannelKey parameter — and finds the row with the same ChannelKey in the Channels data set, returning the corresponding ChannelName.

The chart will look distorted in the designer, but once you hit the Preview button, you’ll be able to see what the chart will look like at runtime:

Now that the chart has been set up and bound to the subreport’s parameter, you can save the report and open the DrillThroughMainReport.rdlx-json file. We’ll now add a chart to that report, which we can use to drill down to the subreport’s chart.

Like the previous chart, drag and drop a chart control onto the main report and close the chart creation wizard. We will first set up the type of report this will be. Select the chart, and in the Plot Template property, select the Column Stacked chart.

Now, in the properties panel, expand the Plot list and click on the pencil icon, which will open up the Plot object of the chart.

Add a new item to the Values list and set the VALUE property to {SalesAmount} and the Aggregate to Sum, just like the previous report.

Then, back in the Plot properties, set the following properties:

Now, like with the last chart, we’re going to do some additional styling to the X and Y Axis, as well as the Header:

X-Axis

Y-Axis

Header

Now, if we preview the report, we’ll see the following:

However, we’re not done. The chart should split each of the columns among the different sales channels, as well as show the legend. To do so, there are a few more properties that we’ll need to set up.

Go back and select the Plot of the chart control, and add a new item to the Details list of the plot. For this detail item, set the value to {ChannelKey}:

Next, hit the back arrow to return to the plot’s property list. In the Colors property of the Encoding — Colors section, add a new item and set its value as follows:

{Lookup(ChannelKey, ChannelKey, ChannelName, "Channels")}

This use of Lookup is the same as when we used it previously in the header of the subreport’s chart.

Now, in the Report Explorer, select the Legend — Color item. Set the Orientation property to Horizontal and Position to Top. Now, if we preview the report, it will show each column broken up into their respective section breakdowns:

The last thing to do before moving on to binding the two reports together is to display some labels and tooltips on the chart so that users have an easier time reading the data.

Return to the Plot item, and in the Tooltip Template dropdown, select Color Field Value. Then, in the Template property under the Label Text section, set the value to {valueField.value:C2}, and the Position property to Center.

Now, we can preview the report and see a complete breakdown of the data being displayed:

Setup Drill-through Navigation between Reports

Now that both reports have been set up and have their Parameters set up correctly, it is time to configure the link between the main report and the subreport so that users have the ability to use drill-through navigation.

Return to the Plot component of the chart, and in the Action section of the properties panel, set the Typeproperty to Jump to Report, and set the Jump to Report property to DrillThroughSubReport.rdlx-json.

Note that your reports must be saved in the same directory in order for the DrillThroughSubReport to show up in the dropdown.

Now, all we need to do is pass values from the main report to the subreport. Since we have two parameters on the subreport, we will set up two parameters here.

Under the Parameters property of the Action section, add two parameters. The first will have a Parameter Name of ChannelKey and a Value of {ChannelKey}, while the second will have a name of SalesYear and a value of {Year(DateKey)}.

Now, when you preview the report, you’ll be able to click on the different columns of the stacked column chart, and it will navigate to the subreport, displaying the drill-through data of the line chart.

Load the Report into a JavaScript Application

Now that the reports have been set up and drill-through functionality has been implemented, the last thing to do is display the report in a JavaScript application. To do so, we’ll be using the ActiveReportsJS JavaScript Report Viewer.

First, we need to add the ActiveReportsJS library to our application. We’ll use the MESCIUS CDN to load the JavaScript files for this. Simply add the following <script> tags inside of your <head> tag:

<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

This will load ActiveReportsJS’s CSS files, as well as all of the required JavaScript files for the JavaScript Report Viewer and its export settings.

Next, beneath the <script> tags add the following:

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

And inside of the <body> tags, add the following markup:

<div id="viewer-host"></div>

This creates a div with a large area for the JavaScript Report Viewer to sit in.

Now, it’s time to add the Report Viewer control to the application. Add the following beneath the <body> tags:

<script>
  var viewer = new ActiveReports.Viewer(#viewer-host);
  viewer.open(DrillThroughReport.rdlx-json);
</script>

This will load the control into the div we created and open the DrillThroughReport.rdlx-json report we created in the previous steps. Be sure that the report files are in the same location as the HTML file loading them or that you are properly denoting the path to your report. You will need to ensure that your subreports are also there.

Now, we can run the application and see the master report in the browser. We’ll use the Live Server plugin for Visual Studio Code to run our application. When the application boots up, if everything has been set up correctly, you should see the following:

Conclusion

And with that final step done, we’ve completed the application. We’ve covered a lot in this piece, but when you step back and look at the steps taken, it really is that easy to implement drill-through functionality with ActiveReportsJS.

If you’d like to download the reports and the application created in this article, you can find them .

Happy coding!

Originally published at https://developer.mescius.com on February 20, 2024.