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",
)
));
?>
