Asynchronous Report Loading

Use SubReport to load report part by part



Sale By Countries



Sale By Customers

This example demonstrates how to perform AJAX loading with SubReport. Sub Report is actually a full functional report and it is defined a sub report within a main one.

The MainReport will be first loaded with loading status, then 2 subsequent ajax request will be send to load part by part of the reports which are SaleByCountriesReport and TopCustomersReport.

<?php

require_once "../../../load.koolreport.php";

require_once "MainReport.php";

$report = new MainReport;

$report->run()->render();
<?php

require "SaleByCountriesReport.php";
require "TopCustomersReport.php";

class MainReport extends \koolreport\KoolReport
{
    use \koolreport\clients \jQuery;
    use \koolreport\core\SubReport;
    
    function settings()
    {
        return array(
            "subReports"=>array(
                "SaleByCountriesReport"=>SaleByCountriesReport::class,
                "TopCustomersReport"=>TopCustomersReport::class,
            )
        );
    }
}
<div class="report-content">
    <div class="text-center">
        <h1>Asynchronous Report Loading</h1>
        <p class="lead">Use SubReport to load report part by part</p>
        <p><button class="btn btn-success" onclick="refresh()"> <i class="fa fa-refresh"></i> Refresh</button></p>
    </div>
    <div class="text-center">
        <br/><br/>
        <h4>Sale By Countries</h4>
        <div>
            <sub-report name='SaleByCountriesReport' id='SaleByCountriesReport'>
                <i class="fa fa-spin fa-spinner"></i>
            </sub-report>
        </div>
        <br/><br/>
        <h4>Sale By Customers</h4>
        <div>
            <sub-report name='TopCustomersReport' id='TopCustomersReport'>
                <i class="fa fa-spin fa-spinner"></i>
            </sub-report>
        </div>
    </div>
    <script>
        function loadReports()
        {
            subReport.update("SaleByCountriesReport");
            subReport.update("TopCustomersReport");
        }
        function refresh()
        {
            $("#SaleByCountriesReport").html("<i class='fa fa-spin fa-spinner'></i>");
            $("#TopCustomersReport").html("<i class='fa fa-spin fa-spinner'></i>");
            loadReports();
        }
        //Trigger loading report
        loadReports();
    </script>
</div>
<?php

class SaleByCountriesReport extends \koolreport\KoolReport
{
    public function settings()
    {
        $config = include "../../../config.php";

        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"]
            )
        );
    }
}
<?php
    \koolreport\widgets\google\GeoChart::create(array(
        "dataStore"=>function(){
            return $this->src('automaker')
            ->query("
                select customers.country,sum(orderdetails.quantityOrdered*orderdetails.priceEach) as amount 
                from orders
                join orderdetails on orderdetails.orderNumber = orders.orderNumber
                join customers on customers.customerNumber = orders.customerNumber
                group by customers.country
            ")
            ->pipe(new \koolreport\processes\CalculatedColumn(array(
                "tooltip"=>"'{country} : $'.number_format({amount})",
            )));
        },
        "columns"=>array(
            "country"=>array(
                "label"=>"Country"
            ),
            "amount"=>array(
                "label"=>"Sales",
                "type"=>"number",
                "prefix"=>"$"
            )
        ),
        "width"=>"100%",
        "options"=>array(
            "showTooltip"=> true,
            "showInfoWindow"=> true        
        )
    ));
?>
<?php

use \koolreport\processes\Group;
use \koolreport\processes\Sort;
use \koolreport\processes\Limit;

class TopCustomersReport extends \koolreport\KoolReport
{
    public function settings()
    {
        return array(
            "dataSources"=>array(
                "sales"=>array(
                    "class"=>'\koolreport\datasources\CSVDataSource',
                    "filePath"=>"../../../databases/customer_product_dollarsales2.csv",
                    "fieldSeparator"=>";"
                ),        
            )
        );
    }
    function setup()
    {
        $this->src('sales')
        ->pipe(new Group(array(
            "by"=>"customerName",
            "sum"=>"dollar_sales"
        )))
        ->pipe(new Sort(array(
            "dollar_sales"=>"desc"
        )))
        ->pipe(new Limit(array(10)))
        ->pipe($this->dataStore('sales_by_customer'));
    }
}
<?php
    \koolreport\widgets\google\BarChart::create(array(
            "dataStore"=>$this->dataStore('sales_by_customer'),
            "width"=>"100%",
            "height"=>"500px",
            "columns"=>array(
                "customerName"=>array(
                    "label"=>"Customer"
                ),
        "dollar_sales"=>array(
                    "type"=>"number",
                    "label"=>"Amount",
                    "prefix"=>"$",
                    "emphasis"=>true
                )
            ),
            "options"=>array(
                "title"=>"Sales By Customer",
            )
        ));
?>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro