DonutChart

Overview #

Donut chart is probably one of the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

Code:

DonutChart::create(array(
    "dataSource"=>$this->dataStore("category_amount")
    "columns"=>array("category","amount")
))

With the minimum settings above, we had a DonutChart to show percent of each category contributing to the whole sum of amount.

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 line chart or area chart, please view options section for more details

Column settings #

In DonutChart and DonutChart, the first column data will be used for labeling and the next columns are used for data. Each data column can have extra settings

Example:

DonutChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>"$",
        )
    )
))
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

Config for column #

There are several extra settings for column under the config property of column. Those are optional.

DonutChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>"$",
            "config"=>array(
                "backgroundColor"=>"#dddddd",
            )
        )
    )
))
nametypedefaultdescription
backgroundColorstring[]The fill color of the arcs in the dataset.
borderColorstring[]The border color of the arcs in the dataset.
borderWidthnumber[]The border width of the arcs in the dataset.
hoverBackgroundColorstring[]The fill colour of the arcs when hovered.
hoverBorderColorstring[]The stroke colour of the arcs when hovered.
hoverBorderWidthnumber[]The stroke width of the arcs when hovered.

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.