How to Use a JavaScript Reporting Tool in a GoLang Web App
Tags: javascript, webdev, tutorial
Published: 2022-05-25 20:31:08

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-a-javascript-reporting-tool-in-a-golang-web-app
description: Learn how to use a JavaScript reporting tool in a GoLang web application. See more from ActiveReports today.
---

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

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

**Prerequisites**   

The following content assumes that you have GoLang installed on your machine. If you don't have it, you can obtain it from the [GoLang website](https://go.dev/dl/). It would be best if you also had ActiveReportsJS installed on your machine. If you don't have it, you can obtain it from the [ActiveReportsJS website](https://www.grapecity.com/activereportsjs/download).

**<a id="create-app"></a>Create a GoLang Application**

For this tutorial, we will use the [Echo](https://echo.labstack.com/) Go web framework.   
To create a new GoLang application that uses the Echo web framework, run the following commands from a terminal or command prompt.

```
    mkdir ReportingOnTheGo && cd ReportingOnTheGo
    go mod init ReportingOnTheGo
    go get github.com/labstack/echo/v4
```

Then open the newly created ReportingOnTheGo directory in your favorite code editor, such as Visual Studio Code, create a new file called “server.go,” and add the following code at the beginning:

```
    package main

    import (
        "log"
        "net/http"
        "encoding/csv"
        "strconv"
        "os"   
        "github.com/labstack/echo/v4"
    )
```

**Create a data model for the JSON API**  

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, which has 100 records.  
There are many fields in the dataset, but we will only use several of them in this tutorial. Insert the following code fragment into the server.go file:

```
    type Sale struct {
        Region  string `json:"region"`
        ItemType string `json:"itemType"`
        UnitsSold int `json:"unitsSold"`
      }
```

**<a id="initialize-data"></a>Initialize the data from a CSV file**  

Download and unzip the data from the [100-Sales-Records.zip](https://files.grapecity.com/gc-website-media/oixlijxy/100-sales-records.zip?version=1&modificationDate=1647348357123&api=v2)  archive into the "data" directory of the application. Add the following code into the server.go file:

```
    func ReadCsv(filename string) ([][]string, error) {
       f, err := os.Open(filename)
        if err != nil {
            return [][]string{}, err
        }
        defer f.Close()
        lines, err := csv.NewReader(f).ReadAll()
        if err != nil {
            return [][]string{}, err
        }
        return lines, nil
    }

    func main() {   
        lines, err := ReadCsv("data\\100 Sales Records.csv")
        if err != nil {
            log.Fatal(err)
        }
        var sales []Sale
        for _, line := range lines[1:] {
            unitsSold, err := strconv.Atoi(line[8])
            if err != nil {
                log.Fatal(err)
            }
            sale := Sale{
                Region: line[0],
                ItemType: line[2],
                UnitsSold: unitsSold,
            }
            sales = append(sales, sale)        
        }
    }
```

**<a id="configure-endpoints"></a>Configure JSON API endpoints**

At the end of the **main()** function, add the following code that initializes the web-server, adds the JSON endpoint that returns the sales data, and serves the static files from the **assets** folder:

```
        e := echo.New()    
        e.Static("/", "assets")
        e.GET("api/sales", func(c echo.Context) error {
            return c.JSON(http.StatusOK, sales)
        }   )
        e.Logger.Fatal(e.Start(":3000"))
```

In the command prompt or terminal, run the **go run server.go** command from the application's root folder and open the browser to [http://localhost:3000/api/sales](http://localhost:3000/api/sales) to see the data the JSON API returns.

**<a id="create-arjs"></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:3000/api/sales](http://localhost:3000/api/sales) in the **ENDPOINT** field and click the **Save Changes** button.

![Data Source](https://files.grapecity.com/gc-website-media/mvglysa3/01-data-source.png?width=500&height=380.2345058626466)

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](https://files.grapecity.com/gc-website-media/ig2gk5x5/02-sales.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/fkkjrc0s/03-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 **assets** 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 application's assets folder, create an index.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>
```

Restart the application using the **go run server.go** command and visit the browser to [http://localhost:3000/index.html](http://localhost:3000/index.html) 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/ghrh2fb2/04-report-output.png?width=500&height=415.8354114713217)