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 #

nametypedefaultdescription
namestringSet name for chart. It is optional
titlestringTitle of the chart
dataSourcemixedSet the data source for chart, accepting DataStore, DataSource, Process object and even array in table or associate format
columnsarrayList of columns used to draw chart
optionsarrayExtra options for area chart, please view options section for more details
backgroundOpacitynumber0.5Set the opacity for background
axesarrayDefined multiple axes for your chart

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,
        )
    )
))
?>
nametypedefaultdescription
labelstringSet label for column
typestringType of columns number,string,datetime
prefixstringSet prefix for value, for example $
suffixstringSet suffix for value
formatValuestring/functionAccept string or function. For example: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is separated
decimalPointstring.Specify decimal point
configarrayContain special settings of chart js config for series, see below ChartJs configuration for column for more details
chartTypestringSpecify which type of chart a column/series should be drawn as
axisstringSpecify which axis a column/series is measured against

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
            )
        )
    )
))
?>
nametypedefaultdescription
backgroundColorstringThe fill color under the line.
borderColorstringThe color of the line
borderWidthnumberThe width of the line in pixels.
borderDashnumber[]Length and spacing of dashes.
borderDashOffsetnumberOffset for line dashes
borderCapStylestringCap style of the line.
borderJoinStylestringLine joint style.
cubicInterpolationModestringAlgorithm used to interpolate a smooth curve from the discrete data points.
fillbool/stringHow to fill the area under the line.
lineTensionnumberBezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
pointBackgroundColornumber/number[]The fill color for points.
pointBorderColorstring/string[]The border color for points.
pointBorderWidthnumber/arrayThe width of the point border in pixels.
pointRadiusnumber/arrayThe radius of the point shape. If set to 0, the point is not rendered.
pointStylestring/arrayStyle of the point.
pointHitRadiusnumber/arrayThe pixel size of the non-displayed point that reacts to mouse events.d
pointHoverBackgroundColorstring/arrayPoint background color when hovered.
pointHoverBorderColorstring/arrayPoint border color when hovered.
pointHoverBorderWidthnumber/arrayBorder width of point when hovered.
pointHoverRadiusnumber/arrayThe radius of the point when hovered.
showLineboolIf false, the line is not drawn for this dataset.
spanGapsboolIf true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
steppedLinebool/stringIf the line is shown as a stepped line. Value: true, false, "before", "after". If the steppedLine value is set to anything other than false, lineTension will be ignored.

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.