D3 Chart

Alternative to Google Charts, D3 is a great library to visualize your data. The strong reason to choose D3 over Google Charts is that D3 can work offline while Google Chart requires your user to be online to load library. D3 is a perfect option for intranet dashboard application.

Common properties #

Below are common properties for all D3 charts.

Nametypedefaultdescription
dataSourcemixedGet/set the datasource of chart
fieldsarrayGet/set list of fields for chart

Traits #

D3 has been provided with following traits:

  1. TAppLink: Able to refer to application with app() method
  2. TDashboadLink: Able to refer to parent dashboard with dashboard() method
  3. TEnabledPermit: Use enabled() and enabledWhen() to set permission
  4. TParams: Able to get/set parameters with params() method
  5. TWidgetState: Able to get/set persisted state for widget
  6. TParamsPersisted: Able to make params set to widget persisted
  7. TDataSource: Able to receive datasource via dataSource() method
  8. TDetailAction: Able to open detail modal
  9. TExportable: Able to export widget to different formats

Available charts #

ColumnChart #

Properties #

Nametypedefaultdescription
stackedboolfalseGet/set whether the columns are stacked
xAxisarrayGet/set settings of xAxis
dualAxisboolGet/set whether dual axis will be shown
yAxisarrayGet/set settings of main Y axis
y2AxisarrayGet/set settings of the second Y axis if dual axis option is on
optionsarrayExtra options for chart
colorSchemearrayGet/set list of color for chart

Note: Those above properties follows this code rules.

Example 1: Create your own chart derived from ColumnChart

<?php

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

class MyColumnChart extends ColumnChart
{
    protected function onCreated()
    {
        $this->stacked(false)
            ->xAxis([
                "prefix"=>"",
                "suffix"=>""
            ])
            ->dualAxis(false)
            ->xAxis([
                "prefix"=>"Item ",
            ])
            ->yAxis([
                "decimals"=>2,
                "decPoint"=>".",
                "thousandSep"=>",",
                "prefix"=>"",
                "suffix"=>""
            ]);
    }

    protected function dataSource()
    {
        return AutoMaker::table("orders")->groupBy("item")
                ->select("itemName")
                ->sum("amount")->alias("sale");
    }

    protected funtion fields()
    {
        return [
            Text::create("itemName"),
            Currency::create("sale")->USD()->symbol(),
        ];
    }
}

Example 1: Create chart directly from ColumnChart


use \koolreport\dashboard\widgets\d3\ColumnChart;

class MyDashboard extends Dashboard
{
    protected function content()
    {
        return [
            ColumnChart::create("myColumnChart")
                ->dataSource(function(){
                    return AutoMaker::table("orders")->groupBy("item")
                            ->select("itemName")
                            ->sum("amount")->align("sale");
                })
                ->fields([
                    Text::create("item"),
                    Currency::create("sale)->USD()->symbol(),
                ]),
        ];
    }
}

BarChart #

BarChart shared the same properties and the way of usage with above ColumnChart.

LineChart #

LineChart also share the same properties and the way of usage with ColumnChart. LineChart as an extra property below:

Nametypedefaultdescription
connectNullboolfalseGet/set whether the null point will be connected with line or it will be disconnected

SplineChart #

SplineChart is special LineChart which use curve to connect points. SplineChart shares the same properties with LineChart.

AreaChart #

AreaChart also share the same properties and the way of usage with ColumnChart.

PieChart #

Properties #

Nametypedefaultdescription
tooltiparrayGet/set settings for PieChart tooltip. Please have a look at below example to see components of tooltip properties
labelarrayGet/set settings for PieChart label. Please have a look at below example to see components of label properties

Components of tooltip and label

->tooltip([
    "show"=>true,
    "use"=>"ratio", // "ratio"|"value"
    "decimals"=>2, //Number of decimals
    "thousandSeparator"=>",",
    "decimalPoint"=>".",
    "prefix"=>"",
    "suffix"=>"",
])
->label([
    "show"=>true,
    "use"=>"ratio", // "ratio"|"value"
    "decimals"=>2, //Number of decimals
    "thousandSeparator"=>",",
    "decimalPoint"=>".",
    "prefix"=>"",
    "suffix"=>"",
])

Examples:

<?php

namespace demo\d3;

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

class PieChartDemo extends PieChart
{
    protected function dataSource()
    {
        return AutoMaker::table("payments")
                ->leftJoin("customers","customers.customerNumber","=","payments.customerNumber")
                ->groupBy("payments.customerNumber")
                ->select("customers.customerName")
                ->sum("amount")->alias("total")
                ->orderBy("total","desc")
                ->limit(5);
    }

