How to Use a JavaScript Reporting Tool in Your PHP Web Application

Modern web applications often need to present business data in a clear, interactive, and visually appealing way. ActiveReportsJS makes this easy by providing a fully client-side reporting solution that runs entirely in the browser, with no server-side reporting components required. Because it communicates with data through standard web APIs, ActiveReportsJS can be integrated into virtually any backend technology, including PHP applications built with Laravel.

In this tutorial, you'll learn how to connect ActiveReportsJS to a Laravel-powered JSON API and create a complete reporting workflow from data source to report viewer. We'll use a CSV dataset, expose it through a Laravel endpoint, design a report in ActiveReportsJS, and display the finished report in a browser-based viewer. By the end, you'll have a working example that demonstrates how to bring powerful reporting capabilities to a PHP application using modern web technologies.

 By the end, you will be able to do the following.

• Create a PHP application serving a JSON API using the Laravel framework
• Initialize the data from a CSV file
• Configure JSON API endpoints
• Create an ActiveReportsJS report to visualize the data from the JSON API
• Create a static HTML page to display the report in the report viewer

Want to Test it Out? Download ActiveReportsJS Today!

Prerequisites 

The following content assumes that you have Laravel installed on your machine. If you don't have it, you can obtain it from the Laravel website. It would help if you also had ActiveReportsJS installed on your device. You can get it from the ActiveReportsJS website if you don't have it.

Create a PHP Application

For this tutorial, we will use the Laravel web framework. To create a new PHP application that uses the Laravel web framework, follow the official documentation at the Laravel website. This article assumes that the name of the newly created application is "ReportingOnLaravel."

Make sure the application is up and running by visiting http://localhost, then opening the newly created ReportingOnLaravel directory in your favorite code editor, such as Visual Studio Code.

Add Application Data

We will use the Sales dataset that you can download from the E for Excel 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.

Download and unzip the data from the 100-Sales-Records.zip  archive into the "storage" directory of the application. 

There are many fields in the dataset, but we will use only a few in this tutorial. 

Configure JSON API Endpoints

Open the "routes\web.php" file of the application and add the following code:

Route::get('/api/sales', function () {  
    $sales = [];
    if (($open = fopen(storage_path() . "/100 Sales Records.csv", "r")) !== FALSE) {
        $header = fgetcsv($open);
        $keys=array("region", "itemType", "unitsSold");
        while (($data = fgetcsv($open)) !== FALSE) {
            $sales[] = array_combine($keys, array($data[0], $data[2], $data[8]));
        }
        fclose($open);
    }    
    return response()->json($sales);
});

Make sure that the application runs and open the browser to http://localhost/api/sales to see the data the JSON API returns.

Create an ActiveReportsJS Report

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

In the Standalone Report Designer Application, click the File menu and select the Continuous Page Layout template for a newly created report.

Open the Data panel of the property inspector and click the Add button.

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

Click the + icon near DataSource in the Data panel.

Type Sales in the NAME field in the Data Set Editor dialog 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.

Expand the 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.

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 public folder of the application under the name SalesReport.rdlx-json.

Create a Static HTML Page to Display the Report

In the application's public folder, 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  http://localhost/report.html in the browser to see the report. If you followed the steps correctly, you should see a report displaying the JSON API data.

In this tutorial, you built a complete reporting solution by combining Laravel and ActiveReportsJS. Starting with a CSV dataset, you created a JSON API endpoint, connected that endpoint to an ActiveReportsJS report, and displayed the final report in a browser-based viewer. Throughout the process, no server-side reporting infrastructure was required, highlighting the flexibility and simplicity of ActiveReportsJS's client-side architecture.

This same approach can be extended to real-world applications by connecting reports to databases, external services, or existing REST APIs. Whether you're building dashboards, operational reports, or analytical views, ActiveReportsJS and Laravel provide a lightweight and scalable foundation for delivering rich reporting experiences in modern web applications.

Want to Test it Out? Download ActiveReportsJS Today!