• Overview
• Sample Code
• Properties
• Format
• cssClass
• cssStyle
• Indicator
• Gauge chart settings
• href
  • Set a url link
  • Set a javascript function

GaugeCard

Overview #

GaugeCard is a beautiful card useful to show the progress or percent of completion compared to the goal. The card use an impressive gauge chart to show result.

Sample Code #

    <?php
    \koolreport\amazing\GaugeCard::create(array(
        "title"=>"Revenue",
        "value"=>7500,
        "preset"=>"success",
        "baseValue"=>10000,
        "minValue" => 0,
        "maxValue" => 100,
        "showValue" => true,
        "showBaseValue" => true,
        "format"=>array(
            "value"=>array(
                "prefix"=>"$"
            )
        ),
    ));
    ?>

Properties #

Format #

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

SimpleCard::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
        ),
        "indicator"=>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:

|indicator|string||Set css class for icon| |upIcon|string||Set css class for icon| |downIcon|string||Set css class for icon| |positive|string||Set css class for icon| |negative|string||Set css class for icon|

Example:

SimpleCard::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:

<?php
\koolreport\amazing\GaugeCard::create(array(
    "title"=>"Revenue",
    "value"=>7500,
    "preset"=>"success",
    "baseValue"=>10000,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        )
    ),
    "withoutLoader"=>true,
));
?>

Indicator #

Example:

GaugeCard::create(array(
    "indicator"=>array(
        "method"=>"perentChange",
        "title"=>"Compared to {baseValue}",
        "threshold"=>50,
    )
));

GaugeCard::create(array(
    "indicator"=>array(
        "method"=>function($value,$baseValue){
            return ($value-$baseValue)*100/$baseValue;
        },
    )
));

Gauge chart settings #

You may put extra settings for gauge chart

GaugeCard::create(array(
    ...
    "gauge"=>array(
        "angle"=> 0.15, // The span of the gauge arc
        "lineWidth"=> 0.44, // The line thickness
        "radiusScale"=> 1, // Relative radius
        "pointer"=> array(
            "length": 0.6, // // Relative to gauge radius
            "strokeWidth": 0.035, // The thickness
            "color": '#000000' // Fill color
        ),
        "limitMax"=> false,     // If false, max value increases automatically if value > maxValue
        "limitMin"=> false,     // If true, the min value of the gauge will be fixed
        "colorStart"=> '#6FADCF',   // Colors
        "colorStop"=> '#8FC0DA',    // just experiment with them
        "strokeColor"=> '#E0E0E0',  // to see which ones work best for you
        "generateGradient"=> true,
        "highDpiSupport"=> true,     // High resolution support
    )
));

href #

Set a url link #

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

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

Set a javascript function #

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