KoolReport
  1. Home
  2. Amazing Theme
  3. ChartCard
`

ChartCard

The example shows how to use ChartCard of Amazing Theme

56,000

Member Online

56,000

Member Online

56,000

Member Online

56,000

Member Online

Introduction

This example shows how to create beautiful ChartCard to show your important KPI and an attached nice detail chart.

To make ChartCard is easy:

<?php
\koolreport\amazing\ChartCard::create(array(
    "title"=>"Member Online",
    "value"=>56000,
    "preset"=>"primary",
    "chart"=>array(
        "dataSource"=>$this->dataStore("member_online_in_year")
    ),
    "cssClass"=>array(
        "icon"=>"icon-people"
    ),
));
?>

The card is like any other chart with title and value settings however there is added properties called chart in which you can set datasource for chart.

<?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\GaugeCard;
    $data = array(
        array("date","number"),
        array("Jun 1st",5000),
        array("Jun 2nd",2000),
        array("Jun 3rd",4000),
        array("Jun 4th",5000),
        array("Jun 5th",7000),
        array("Jun 6th",3000),
        array("Jun 8th",1000),
        array("Jun 8th",6000),
        array("Jun 9th",4000),
        array("Jun 10th",8000),
        array("Jun 11st",7000),
    ); 
?>
<div class="report-content" style="padding:15px">
    <div class="text-center">
        <h1>ChartCard</h1>
        <p class="lead">
            The example shows how to use ChartCard of Amazing Theme
        </p>
    </div>
    
    <div class="row">
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ChartCard::create(array(
            "title"=>"Member Online",
            "value"=>56000,
            "preset"=>"primary",
            "chart"=>array(
                "dataSource"=>$data
            ),
            "cssClass"=>array(
                "icon"=>"icon-people"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ChartCard::create(array(
            "title"=>"Member Online",
            "value"=>56000,
            "preset"=>"success",
            "chart"=>array(
                "dataSource"=>$data
            ),
            "cssClass"=>array(
                "icon"=>"icon-people"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ChartCard::create(array(
            "title"=>"Member Online",
            "value"=>56000,
            "preset"=>"warning",
            "chart"=>array(
                "dataSource"=>$data
            ),
            "cssClass"=>array(
                "icon"=>"icon-people"
            ),
        ));
        ?>
        </div>
        <div class="col-md-3">
        <?php
        \koolreport\amazing\ChartCard::create(array(
            "title"=>"Member Online",
            "value"=>56000,
            "preset"=>"danger",
            "chart"=>array(
                "dataSource"=>$data
            ),
            "cssClass"=>array(
                "icon"=>"icon-people"
            ),
        ));
        ?>
        </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