How to Build a JavaScript Sales Dashboard Application

In sales-focused web applications, the ability for users to interact with and manipulate data is crucial in providing real-time insights into sales performance and key metrics. These dashboards empower sales teams to make data-driven decisions, monitor trends, and identify areas of improvement. Thankfully, ActiveReportsJS makes it easy to build your own interactive sales dashboard through the use of its JavaScript Report Designer and gives users the ability to export their dashboard into multiple file formats.

In this article, we will go over how you can take advantage of ActiveReportsJS’s interactive filtering capabilities to create your own interactive sales dashboard for a JavaScript application. In this article, we’ll be covering the following topics:

• Binding a Data Source and Parameters
• Adding Table and Chart Controls
• Creating Interactive Filters
• Loading and Exporting Dashboards in a JavaScript App

If you’d like to see the complete report and application, you can find it here.

Ready to Get Started? Download ActiveReportsJS Today!

Binding a Data Source and Parameters

The first thing we’ll need to do is bind a data source to our report to create a set of the data we plan to use. We will use embedded JSON for our report; you can find this JSON in the repository in the file SalesByContinentChannelCategoryYearStore.json. To give you an example of what the data that we’re working with looks like, I’ve included a snippet below:

{
  "ContinentName": "Asia",
  "ChannelName": "Store",
  "StoreName": "Contoso Canberra Store",
  "CalendarYear": 2008,
  "ProductCategoryName": "Computers",
  "TotalCost": 1462542.42,
  "SalesAmount": 3377157.91
},

To create a data source object in the report, navigate to the Data panel in the top-right and click the Add button next to DataSource:

Then, when the data source creation window pops up, we’re going to choose “Embedded JSON” from the Data Provider dropdown and select our JSON file:

When you hit Save Changes, you’ll see your data source in the DataSource panel.

Next, click the small plus button next to your data source; this will allow us to create a data set from this data source:

As you can see here, there’s not much for us to set up; all we really need to create our data set is to define the JSON path; in this case, we want all of the JSON available from our data source, so we set the path to $.*. Once that’s set, you can click Validate, and if everything is set up correctly, you won’t receive an error. You can then click the Save Changes button to finish creating the data set.

The last thing we will do in this section is create two parameters. In ActiveReportsJS, parameters are a way to allow your reports to be more dynamic, either programmatically or through user interaction with the report.

Beneath the data set that we created, there is another section called Parameters. Click the Add button to bring up the parameter creation panel:

There are quite a few inputs here, but we only need to focus on a few of them.

As you can see, we’ve set the Name and Data Type of the property; the name is used to reference the parameter in the report, and the data type is self-explanatory. We’re also setting two other properties, Hidden and Values.

Hidden means that, by default, this parameter won’t show up in the parameter selection window; that’s fine because we’ll be directly using the report to set the parameters. We’re also setting a value, in this case, a numeric value. This will serve as the default value for this parameter but can be changed by the users down the line.

Now, we’ll add a second parameter:

As you can see, this parameter has been set up similarly to the last, but there are two key differences.

First, we’ve turned the Multivalue property to true, allowing users to select multiple values from what is provided by the parameter.

Second, we’ve added three items to our Values. Since this is a multivalue parameter, by default, we want all of the options selected when the report dashboard loads.

Now that we’ve got our data and parameters properly set up, we can move on to adding some tables and charts to the report.

Adding Table and Chart Controls

Now that we have our data connections and parameters, it’s time to add some controls to a report. To start, we’ve created a basic landscape report with a header:

The first control we’ll add is a set of charts; to do this, drag a chart control from the control toolbox onto the report area. This will bring up the chart creation wizard. You will want to ensure that the selected data set is AnnualSummaries and the chart type selected is Bar before hitting Next.

This will bring up a window that allows us to bind data from the data set to the chart. Set up the fields as follows:

Finally, in the final window, we set the palette to Aspect. We have a chart in our report; however, there’s still more that we’ll do to style this chart.

Select the chart and click the Add button next to the Filters property. We’re going to add a filter for each of our parameters:

This will allow the chart to update as users interact with the report.

There’s a few more optional formatting options that we’re going to add to the chart; you can see the chart areas and properties that we’ve modified below:

When complete and we preview the report, the chart should look like the following:

