How to Build a JavaScript Sales Dashboard Application
Tags: webdev, devops, javascript, tutorial
Published: 2024-02-02 17:03:22

---
canonical_url: https://developer.mescius.com/blogs/how-to-build-a-javascript-sales-dashboard-application
description: Learn how to build a JavaScript sales dashboard application using ActiveReportsJS. See more and build your app today.
---
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.

![Sales Dashboard Report](//cdn.mescius.io/umb/media/glqjzmz4/sales_dashboard_report.png?rmode=max&width=749&height=492)

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](#binding)
*   [Adding Table and Chart Controls](#adding)
*   [Creating Interactive Filters](#creating)
*   [Loading and Exporting Dashboards in a JavaScript App](#loading)

If you’d like to see the complete report and application, you can find it [<span>here</span>](https://developer.mescius.com/activereportsjs/demos/Reports/RuntimeFilters/purejs).

## <a id="binding"></a>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:

![Add DataSource](//cdn.mescius.io/umb/media/g1sc2oec/add_datasource.png)

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:

![Create DataSource Window](//cdn.mescius.io/umb/media/ljcjiq3p/create_datasource_window.png)

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:

![Create DataSet Window](//cdn.mescius.io/umb/media/jlslejuj/create_dataset_window.png)

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:

![Year Parameter](//cdn.mescius.io/umb/media/45slih4y/year_parameter.png)

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:

![Continent Parameter](//cdn.mescius.io/umb/media/mwie2jg2/continent_parameter.png)

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.

## <a id="adding"></a>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:

![Report Base](//cdn.mescius.io/umb/media/cnsan0fe/report_base.png?rmode=max&width=736&height=471)

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:

![Sales Chart Settings](//cdn.mescius.io/umb/media/pulfvk1w/sales_chart_settings.png)

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:

![Sales Chart Filter](//cdn.mescius.io/umb/media/fkufwdph/sales_chart_filter.png)

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:

![Table and Chart Formatting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mn8wzvskd7pggnsueb1.png)

![Table and Chart Formatting 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fs8gni2txfq9r28h0sz.png)

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

![Sales Chart Complete](//cdn.mescius.io/umb/media/uprhu3xf/sales_chart_complete.png)

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:

![Report Charts](//cdn.mescius.io/umb/media/acjpxffx/report_charts.png?rmode=max&width=666&height=441)

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:

![Table Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18wj2yo9bm1lb5tin77z.png)

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

![Table Properties 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzbs2bbki0o4vyt6zabz.png)

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:

![Gross Table](//cdn.mescius.io/umb/media/a3gls5nl/goss_table.png)

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:

![Table Set Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyws0qzplzd66ysfvfm9.png)

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:

![Details Group](//cdn.mescius.io/umb/media/pzdfxq2u/details_group.png)

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

![Details Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fslk62cca4q5gmcq2myo.png)

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.

![Tablix Wizard](//cdn.mescius.io/umb/media/rrso41cm/tablix_wizard.png?rmode=max&width=750&height=566)

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:

![Sales Tables Complete](//cdn.mescius.io/umb/media/pfhfr3ru/sales_tables_complete.png?rmode=max&width=740&height=252)

## <a id="creating"></a>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:

![Filter Continents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uduhzeqzhtpkxyqks76h.png)

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

![Filter Years](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irkbt7y3hkrs1wq84ppj.png)

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:

![Sales Dashboard Report](//cdn.mescius.io/umb/media/glqjzmz4/sales_dashboard_report.png?rmode=max&width=714&height=469)

![Sales Dashboard Update](//cdn.mescius.io/umb/media/ligph2u1/sales_dashboard_update.png?rmode=max&width=716&height=470)

## <a id="loading"></a>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:

![Report Viewer](//cdn.mescius.io/umb/media/jqymhq02/report_viewer.png?rmode=max&width=752&height=483)

## 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.

Happy coding!