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 #

name	type	description
`name`	string	Set name for chart. It is optional
`title`	string	Title of the chart
`dataSource`	mixed	Set the data source for chart, accepting DataStore, DataSource, Process object and even array in table or associate format
`columns`	array	List of columns used to draw chart
`options`	array	Extra 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"=>"$",
        )
    )
))

name	type	default	description
`label`	string		Set label for column
`type`	string		Type of columns `number`,`string`,`datetime`
`prefix`	string		Set prefix for value, for example `$`
`suffix`	string		Set suffix for value
`formatValue`	string/function		Accept string or function. For example: `"formatValue"=>"@value USD"` or `"formatValue"=>function($value){return $value." USD";}`
`decimals`	number		The number of number after decimal points
`thousandSeparator`	string	`,`	Specify how thousand is separated
`decimalPoint`	string	`.`	Specify decimal point
`config`	array		Contain 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",
            )
        )
    )
))

name	type	description
`backgroundColor`	string[]	The fill color of the arcs in the dataset.
`borderColor`	string[]	The border color of the arcs in the dataset.
`borderWidth`	number[]	The border width of the arcs in the dataset.
`hoverBackgroundColor`	string[]	The fill colour of the arcs when hovered.
`hoverBorderColor`	string[]	The stroke colour of the arcs when hovered.
`hoverBorderWidth`	number[]	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.