ChartCard

Overview #

ChartCard is another special type of card in which there is graph to show below the main value. The full class name of ChartCard is \koolreport\amazing\ChartCard.

Sample Code #

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

Properties #

Nametypedefaultdescription
titlestringThe title of the card
valuenumberThe value that you need to show
formatarrayContain settings for formatting the value
presetstring"primary"The preset appearance for card, accept "primary", "info", "warning", "danger"
cssClassarrayContain settings for css class
cssStylearrayContain settings for css style
chartarraySettings for chart
hrefstring/functionSet an url or an action for card when it is clicked

Format #

There are number of settings to format the value of card:

\koolreport\amazing\ChartCard::create(array(
    ...
    "format"=>array(
        "value"=>array(
            "decimals"=>2,              // Number of decimals to show
            "decimalPoint"=>".",        // Decimal point character 
            "thounsandSeparator"=>",",  // Thousand separator
            "prefix"=>"$",              // Prefix
            "suffix"=>"USD"             // Suffix
        )
    )
))

cssClass #

There are number of sub settings for cssClass:

Nametypedefaultdescription
cardstringSet extra css class for card
titlestringSet css class for title
valuestringSet css class for value
iconstringSet css class for icon

Example:

\koolreport\amazing\ChartCard::create(array(
    "cssClass"=>array(
        "card"=>"my-own-card-class",
        "tittle"=>"font-bold",
        "value"=>"big-font",
        "icon"=>"fa fa-dollar"
    )
));

Notice: The "icon" property can be used to set the icon using font-awesome or simpleline icon.

cssStyle #

Alternative to set the cssClass, you may directly set the css style to the card element:

Nametypedefaultdescription
cardstringCss style for card
titlestringCss style for card title
valuestringCss style for card value
iconstringCss style for card icon

Example:

\koolreport\amazing\ChartCard::create(array(
    "cssStyle"=>array(
        "card"=>"background-color:yellow",
        "title"=>"font-weight:bold",
        "value"=>"font-style:italic",
        "icon"=>"font-size:24px;color:#333"
    )
));

Chart settings #

The "chart" property holds important settings for the chart such as dataSource or type of chart.

Nametypedefaultdescription
dataSourceDataSource/array/functionSet extra css class for card
typestring"area"Type of chart, support "area", "line" and "column"
columnsarrayList of columns for chart and their settings

Examples #

\koolreport\amazing\ChartCard::create(array(
    "chart"=>array(
        "type"=>"area",
        "dataSource"=>$this->dataStore("orders"),
        "columns"=>array(
            "date",
            "amount"=>array(
                "type"=>"number"
                "decimals"=>2,              // Number of decimals to show
                "decimalPoint"=>".",        // Decimal point character 
                "thounsandSeparator"=>",",  // Thousand separator
                "prefix"=>"$",              // Prefix
                "suffix"=>"USD"             // Suffix
            )
        )
    )
));

Note:

  1. If you omit the "columns" settings, then two first columns in datasource will be used to draw charts.
  2. Your dataSource is like dataSource settings in any other widgets which you can enter array, dataStore, function, process. Please refer to here

href #

The same as you set href in an <a> element in html, you may set "href" property for the ChartCard so that users will be directed to new url location when they click the card. This is extremely useful when you want to show details of data to user after view the summarization on card.

ChartCard::create(array(
    "href"=>"http://example.com/defails"
));

Set a javascript function #

ChartCard::create(array(
    "href"=>"function(){
        alert('click on card');
    }"
));

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.