Google Charts

Overview #

Google Charts is a great data visualization library and it is even better when use inside Dashboard of KoolReport.

Common Settings #

Name	type	description
`title`	string	Title of the chart
`options`	array	Contain custom options for chart
`colorScheme`	array	Set a list of colors for chart
`pointerOnHover`	boolean	Whether you want to show pointer on hover
`height`	string	Set height of chart

Note: Those above properties follows this code rules.

Example:

use \koolreport\dashboard\widgets\google\ColumnChart;

class MyChart extends ColumnChart
{
    protected function onCreated()
    {
        $this
        ->title("This is my chart")
        ->options([
            "isStacked"=>true
        ])
        ->colorScheme(["#aaa","#bbb","#ccc"])
        ->height("320px")
    }
}

Common props for fields #

Beside the most common settings for fields, fields that is used in Google Chart will have additional properties below:

Name	type	description
`annotation`	function	Text to display on the chart near the associated data point. The text displays without any user interaction. Annotations and annotation text can be assigned to both data points and categories (axis labels).
`annotationText`	function	Extended text to display when the user hovers over the associated annotation.Annotations and annotation text can be assigned to both data points and categories (axis labels). If you have an annotationText column, you must also have an annotation column. Tooltip text, in contrast, is displayed when the user hovers over the associated data point on the chart.
`certainty`	function	Return `true` or `false` to indicates whether a data point is certain or not. How this is displayed depends on the chart type—for example, it might be indicated by dashed lines or a striped fill.
`emphasis`	function	Return boolean value to emphasize specified chart data points. Displayed as a thick line and/or large point.
`interval`	function	Return number to indicates potential data range for a specific point. Intervals are usually displayed as I-bar style range indicators. Interval columns are numeric columns; add interval columns in pairs, marking the low and high value of the bar. Interval values should be added in increasing value, from left to right.
`scope`	function	Return boolean value to indicate whether a point is in or out of scope. If a point is out of scope, it is visually de-emphasized.
`style`	function	Return string which is styles certain properties of different aspects of your data. Those values are `color`, `opacity`, `stroke-width`, `stroke-color`, `stroke-opacity`, `fill-color`, `fill-opacity`.
`tooltip`	function	Return string which is text to display when the user hovers over the data point associated with this row.

Note: Those above properties follows this code rules.

Example

use \koolreport\dashboard\widgets\google\ColumnChart;

class MyChart extends ColumnChart
{
    ...

    protected function fields()
    {
        return [
            Text::create("category"),
            Number::create("amount")
                ->style(function($row){
                    return "opacity:0.5;";
                })
                ->scope(function($row){
                    if($row["category"]==="Phones") {
                        return false;
                    }
                    return true;
                }),
                //You can do the same with other properties.
        ];
    }
}

Traits #

KWidget has been provided with following traits:

TAppLink: Able to refer to application with app() method
TDashboadLink: Able to refer to parent dashboard with dashboard() method
TEnabledPermit: Use enabled() and enabledWhen() to set permission
TParams: Able to get/set parameters with params() method
TWidgetState: Able to get/set persisted state for widget
TParamsPersisted: Able to make params set to widget persisted
TDataSource: Able to receive datasource via dataSource() method
TFields: Able to receive field list via fields() method
TExportable: Able to export widget to different formats

Chart Types #

AreaChart #

<?php

use \koolreport\dashboard\widgets\google\AreaChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends AreaChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

BarChart #

<?php

use \koolreport\dashboard\widgets\google\BarChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends BarChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

BubbleChart #

CandlestickChart #

ColumnChart #

<?php

use \koolreport\dashboard\widgets\google\ColumnChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends ColumnChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

ComboChart #

DonutChart #

<?php

use \koolreport\dashboard\widgets\google\DonutChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends DonutChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

Gauge #

GeoChart #

Histogram #

LineChart #

<?php

use \koolreport\dashboard\widgets\google\LineChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends LineChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

Map #

OrgChart #

PieChart #

<?php

use \koolreport\dashboard\widgets\google\PieChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class CostChart extends PieChart
{
    protected function onCreated()
    {
        $this->title("Show cost in chart");
    }

    protected function dataSource()
    {
        return AutoMaker::table("costs")
                ->groupBy("cateogry")
                ->select("category")
                ->sum("amount")->alias("costAmount");
    }
    
    protected function fields()
    {
        return [
            Text::create("category"),
            Currency::create("costAmount")->USD()->symbol()
        ];
    }
}

Sankey #

SteppedAreaChart #

Timeline #

TreeMap #

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.