• Overview
• Sample Code
• Properties
• Format
• cssClass
• cssStyle
• Indicator
• Chart settings
  • Examples
• Second Chart Settings
• href
  • Set a url link
  • Set a javascript function

DualChartCard

Overview #

DualChartCard is another special type of card in which there are graphs to show below the main value. The full class name of DualChartCard is \koolreport\amazing\DualChartCard. Different of ChartCard which has only one chart, DualChartCard has two charts. The additional charts may help if you want to show two indication chart at the same time, for example, one chart showing sale amount and other showing the number of orders.

Sample Code #

<?php
\koolreport\amazing\DualChartCard::create(array(
    "title"=>"SALE",
    "infoText"=>"December 2018",
    "value"=>7000,
    "baseValue"=>8000,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        )
    ),
    "preset"=>"info",
    "chart"=>array(
        "dataSource"=>$this->dataStore("sale"),
        "columns"=>array(
            "month",
            "amount"=>array(
                "prefix"=>"$",
            )
        )
    ),
    "secondChart"=>array(
        "dataSource"=>$this->dataStore("sale"),
        "columns"=>array(
            "month",
            "number"
        )
    ),
    "cssClass"=>array(
        "icon"=>"fa fa-dollars"
    ),
));
?>

Properties #

Format #

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

\koolreport\amazing\DualChartCard::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:

Example:

\koolreport\amazing\DualChartCard::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:

Example:

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

Indicator #

Chart settings #

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

Examples #

\koolreport\amazing\DualChartCard::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

Second Chart Settings #

The "secondChart" holds the settings for the second chart. The setting of secondChart is the same as chart settings.

href #

Set a url link #

The same as you set href in an <a> element in html, you may set "href" property for the DualChartCard 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.

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

Set a javascript function #

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