    protected function fields()
    {
        return [
            Text::create("customerName"),
            Currency::create("total")
                ->USD()->symbol()
                ->decimals(0),
        ];
    }
}

DonutChart #

DonutChart also share the same properties and the way of usage with ColumnChart. Donut only has one extra title property to set title in center of DonutChart:

DonutChart::create("myDonut")
->title("Revenue by customers")
...

Waterfall #

Properties #

Nametypedefaultdescription
titlestringnullGet/set title of Waterfall
marginarraynull Get/set margin, components are "top","right","bottom","left"
yAxisarray``Get/set format settings for yAxis
summaryarray["Total"=>"end"]Get/set summary, by default there is Total at the end
colorSchemearraynullGet/set list of colors, Waterfall will use first 4 colors of the list

Example:

<?php

use \koolreport\dashboard\widgets\d3\Waterfall;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Number;

class MyChart extends Waterfall
{
    protected function onCreated()
    {
        $this
        ->title("Cashflow")
        ->margin([
            "top"=>80,
            "right"=>20,
            "bottom"=>30,
            "left"=>50,
        ])
        ->summary([
            "Total now"=>"end"
        ])
        ->colorScheme([
            "#7FFF00",  //positive-value
            "#FA8072",  //negative-value
            "#20B2AA",  //summary-postive
            "#FF1493",  //summary-negative 
        ]);
    }

    protected function dataSource()
    {
        return DB::table("cashflow")
                ->select("item","amount");
    }

    protected function fields()
    {
        return [
            Text::create("item"),
            Number::create("amount")
        ];
    }
}

FunnelChart #

use \koolreport\dashboard\widgets\d3\FunnelChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Number;

class MyChart extends FunnelChart
{
    protected function onCreated()
    {
        $this
        ->chart([
            "animate"=>true,
            "bottomPinch"=>1,
        ])
        ->block([
            "dynamicHeight"=>true,
            "minHeight"=>25,
            "highlight"=>true,
            "fill"=>[
                "type"=>"gradient",
            ]
        ])
        ->label([
            "enabled"=>true,
            "fontFamily"=>"Arial",
        ])
        ->tooltip([
            "enabled"=>false
        ])
        ->colorScheme(["#ff776b","#6ee05a","#bc5ae0","#e0de5a","#5abae0","#e05a8d"]);
    }

    protected function dataSource()
    {
        return DB::table("metrics")
                ->select("name","value");
    }

    protected function fields()
    {
        return [
            Text::create("name"),
            Number::create("value")
        ];
    }
}

Action #

All D3 chart support actionItemSelect. This action is triggered when user click on item on chart, for example clicking on the bar inside BarChart or to a pie inside PieChart. The client-side events will be transformed to server-side action to be handled. Here you can do anything such as update content of other widgets based on user selection in D3 chart.

You can get parameters from $request->params(). This parameters will bring you all information about item selection at client-side.

View full list of parameters

Example:

<?php

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

class PieChartDemo extends PieChart
{

    protected function actionItemSelect($request, $response)
    {
        $params = $request->params();
        $selectedCustomerName = $params["columnName"];

        //Send param to CustomerTable and update it.
        $this->sibling("CustomerTable")
            ->params(["customerName"=>$selectedCustomerName])
            ->update();
    }

    protected function dataSource()
    {
        return AutoMaker::table("payments")
                ->leftJoin("customers","customers.customerNumber","=","payments.customerNumber")
                ->groupBy("payments.customerNumber")
                ->select("customers.customerName")
                ->sum("amount")->alias("total")
                ->orderBy("total","desc")
                ->limit(5);
    }

    protected function fields()
    {
        return [
            Text::create("customerName"),
            Currency::create("total")
                ->USD()->symbol()
                ->decimals(0),
        ];
    }
}

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.