RadarChart

Overview #

To construct a RadarChart is very simple. Below is a minimum settings to construct a RadarChart

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

With just 4 lines of code above, we have specify data source for radar chart and point out columns to use drawing chart. The category column will act as chart label while amount column will provide detail data. The successive columns will add more series of data to charts.

Settings #

name	type	default	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
`backgroundOpacity`	number	0.5	Set the opacity for background

Column settings #

Each columns may have extra settings

RadarChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "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 of column #

The config property can be used to set further configuration for the series of RadarChart

RadarChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "type"=>"number",
            "prefix"=>"$",
            "config"=>array(
                "backgroundColor"=>"#dddddd",
                "borderColor"=>"#aaaaaa",
            )
        )
    )
));

name	type	description
`backgroundColor`	string	The fill color under the line.
`borderColor`	string	The color of the line.
`borderWidth`	number	The width of the line in pixels.
`borderDash`	number[]	Length and spacing of dashes
`borderDashOffset`	number	Offset for line dashes.
`borderCapStyle`	string	Cap style of the line
`borderJoinStyle`	string	Line joint style.
`fill`	bool/string	How to fill the area under the line.
`lineTension`	number	Bezier curve tension of the line. Set to 0 to draw straightlines.
`pointBackgroundColor`	string/string[]	The fill color for points.
`pointBorderColor`	string/string[]	The border color for points.
`pointBorderWidth`	number/number[]	The width of the point border in pixels.
`pointRadius`	number/number[]	The radius of the point shape. If set to 0, the point is not rendered.
`pointStyle`	string/string[]	Style of the point. Values: `'circle'`, `'cross'`, `'crossRot'`, `'dash'`, `'line'`, `'rect'`, `'rectRounded'`, `'rectRot'`, `'star'`, `'triangle'`
`pointHitRadius`	number/number[]	The pixel size of the non-displayed point that reacts to mouse events.
`pointHoverBackgroundColor`	string/string[]	Point background color when hovered.
`pointHoverBorderColor`	string/string[]	Point border color when hovered.
`pointHoverBorderWidth`	number/number[]	Border width of point when hovered.
`pointHoverRadius`	number/number[]	The radius of the point when hovered.

Turn off scale #

If you do not want RadarChart to show the scale, you may off the scale:

RadarChart::create(array(
    ...
    "options"=>array(
        "scale"=>array(
            "display"=>false,
        )
    )
));

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.