How to Use a JavaScript Reporting Tool in Your Java Web Application
Tags: javascript, webdev, devops, tutorial
Published: 2022-06-03 18:35:02

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-javascript-reporting-tool-in-your-java-web-application
description: Learn how to use a JavaScript reporting tool in your Java web application. See more from ActiveReportsJS today.
---

ActiveReportsJS is a 100% client-side reporting tool with zero server dependencies. It means that you can use ActiveReportsJS together with any web server, including a Java application. This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with a Java application. By the end, you will be able to do the following:

*   [Create a Java application serving a JSON API using Spring framework](#create-app)
*   [Initialize the data from a CSV file](#add-data)
*   [Configure JSON API endpoints](#configure-json)
*   [Create an ActiveReportsJS report to visualize the data from the JSON API](#create-report)
*   [Create a static HTML page to display the report in the report viewer](#create-html)  

### Prerequisites 

The following content assumes that you have A Java™ Development Kit installed on your machine. [<span>Spring framework guidelines</span>](https://spring.io/quickstart) recommend using [BellSoft Liberica JDK](https://bell-sw.com/) version 8 or version 11\. It would help if you also had ActiveReportsJS installed on your device. If you don't have it, you can obtain it from the [<span>ActiveReportsJS website</span>](https://www.grapecity.com/activereportsjs/download).

### <a id="create-app"></a>Create a Java application

For this tutorial, we will use the Spring web framework.   
To create a new Java application that uses Spring web framework, you can use the ["Spring Initializr" website](https://start.spring.io/). This article assumes that the Name and the Artifact of the newly created application are "ReportingOnSpring" and the rest of the generator parameters have default values as in the picture below. The application needs the "Spring Web" dependency to be added.

![ReportingOnSpring](https://files.grapecity.com/gc-website-media/3s3klojt/01-reporting-on-spring.png?width=500&height=319.28934010152284)

Click the "Generate" button, download the archive, unzip it, and open the "ReportingOnSpring" folder in your favorite code editor, such as Visual Studio Code.

### <a id="add-data"></a>Add Application Data

We will use the Sales dataset that you can download from the [E for Excel](https://eforexcel.com/wp/downloads-18-sample-csv-files-data-sets-for-testing-sales/) website. It offers datasets of various sizes, starting from 100 records to 5M records. For simplicity, we will use the first dataset with 100 records.

Download and unzip the data from the [100-Sales-Records.zip](https://files.grapecity.com/gc-website-media/duxhqm5h/100-sales-records.zip)  archive into the "src\main\resources" directory of the application. 

There are many fields in the dataset, but we will only use several of them in this tutorial. 

Add the "com.opencsv" package into the dependency list of the application in the "pom.xml" file.

       

```
 <dependency>

          <groupId>com.opencsv</groupId>

          <artifactId>opencsv</artifactId>

          <version>5.3</version>

      </dependency>
```

Add the "Sale.java" file into the "src\main\java\com\example\ReportingOnSpring" folder and add the following content to it:
    

```
package com.example.ReportingOnSpring;
    import com.opencsv.bean.CsvBindByName;

    public class Sale {
        @CsvBindByName(column = "Region")
        private String region;    

        @CsvBindByName(column = "Item Type")
        private String itemType;

        @CsvBindByName(column = "Units Sold")
        private Integer unitsSold;    

        public String getRegion() {
            return region;
        }

        public void setRegion(String region) {
            this.region = region;
        }

        public String getItemType() {
            return itemType;
        }

        public void setItemType(String itemType) {
            this.itemType = itemType;
        }

        public Integer getUnitsSold() {
            return unitsSold;
        }

        public void setUnitsSold(Integer unitSold) {
            this.unitsSold = unitSold;
        }

        @Override public String toString() {
            return "Sale{" +
                    "region='" + region + '\'' +
                    ", itemType='" + itemType + '\'' +
                    ", unitSold=" + unitsSold +
                    '}';
        }
    }

```

### <a id="configure-json"></a>Configure JSON API EndPoints

Open the "src\main\java\com\example\ReportingOnSpring\ReportingOnSpringApplication.java" file and replace its content with the following:
    
```
package com.example.ReportingOnSpring;

    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.util.ResourceUtils;

    import com.opencsv.bean.CsvToBeanBuilder;

    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileReader;
    import java.util.List;

    @SpringBootApplication
    @RestController
    public class DemoApplication {

        public static void main(String[] args) {
            SpringApplication.run(DemoApplication.class, args);
        }

        @GetMapping("/api/sales")
        public List<Sale> sales() throws FileNotFoundException {
            File file = ResourceUtils.getFile("classpath:100 Sales Records.csv");
            List<Sale> sales = new CsvToBeanBuilder(new FileReader(file))
                    .withType(Sale.class)
                    .withIgnoreLeadingWhiteSpace(true)
                    .build()
                    .parse();
            return sales;
        }

    }

```

Run the application using the "mvnw spring-boot:run" command, and open the "http://localhost:8080/api/sales" URL to ensure that the JSON API was configured properly and returns the sales data.

### <a id="create-report"></a>Create an ActiveReportsJS Report

Let's now create a report that visualizes the data from the JSON API.  

In the [Standalone Report Designer Application](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App), click the **File** menu and select the **Continuous Page Layout** template for a newly created report.  

Open the [Data panel](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#data-panel) of the property inspector and click the **Add** button.  

In the Data Source editor dialog, type  http://localhost:8080/api/sales in the **ENDPOINT** field and click the **Save Changes** button.

![DataSource](https://files.grapecity.com/gc-website-media/kp0jcvnl/02-datasource.png?width=500&height=380)

Click the **+** icon near **DataSource** in the Data panel.  

In the **Data Set Editor** dialog, type **Sales** in the NAME field, and $.* in the **JSON Path **field.  

Click the **Validate** button, ensure that the **DataBase Fields** section displays** [3 items] **text, and click the **Save Changes** button.

![Sales Data Set](https://files.grapecity.com/gc-website-media/33ambkxg/03-sales-dataset.png?width=475.4358161648177&height=500)

Expand the [toolbox](https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox) using the **Hamburger** menu located on the toolbar's left side.  

Drag and drop the **Chart **item from the toolbox to the report page area's top-left corner. The **Chart Wizard** dialog appears. Select the Bar type and click the Next button on the first screen.  

On the second screen of the dialog, configure the data as shown in the following image and click the **Next** button.

![Chart Wizard](https://files.grapecity.com/gc-website-media/t02lmodn/04-chart-wizard.png?width=476.8740031897927&height=500)

On the third screen, click the **Finish** button.  

Resize the chart report item to fill the entire width of the report page. Click the chart legend to load its properties into the properties panel and set the **Orientation** property to **Horizontal **and **Position** property to **Bottom**.  

Click the **File **menu and save the newly created report in the "src\main\resources\static"folder of the application under the name **SalesReport.rdlx-json**.

### <a id="create-html"></a>Create a Static HTML Page to Display the Report

In the "src\main\resources\static"folder of the application, create the report.html file and replace its content with the following code: 

```
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sales Report</title>
        <link
        rel="stylesheet"
        href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
        type="text/css"
      />
      <link
        rel="stylesheet"
        href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
        type="text/css"
      />
      <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
      <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
      <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
      <style>
        #viewer-host {
          width: 100%;
          height: 100vh;
        }
      </style>      
    </head>

    <body>
        <div id="viewer-host"></div>
        <script>
            var viewer = new ActiveReports.Viewer("#viewer-host");
            viewer.open('SalesReport.rdlx-json');
          </script>  
    </body>
    </html>

```

Open the http://localhost:8080/report.html in the browser to see the report. If you followed the steps correctly, you should see a report that displays the data from the JSON API.

![Report Output](https://files.grapecity.com/gc-website-media/pjtht52j/05-report-output.png?width=500&height=415.8354114713217)