How to Add JavaScript Drill-Through Charts in Your Web Application
Tags: webdev, devops, javascript, tutorial
Published: 2024-03-07 21:25:46

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-javascript-drill-through-charts
description: Learn how to add JavaScript drill-through charts in your web application. See more from ActiveReportsJS today.
---
**What You Will Need**
- ActiveReportsJS
- Visual Studio Code

**Controls Referenced**
- [Chart](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/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 [<span>here</span>](https://github.com/joel-p-parks/ARJS-Drillthrough-JavaScript "https://github.com/joel-p-parks/ARJS-Drillthrough-JavaScript").

## 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 [<span>here</span>](https://developer.mescius.com/activereportsjs/download "https://developer.mescius.com/activereportsjs/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.

![Data Panel](//cdn.mescius.io/umb/media/dgqnfbtl/data_panel.png)

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:

![Data Source Wizard](//cdn.mescius.io/umb/media/jync3a4a/data_source_wizard.png)

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:

![Data Set Wizard](//cdn.mescius.io/umb/media/checnjgb/data_set_wizard.png)

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:

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Uri/Path

</td>

<td valign="top">

/DimChannels

</td>

</tr>

<tr>

<td valign="top">

Parameter

</td>

<td valign="top">

$select, ChannelKey, ChannelName

</td>

</tr>

<tr>

<td valign="top">

Json Path

</td>

<td valign="top">

$.value.*

</td>

</tr>

</tbody>

</table>

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:

![Sales Set Wizard](//cdn.mescius.io/umb/media/yddl4dcx/sales_set_wizard.png)

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:

![SalesYear Parameter](//cdn.mescius.io/umb/media/p2nlj5f2/salesyear_parameter.png)

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

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Name

</td>

<td valign="top">

SalesYear

</td>

</tr>

<tr>

<td valign="top">

Data Type

</td>

<td valign="top">

Integer

</td>

</tr>

<tr>

<td valign="top">

Hidden

</td>

<td valign="top">

True

</td>

</tr>

<tr>

<td valign="top">

Default Value

</td>

<td valign="top">

Non-Queried

</td>

</tr>

<tr>

<td valign="top">

Values

</td>

<td valign="top">

2007

</td>

</tr>

</tbody>

</table>

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:

![ChannelKey Parameter](//cdn.mescius.io/umb/media/ugbfxj2z/channelkey_parameter.png)

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:

![Chart Plot Button](//cdn.mescius.io/umb/media/1g4mieuu/chart_plot_button.png)

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:

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category

</td>

<td valign="top">

{MonthName(Month(DateKey))}

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category Sort Expression

</td>

<td valign="top">

{Month(DateKey)}

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category Sort Direction

</td>

<td valign="top">

Ascending

</td>

</tr>

<tr>

<td valign="top">

Style - Line Color

</td>

<td valign="top">

Black

</td>

</tr>

<tr>

<td valign="top">

Style - Line Width

</td>

<td valign="top">

2pt

</td>

</tr>

<tr>

<td valign="top">

Symbol - Background Color

</td>

<td valign="top">

White

</td>

</tr>

<tr>

<td valign="top">

Symbol - Style

</td>

<td valign="top">

Solid

</td>

</tr>

<tr>

<td valign="top">

Dimensions - Width

</td>

<td valign="top">

7.5in

</td>

</tr>

<tr>

<td valign="top">

Dimensions - Height

</td>

<td valign="top">

6in

</td>

</tr>

</tbody>

</table>

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**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Title

</td>

<td valign="top">

Empty String (Reset default value)

</td>

</tr>

<tr>

<td valign="top">

Line - Visible

</td>

<td valign="top">

False

</td>

</tr>

<tr>

<td valign="top">

Labels - Color

</td>

<td valign="top">

#1a1a1a

</td>

</tr>

<tr>

<td valign="top">

Labels - Angle

</td>

<td valign="top">

-45

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Show Grid Lines

</td>

<td valign="top">

True

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Width

</td>

<td valign="top">

0.25pt

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Color

</td>

<td valign="top">

#ccc

</td>

</tr>

</tbody>

</table>

**Y-Axis**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Title

</td>

<td valign="top">

Empty String (Reset default value)

</td>

</tr>

<tr>

<td valign="top">

Line - Visible

</td>

<td valign="top">

False

</td>

</tr>

<tr>

<td valign="top">

Labels - Color

</td>

<td valign="top">

#1a1a1a

</td>

</tr>

<tr>

<td valign="top">

Labels - Format

</td>

<td valign="top">

c2

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Show Grid Lines

</td>

<td valign="top">

True

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Width

</td>

<td valign="top">

0.25pt

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Color

</td>

<td valign="top">

#ccc

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Major Interval

</td>

<td valign="top">

20000

</td>

</tr>

</tbody>

</table>

**Header**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Caption

</td>

<td valign="top">

Monthly {Lookup(@ChannelKey, ChannelKey, ChannelName, “Channels”)} Sales in {@SalesYear}

</td>

</tr>

<tr>

<td valign="top">

Text Color

</td>

<td valign="top">

#3da7a8

</td>

</tr>

<tr>

<td valign="top">

Font Size

</td>

<td valign="top">

22pt

</td>

</tr>

<tr>

<td valign="top">

Font Weight

</td>

<td valign="top">

Bold

</td>

</tr>

</tbody>

</table>

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:

![SubReport Chart Preview](//cdn.mescius.io/umb/media/amtpsxhz/subreport_chart_preview.png?rmode=max&width=732&height=580)

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:

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category

</td>

<td valign="top">

{Year(DateKey)}

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category Sort Expression

</td>

<td valign="top">

{Year(DateKey)}

</td>

</tr>

<tr>

<td valign="top">

Encoding Common - Category Sort Direction

</td>

<td valign="top">

Ascending

</td>

</tr>

<tr>

<td valign="top">

Dimensions - Width

</td>

<td valign="top">

7.5in

</td>

</tr>

<tr>

<td valign="top">

Dimensions - Height

</td>

<td valign="top">

7.5in

</td>

</tr>

</tbody>

</table>

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**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Title

</td>

<td valign="top">

Empty String (Reset default value)

</td>

</tr>

<tr>

<td valign="top">

Line - Visible

</td>

<td valign="top">

False

</td>

</tr>

</tbody>

</table>

**Y-Axis**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Title

</td>

<td valign="top">

Empty String (Reset default value)

</td>

</tr>

<tr>

<td valign="top">

Line - Visible

</td>

<td valign="top">

False

</td>

</tr>

<tr>

<td valign="top">

Labels - Color

</td>

<td valign="top">

#3c3c3c

</td>

</tr>

<tr>

<td valign="top">

Labels - Format

</td>

<td valign="top">

c2

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Show Grid Lines

</td>

<td valign="top">

True

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Width

</td>

<td valign="top">

0.25pt

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Style

</td>

<td valign="top">

Dashed

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Color

</td>

<td valign="top">

#ccc

</td>

</tr>

<tr>

<td valign="top">

Major Grid - Major Interval

</td>

<td valign="top">

50000

</td>

</tr>

</tbody>

</table>

**Header**

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="760">

<tbody>

<tr>

<td valign="top">

<b>

Property

</b>

</td>

<td valign="top">

<b>

Value

</b>

</td>

</tr>

<tr>

<td valign="top">

Caption

</td>

<td valign="top">

Annual Sales by Channel

</td>

</tr>

<tr>

<td valign="top">

Font Size

</td>

<td valign="top">

20pt

</td>

</tr>

<tr>

<td valign="top">

Font Weight

</td>

<td valign="top">

Bold

</td>

</tr>

</tbody>

</table>

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

![Stacked Chart Base](//cdn.mescius.io/umb/media/oi0lfamg/stacked_chart_base.png?rmode=max&width=608&height=619)

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}**:

![ChannelKey Details](//cdn.mescius.io/umb/media/v3mbnin0/channelkey_details.png)

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:

![Stacked Chart Breakdown](//cdn.mescius.io/umb/media/xludunxo/stacked_chart_breakdown.png?rmode=max&width=698&height=689)

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:

![Stacked Chart Complete](//cdn.mescius.io/umb/media/tdpjjoti/stacked_chart_complete.png)

## 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 **Type**property 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:

![View Complete](//cdn.mescius.io/umb/media/0ebhhnd4/viewer_complete.png?rmode=max&width=760&height=384)

## 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 [<span>here</span>](https://github.com/joel-p-parks/ARJS-Drillthrough-JavaScript "https://github.com/joel-p-parks/ARJS-Drillthrough-JavaScript").

Happy coding!