Chart

Overview #

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

Code:

<?php
\koolreport\chartjs\BarChart::create(array(
    "name" => "MyChart",
    "dataSource"=>$this->dataStore('sales'),
    // "data" => array(...),
    "title"=>"Sale Report",
    "columns"=>array(
        "category",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
        "profit"=>array("label"=>"Profit","type"=>"number","prefix"=>"$"),
    ),
    "options" => array(...),
    "colorScheme" => array(...),
));

Common settings #

name	type	default	description
`name`			Specify 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.
`data`	array		An array of data. To be used in case `dataSource` is null
`columns`	array/mixed		Specify the list of columns will be used to draw chart
`options`	array		Specify extra options for charts, see extra options section for more details.
`plugins`	array		Specify multiple plugins for charts.
`inlinePlugins`	array		Specify direct inline plugins.
`title`	string		Title of the charts
`backgroundOpacity`	number	0.5	Specify opacity of bar background
`stacked`	boolean	false	Specify if the series of chart will be stacked.
`axes`	array		Defined multiple axes for your chart

List of supported plugins includes "annotation", "datalabels", "draggable", "stacked100", "waterfall", "zoom", "barFunnel", "linearGauge", "smith", "timeline". List of supported inline plugins includes "beforeInit", "afterInit", "beforeUpdate", "afterUpdate", "beforeLayout", "afterLayout", "beforeDatasetsUpdate", "afterDatasetsUpdate", "beforeDatasetUpdate", "afterDatasetUpdate", "beforeRender", "afterRender", "beforeDraw", "afterDraw", "beforeDatasetsDraw", "afterDatasetsDraw", "beforeDatasetDraw", "afterDatasetDraw", "beforeEvent", "afterEvent", "resize", "destroy". Here's an example of using inline plugins:

    BarChart::create(array(
        ...
        "inlinePlugins" => array(
            "beforeInit" => "function(chart, args, options) {
                //..
            }", // wrap client js function in double or single quotes
        )
    ))

Common data column settings #

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 eaxmple: `"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 seperated
`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
`chartType`	string		Specify which type of chart a column/series should be drawn as
`axis`	string		Specify which axis a column/series is measured against

Since version 3.0.0, for BarChart, ColumnChart, ComboChart, LineChart, AreaChart you can set Chartjs' dataset config directly in column settings instead of in column's config:

    BarChart::create(array(
        ...
        "columns" => array(
            "column_1" => array(
                ...
                "borderColor" => "blue", // set borderColor directly for column_1 instead of column_1's config
            )
        )
    ))

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.