• Overview
• Settings
• Properties of a column
• Config for column

AreaChart

Overview #

Code:

<?php
\koolreport\chartjs\AreaChart::create(array(
    "title"=>"Sale vs Cost",
    "dataSource"=>$this->dataStore('month_sales'),
    "columns"=>array(
        "month",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
    )
));

Above example show minimum settings to setup a area chart. We use 2 columns from datasource which are "category' and "amount" to draw chart.

Note that: we may add extra column and the extra column will represent another series on the chart. The first column is used for xAxis labeling.

Settings #

Properties of a column #

Except for the first column, the next column in the columns list will represent a series of data on the chart. We may have further settings for each column. Below are properties we can set for column.

Example

<?php 
AreaChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount"
            "type"=>"number",
            "prefix"=>"$",
            "decimals"=>2,
        )
    )
))
?>

Since version 3.0.0, you can set Chartjs' dataset config directly in column settings instead of in column's config:

    BarChart::create(array(
        ...
        "columns" => array(
            "column_1" => array(
                ...
                "borderColor" => "blue", // set borderColor directly for column_1 instead of column_1's config
            )
        )
    ))

Config for column #

This is optional but we can have many further options/configs for the chart. Below are the properties that you can put under the config.

<?php 
LineChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount"
            "type"=>"number",
            "prefix"=>"$",
            "config"=>array(
                "steppedLine"=>true
            )
        )
    )
))
?>