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 #

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
backgroundOpacitynumber0.5Set 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"=>"$",
        )
    )
));
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 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",
            )
        )
    )
));
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.
fillbool/stringHow to fill the area under the line.
lineTensionnumberBezier curve tension of the line. Set to 0 to draw straightlines.
pointBackgroundColorstring/string[]The fill color for points.
pointBorderColorstring/string[]The border color for points.
pointBorderWidthnumber/number[]The width of the point border in pixels.
pointRadiusnumber/number[]The radius of the point shape. If set to 0, the point is not rendered.
pointStylestring/string[]Style of the point. Values: 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'
pointHitRadiusnumber/number[]The pixel size of the non-displayed point that reacts to mouse events.
pointHoverBackgroundColorstring/string[]Point background color when hovered.
pointHoverBorderColorstring/string[]Point border color when hovered.
pointHoverBorderWidthnumber/number[]Border width of point when hovered.
pointHoverRadiusnumber/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,
        )
    )
));