Google Charts

Overview #

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

Common Settings #

Nametypedescription
titlestringTitle of the chart
optionsarrayContain custom options for chart
colorSchemearraySet a list of colors for chart
pointerOnHoverbooleanWhether you want to show pointer on hover
heightstringSet 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:

Nametypedefaultdescription
annotationfunctionText 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).
annotationTextfunctionExtended 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.
certaintyfunctionReturn 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.
emphasisfunctionReturn boolean value to emphasize specified chart data points. Displayed as a thick line and/or large point.
intervalfunctionReturn 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.
scopefunctionReturn 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.
stylefunctionReturn 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.
tooltipfunctionReturn 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.
        ];
    }
}

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.