ProgressCard

The example shows how to use ProgressCard of Amazing Theme

$7,500

April 2018

The sale on April 2018 has completed 75% of revenue target.
$7,500

April 2018

The sale on April 2018 has completed 75% of revenue target.
$7,500

April 2018

The sale on April 2018 has completed 75% of revenue target.
$7,500

April 2018

The sale on April 2018 has completed 75% of revenue target.

Introduction

This examples shows you how to use ProgressCard to display the most important KPI and its progress.

To make ProgressCard is simple:

<?php
\koolreport\amazing\ProgressCard::create(array(
    "title"=>"April 2018",
    "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
    "value"=>7500,
    "preset"=>"primary",
    "baseValue"=>10000,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        ),
        "indicator"=>array(
            "decimals"=>0
        )
    ),
    "cssClass"=>array(
        "icon"=>"fa fa-euro"
    ),
));
?>

The baseValue will be used to calculate percentage of completion for value.

<?php
require_once "MyReport.php";

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

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

        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"]
            )
        );
    }
}
<?php
    use \koolreport\amazing\SimpleCard;
?>
<div class="report-content" style="padding:15px">
    <div class="text-center">
        <h1>ProgressCard</h1>
        <p class="lead">
            The example shows how to use ProgressCard of Amazing Theme
        </p>
    </div>
    <div class="row">
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ProgressCard::create(array(
            "title"=>"April 2018",
            "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
            "value"=>7500,
            "preset"=>"primary",
            "baseValue"=>10000,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                ),
                "indicator"=>array(
                    "decimals"=>0
                )
            ),
            "cssClass"=>array(
                "icon"=>"fa fa-euro"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ProgressCard::create(array(
            "title"=>"April 2018",
            "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
            "value"=>7500,
            "preset"=>"success",
            "baseValue"=>10000,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                ),
                "indicator"=>array(
                    "decimals"=>0
                )
            ),
            "cssClass"=>array(
                "icon"=>"fa fa-euro"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ProgressCard::create(array(
            "title"=>"April 2018",
            "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
            "value"=>7500,
            "preset"=>"warning",
            "baseValue"=>10000,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                ),
                "indicator"=>array(
                    "decimals"=>0
                )
            ),
            "cssClass"=>array(
                "icon"=>"fa fa-euro"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ProgressCard::create(array(
            "title"=>"April 2018",
            "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
            "value"=>7500,
            "preset"=>"danger",
            "baseValue"=>10000,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                ),
                "indicator"=>array(
                    "decimals"=>0
                )
            ),
            "cssClass"=>array(
                "icon"=>"fa fa-euro"
            ),
        ));
        ?>
        </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