How to Use a JavaScript Reporting Tool in Your Rust Web Application
Tags: javascript, webdev, tutorial
Published: 2022-07-29 20:39:59

---
canonical_url: https://www.grapecity.com/blogs/how-to-use-javascript-reporting-tool-in-your-rust-web-application
description: Learn how to use a JavaScript reporting tool in your Rust 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 Rust application. This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with a Rust application. By the end, you will be able to do the following:

*   [Create a Rust application serving a JSON API using the Actix Web framework](#create)
*   [Initialize the data from a CSV file](#add)
*   [Configure JSON API endpoints](#configure)
*   [Create an ActiveReportsJS report to visualize the data from the JSON API](#report)
*   [Create and serve a static HTML page to display the report in the Report Viewer](#html)

### Prerequisites   

<span class="intro sm">The following content assumes that you have Rust installed on your machine. If you don't have it, follow the official [Rust installation guide](https://doc.rust-lang.org/book/ch01-01-installation.html). It would be best if you also had ActiveReportsJS installed on your machine. You can obtain it from the ActiveReportsJS [website](https://www.grapecity.com/activereportsjs/download) if you don't have it.</span>

### <a id="create"></a>Create a Rust Application

To create a new Rust application, run the following command from a terminal or command prompt.

```
    cargo new ReportingOnRust
```

Then open the newly created ReportingOnRust directory in your favorite code editor, such as Visual Studio Code, and add the following dependencies to the **Cargo.toml** file.

```
    [dependencies]
    actix-web = "*"
    actix-files = "*"
    serde = { version = "*", features = ["derive"] }
    csv = "*"
    rustc-serialize = "*"
```

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

We will use the Sales dataset 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. We will use the first dataset, which has 100 records, for simplicity.

Download and unzip the data from the [100-Sales-Records.zip](https://files.grapecity.com/gc-website-media/jnffajcf/100-sales-records.zip) archive into the "data" folder(it needs to be created) of the application.

There are many fields in the dataset, but we will only use several of them in this tutorial. Add the **sale.rs** file into the **src** folder of the application and add the following code:


```
  use serde::Deserialize;
    use serde::Serialize;
    extern crate csv;

    #[derive(Serialize, Deserialize)]
    pub struct Sale {
        #[serde(rename = "Region")]
        region: String,
        #[serde(rename = "Item Type")]
        item_type: String,
        #[serde(rename = "Units Sold")]
        inits_sold: i32,
    }


    pub fn get_sales() -> Result<Vec<Sale>, &'static str> {
        let reader = csv::Reader::from_path("data/100 Sales Records.csv");
        if reader.is_ok() {
            let mut sales: Vec<Sale> = Vec::new();
            for result in reader.unwrap().deserialize() {
                if result.is_ok() {
                    let record: Sale = result.unwrap();
                    sales.push(record);
                }
            }
            Ok(sales)
        } else {
            Err("can't read the data file")
        }
    }
```

### <a id="configure"></a>Configure JSON API Endpoints

Open the **src\main.rs** file of the application and replace its content with the following code:

 

```
   use actix_web::{get, web, App, HttpServer, Responder, Result};
    mod sale;

    #[get("/sales")]
    async fn sales() -> Result<impl Responder> {
        let sales = sale::get_sales();
        if sales.is_ok() {
            Ok(web::Json(sales.unwrap()))
        } else {
            Ok(web::Json(vec![]))
        }
    }

    #[actix_web::main]
    async fn main() -> std::io::Result<()> {
        HttpServer::new(|| {
            App::new()
                .service(sales)
        })
        .bind(("127.0.0.1", 8080))?
        .run()
        .await
    }
```

Run the application using the cargo run command and open the browser to [http://127.0.0.1:8080/sales](http://127.0.0.1:8080/sales) to see the data the JSON API returns.

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

Let's 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://127.0.0.1:8080/sales](http://127.0.0.1:8080/sales) in the **ENDPOINT **field and click the **Save Changes** button.

![DataSource](https://files.grapecity.com/gc-website-media/3kyf2qjj/01-rust.png?width=500&height=380)

### <span class="secondary-heading intro sm">Click the **+** icon near **DataSource** in the Data panel.</span>  

<span class="secondary-heading intro sm">In the **Data Set** Editor dialog, type **Sales** in the NAME field and $.* in the **JSON Path** field.</span>  

<span class="secondary-heading intro sm">Click the **Validate** button, ensure that the **DataBase Fields** section displays **[3 items]** text, and click the **Save Changes** button.</span>

<span class="secondary-heading intro sm">![Sales](https://files.grapecity.com/gc-website-media/llnkdx11/02-rust.png?width=475.4358161648177&height=500)</span>

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

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

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/mclj20q3/03-rust.png?width=475.4358161648177&height=500)

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

Resize the chart report item so that it fills 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 application's static folder (it needs to be created) under the name **SalesReport.rdlx-json**.

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

In the **static **folder of the application, create the **index****.****html** file and add the following content to it.

  

```
  <!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>
```

Stop the application and adjust the main.rs file so that it contains the **use** declaration for **actix_files **and the [static file services](https://actix.rs/docs/static-files/):

```
    use actix_files as fs;
    use actix_web::{get, web, App, HttpServer, Responder, Result};
    mod sale;

    #[get("/sales")]
    async fn sales() -> Result<impl Responder> {
        let sales = sale::get_sales();
        if sales.is_ok() {
            Ok(web::Json(sales.unwrap()))
        } else {
            Ok(web::Json(vec![]))
        }
    }

    #[actix_web::main]
    async fn main() -> std::io::Result<()> {
        HttpServer::new(|| {
            App::new()
                .service(fs::Files::new("/reporting", "./static").index_file("index.html"))
                .service(sales)
        })
        .bind(("127.0.0.1", 8080))?
        .run()
        .await
    }
```

Run the application again and visit the  [http://127.0.0.1:8080/reporting/](http://127.0.0.1:8080/reporting/) URL 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.

![Chart](https://files.grapecity.com/gc-website-media/am0n42kf/04-rust.png?width=500&height=397.5346687211094)