Card

Guide you how to use Card to display important KPI value

2,000
Member Online
230
Conversions
$15,299
Revenue
$6,912
Cost

Showing indicator

Card is able to show the percentage increased or decreased

21.87%
$11,249
Month Sale
-13.33%
13k
Visitors

Get value with SQL Query

The value of card is able to receive value from SQL

$8,853,839
Total Sale

Introduction

This example guides you how to use Card to show important KPI value.

To create Card is very easy

<?php
Card::create(array(
    "value"=>1233,
    "title"=>"Month Sale",
));
?>

The "value" is also able to receive data from SQL Query:

<?php
Card::create(array(
    "value"=>$this->src("automaker")->query("select sum(amount) from payments"),
    "title"=>"Total Sale",
));
?>
<?php
require_once "MyReport.php";

$report = new MyReport;
$report->run()->render();
<?php
require_once "../../../load.koolreport.php";

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

        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"]
            )
        );
    }
}
<?php
    use \koolreport\widgets\koolphp\Card;
?>
<div class="report-content">
    <div class="text-center">
        <h1>Card</h1>
        <p class="lead">
            Guide you how to use Card to display important KPI value
        </p>
    </div>
    <div class="row">
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>2000,
                "title"=>"Member Online",
                "cssClass"=>array(
                    "card"=>"bg-info",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>230,
                "title"=>"Conversions",
                "cssClass"=>array(
                    "card"=>"bg-warning",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>15299,
                "title"=>"Revenue",
                "format"=>array(
                    "value"=>array(
                        "prefix"=>"$"
                    )
                ),
                "cssClass"=>array(
                    "card"=>"bg-success",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>

        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>6912,
                "title"=>"Cost",
                "format"=>array(
                    "value"=>array(
                        "prefix"=>"$"
                    )
                ),
                "cssClass"=>array(
                    "card"=>"bg-danger",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
    </div>

    <div class="text-center" style="margin-top:30px;">
        <h3>Showing indicator</h3>
        <p class="lead">
            Card is able to show the percentage increased or decreased
        </p>
    </div>

    <div class="row">
        <div class="col-md-3 offset-md-3">
        <?php
        Card::create(array(
            "value"=>11249,
            "baseValue"=>9230,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                )
            ),
            "title"=>"Month Sale",
        ));
        ?>    
        </div>
        <div class="col-md-3">
        <?php
        Card::create(array(
            "value"=>13,
            "baseValue"=>15,
            "format"=>array(
                "value"=>array(
                    "suffix"=>"k"
                )
            ),
            "title"=>"Visitors",
        ));
        ?>
        </div>        
    </div>

    <div class="text-center" style="margin-top:30px;">
        <h3>Get value with SQL Query</h3>
        <p class="lead">
            The value of card is able to receive value from SQL
        </p>
    </div>

    <div class="row">
        <div class="col-md-4 offset-md-4">
        <?php
        Card::create(array(
            "value"=>$this->src("automaker")->query("select sum(amount) from payments"),
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                )
            ),
            "title"=>"Total Sale",
            "cssClass"=>array(
                "card"=>"bg-primary",
                "title"=>"text-white",
                "value"=>"text-white"
            )
        ));
        ?>    
        </div>
    </div>

</div>

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