Overview #

Chartjs supports various types of chart. Each type of chart has their own setting, data structure but also shares some common ones.


    "name" => "MyChart",
    // "data" => array(...),
    "title"=>"Sale Report",
    "options" => array(...),
    "colorScheme" => array(...),

Common settings #

nameSpecify name of chart, it is optional
dataSource*required Specify the source for chart, accept DataStore, DataSource, Process and even array data in table or associate format.
dataarrayAn array of data. To be used in case dataSource is null
titlestringTitle of the charts
columnsarray/mixedSpecify the list of columns will be used to draw chart
optionsarraySpecify extra options for charts, see extra options section for more details.
colorSchemearrayA list of colors to show multiple series in

Common data column settings #

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

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.