We will do the same thing with a second chart, except instead of using ChannelName as the Data Categories field, we will use ProductCategoryName.

In addition, we’ve added the same filters that we did when setting up the first chart and modified the same properties that we did with the first chart, with one difference. Instead of using MediumTurquoise as the background color, we use Gold.

When we preview the report, we should see the following:

Now, we can add our table controls. The first one that we will add will sit above our charts, so go ahead and drag a table control from the table toolbox and drop it into the report area.

This creates a table template; we’re going to modify this template to fit our needs. First, delete the bottom two rows of the table and then add a second header row; we will display our data using header rows.

Now, for the first row, fill out the properties as follows:

And then, in the second row, add the following values/properties to the cells:

Finally, we’ll need to add some filters so this table updates when a user interacts with the dashboard. We’ll be using the same filters we did previously, so you can feel free to mimic the settings from the previous filter setup we did into this table’s filters.

Now, when we preview the report, we should see our completed table:

Next, we will create a table to display the top 10 stores by sales and drag another table onto the report area beneath the “Sales by Channel” chart.

For this chart, we’re going to delete the footer row once again, but we’re not going to delete the second row in the table. Now, merge the cells of the first row into one cell. You’re also going to want to add another row beneath the first. For this table, we’re going to be using two header rows.

Now that you have your table, you can set it up as follows:

We'll need to do two more things before this table is complete: add a table filter and add a group filter. The table filter is identical to all the filters we’ve set up previously; however, the group filter is slightly different.

For the group filter, select one of the cells and click on the <Details Group> text that appears in the popup next to the table:

This will bring up the Details properties in the properties panel. Adjust the properties to match what is below:

The final table that we’ll add is actually going to be a Tablix control, also known as a Pivot Table. Drag one from the control toolbox onto the report area, bringing up the tablix wizard.

The tablix wizard makes it easy for use to add data to our tablix, as well as some additional changes, such as filters and aggregates. For your tablix, make sure it matches what is above.

Like with previous controls, add the same filter that uses CalendarYear and ContinentName as the filter values.

In addition, for the cell showing the sum of sales, set the formatting to $#,##0,,M.

Finally, above the tablix control, place a textbox that reads “Sales by Category and Location”.

When complete, you should be able to preview the report and see our new tables in action:

Creating Interactive Filters

Now that we have all of the core controls and data in the report, it's time to add some controls that allow users to interact with the report.

To do this, we will use two table controls placed at the top of our page in our header. However, we only want a single cell in this table; delete the first and third rows and the first and third columns of each of these tables.

Now that we’ve got our tables, it’s time to add the data and set a few properties. The first table is going to serve as a filter for continents:

And the second table is going to serve as a filter for the years:

Now, when we preview the report, we should see our lists of years and countries, as well as be able to click on one of the values to see the dashboard update:

Loading and Exporting Dashboard in a JavaScript App

Now that our dashboard report is complete, it’s time to load it into a JavaScript application, so that users can view, edit, and export the dashboard.

Incorporating the ActiveReportsJS JavaScript Report Viewer in your application is easier than you might expect. For file references, we will be using the ARJS CDN to reference them. Inside of your HTML file’s header tag, add the following references:

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

These are all of the files that we’ll be using, including the core ARJS JavaScript file, the CSS files, and files to allow our users to export our report.

Now, inside of a style tag, add the following CSS:

#viewer-host {
  width: 100%;
  height: 100vh;
}

Now, we’ll add the div with the viewer-host ID that we referenced in our CSS:

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

And finally, the JavaScript that will load the viewer and our report:

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("InteractiveDashboard.rdlx-json");

Now, you may be wondering where we placed our rdlx-json file. For the purposes of this article, we're placing it in the same folder as our index.html file, but you can place it wherever you want; just be sure that the path to the report is correct.

Now, to run this, we will be using the Live Server plugin for Visual Studio Code. When I run the live server for this file, we see the following in the browser:

Conclusion

And with that, we’ve reached the end of the article. As you can see, with ActiveReportsJS, it's easy to create interactive dashboards for your users, as well as give them the ability to export their dashboards.

If you’d like to try ActiveReportsJS, you can download your free trial today. Additionally, if you’d like to download the report and application built in this article, you can find the repository here.

Happy coding!