• Overview
• View
  • What is report's view?
  • One report, different views
  • Get content rather than render
  • Debug view
• Widget
  • What is widget?
  • Widget DataSource
  • Widget Rendering
• Summary

Data Visualization

Overview #

We have learned in previous section how to connect to database, pulling data and piping them through series of processes to get meaningful data. Those data are stored in the data stores of the report ready to be used to create beautiful visualization. In this section, we will learn about the view of report and how to use Widgets in your view.

View #

What is report's view? #

It is another PHP file containing html/css determined how your report will appear. Normally, the view file will be put in the same folder with your report class file and has suffix .view.php.

/
├── SaleReport.php
└── SaleReport.view.php

One report, different views #

A report can have many different views. Each view may hold different charts/tales describe the same data or each view is for different purpose. The purpose could be to display html on web or to generate PDF, XML, JSON.

<?php
...
$saleReport = new SaleReport();
$saleReport->run();
$saleReport->render(); //--> This will render the default view SaleReport.view.php
...
$saleReport->render("SaleReport_AnotherView");//--> This will render the view: SaleReport_AnotherView.view.php

Get content rather than render #

Sometime we may need to get the report rendered content to further process. By enter true in second parameter of render() function, it will return the content instead of sending content to browser.

$content = $saleReport->render("SaleReport",true);//--> Return the view content

Debug view #

If you created a report wihout any view. If you try to render the report, you will get the debug view, which contains list of all datastores as well as their data in table form.

Widget #

What is widget? #

Widget is the component of your report view. It takes the data from report's dataStore and represent them in meaningful way. Widget can be anything, text, tables or charts. All of them are derived from \koolreport\core\Widget class.

<?php
    use \koolreport\widgets\koolphp\Table;
?>
<h1>Sale Report</h1>
<?php 
    Table::create(array(
        "dataStore"=>$this->dataStore('sales'),
        "columns"=>array("product","sale_amount")
    ));
?>

Code explanation:

1. In above code, we use the Table widget so we declare use \koolreport\widgets\koolphp\Table so that later on we only need to use Table to refer to its full name.
2. We use Table::create() function to create Table widget. Other widgets are create with the same manner.
3. The Table use "dataSource" pointing to "sales" data store where data is located. Many widgets can share one data store.
4. In this Table, we display only two columns which are "product" and "sale_amount".

Widget DataSource #

"dataSource" property is a default property of almost all KoolReport widgets. The "dataSource" can receive DataStore object (as you may see above), DataSource, Process or even raw array.

From DataStore

<?php
//Use data store
Table::create(array(
    "dataSource"=>$this->dataStore("mydata"),
    ...
))
?>

Use DataSource

<?php
//Use DataSource
Table::create(array(
    "dataSource"=>$this->src("sakila")->query("select * from orders"),
    ...
))
?>

Use Process

<?php
//Use Process
Table::create(array(
    "dataSource"=>(
        $this->src("sakila")->query("select * from orders")
        ->pipe(new Filter(array(
            array("payment_date",">","2014-01-01")
        )))
    
    ),
    ...
))
?>

Use array

<?php
//Use associate array
Table::create(array(
    "dataSource"=>array(
        array("name"=>"Peter","age"=>35),
        array("name"=>"Karl","age"=>32),
    )
));
?>

<?php
//Use normal array
Table::create(array(
    "dataSource"=>array(
        array("name","age"),
        array("Peter",35),
        array("Karl",32),
    )
));
?>

Even from function: You may return any kinds of above from in your custom function

<?php
//Use function
Table::create(array(
    "dataSource"=>function(){
        return array(
            array("name","age"),
            array("Peter",35),
            array("Karl",32),
        );
    }
));
?>

Widget Rendering #

All of KoolReport widgets have a public static ::create(...) method which renders/outputs a widget's html and js/css together:

<?php
Table::create(array(
    ...
)); // output a widget content
?>

In case you want to get a widget's html and js/css instead of rendering it immediately, there are two ways:

<?php
$widgetContent = Table::create(array(
    ...
), true); // add a second parameter with `true` value
//or
$widgetContent = Table::html(array( // calling static ::html(...) method
    ...
)); // $widgetContent is a string
// ...
echo $widgetContent;
?>

There are some times you want a widget content to be separated into html and js/css parts:

<?php
$widgetHtmlJs = Table::htmlJs(array( // calling static ::htmlJs(...) method
    ...
)); // $widgetHtmlJs is an array
$htmlPart = $widgetHtmlJs['html'];
$jsCssPart = $widgetHtmlJs['js'];
// ...
echo $htmlPart; // html part must always be echoed before js/css part
// ...
echo $jsCssPart; // jts/css part must always be echoed before html part
?>

Summary #

A report may have different views or different ways to represent data. The default view of a report has the name of {report_name}.view.php. In a view, you may use any kinds of HTML/CSS/Javascript or pre-built KoolReport's Widget. Widget can be Table. Charts or any forms of data representation.