ChartJS

One of the most beautiful and powerful chart libraries for your report

Introduction

ChartJS package contains wrapped widget class for great chart library ChartJS. ChartJS library is very beautiful and rich in features. It is capable of replacing the Google Chart library. Not like Google Charts, ChartJS package can be used without internet so that is the greatest advantage of this package.

View demo

Installation

  1. Unzip the chartjs.zip
  2. Copy the chartjs into koolreport/packages
  3. All done!

Documentation

Namespace

All the charts of package are under the namespace \koolreport\chartjs. You can directly use the class like this to create chart:

\koolreport\chartjs\LineChart::create(array(
    ...
));

or you can use use statement on top of page to declare the library before use

<?php
    use \koolreport\chartjs\LineChart;
?>

...
<?php
LineChart::create(array(
    ...
));
?>

BarChart/ColumnChart

BarChart and ColumnChart is basically the same except for the chart direction. Their settings and usage are pretty much the same. All settings in examples below can be used for both types of chart.

php bar chart

php column chart

Example

<?php
ColumnChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "title"=>"Sale Amount On Each Category"
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>'$',
        )
    ),
))
?>

In above example, we use datastore category_amount as the dataSource for ColumnChart. We set the title for the chart to "Sale Amount On Each Category". We specify columns from datastore to be used for drawing chart. The first column category will be acted as label for xAxis while amount will be value for yAxis. We add extra settings for amount columns to make dollar sign appear in front of number.

We may add more data column to columns, for each added columns, new chart series will be added.

Chart settings

nametypedefaultdescription
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.
columnsarray/mixedSpecify the list of columns will be used to draw chart
optionsarraySpecify extra options for charts, see extra options section for more details.
titlestringTitle of the charts
backgroundOpacitynumber0.5Specify opacity of bar background
stackedbooleanfalseSpecify if the series of chart will be stacked.

Data column settings

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 eaxmple: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is seperated
decimalPointstring.Specify decimal point
configarrayContain special settings of chart js config for series, see below ChartJs configuration for column for more details

ChartJs config for column

nametypedefaultdescription
borderColorstring/arrayThe color of the bar border. We may specify an array of colors if we want different color for each bar in the series
backgroundColorstring/arrayThe fill color of the bar. We may input an array of colors if we want different color for each bar in the series
borderWidthnumber/arrayThe stroke width of the bar in pixels.
borderSkippedstringWhich edge to skip drawing the border for. bottom, top, left, right
hoverBackgroundColorstring/arrayThe fill colour of the bars when hovered.
hoverBorderColorstring/arrayThe stroke colour of the bars when hovered.
hoverBorderWidthstring/arrayThe stroke width of the bars when hovered.
xAxisIDstringThe ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
yAxisIDstringThe ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.

Example for column settings:

ColumnChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "title"=>"Sale Amount On Each Category"
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>'$',
            "config"=>array(
                "borderColor"=>"#aaaaaa",
                "backgroundColor"=>"#dddddd",
                "borderWidth"=>2,
            )
        )
    ),
))
?>

Some extra options

Below are some extra options for BarChart and Columns. This below settings are put under options property.

nametypedefaultdescription
barPercentagenumber0.9Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.
categoryPercentagenumber0.8Percent (0-1) of the available width each category should be within the sample width.
barThicknessnumberManually set width of each bar in pixels. If not set, the base sample widths are calculated automatically so that they take the full available widths without overlap. Then, the bars are sized using barPercentage and categoryPercentage.
maxBarThicknessSet this to ensure that bars are not sized thicker than this.

Stacked chart

To enabled stacked feature, you simply do:

<?php
ColumnChart::create(array(
    ...
    "stacked"=>true
))
?>

LineChart/AreaChart

LineChart and AreaChart are quite the same in term of settings so we group them together.

php line chart

php area chart

Example

<?php 
LineChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount"
            "type"=>"number",
            "prefix"=>"$",
        )
    )
))
?>

Above example show miminum settings to setup a line chart. We use 2 columns from datasource which are "category' and "amount" to draw chart.

Note that: we may add extra column and the extra column will represent another series on the chart. The first column is used for xAxis labeling.

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

Properties of a column

Except for the first column, the next column in the columns list will represent a series of data on the chart. We may have further settings for each column. Below are properties we can set for column.

Example

<?php 
LineChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount"
            "type"=>"number",
            "prefix"=>"$",
            "decimals"=>2,
        )
    )
))
?>
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 eaxmple: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is seperated
decimalPointstring.Specify decimal point
configarrayContain special settings of chart js config for series, see below ChartJs configuration for column for more details

Config for column

This is optional but we can have many further options/configs for the chart. Below are the properties that you can put under the config.

<?php 
LineChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount"
            "type"=>"number",
            "prefix"=>"$",
            "config"=>array(
                "steppedLine"=>true
            )
        )
    )
))
?>
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.
cubicInterpolationModestringAlgorithm used to interpolate a smooth curve from the discrete data points.
fillboolean/stringHow to fill the area under the line.
lineTensionnumberBezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
pointBackgroundColornumber/number[]The fill color for points.
pointBorderColorstring/string[]The border color for points.
pointBorderWidthnumber/arrayThe width of the point border in pixels.
pointRadiusnumber/arrayThe radius of the point shape. If set to 0, the point is not rendered.
pointStylestring/arrayStyle of the point.
pointHitRadiusnumber/arrayThe pixel size of the non-displayed point that reacts to mouse events.d
pointHoverBackgroundColorstring/arrayPoint background color when hovered.
pointHoverBorderColorstring/arrayPoint border color when hovered.
pointHoverBorderWidthnumner/arrayBorder width of point when hovered.
pointHoverRadiusnumber/arrayThe radius of the point when hovered.
showLinebooleanIf false, the line is not drawn for this dataset.
spanGapsbooleanIf true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
steppedLineboolean/stringIf the line is shown as a stepped line. Value: true, false, "before", "after". If the steppedLine value is set to anything other than false, lineTension will be ignored.

PieChart / DonutChart / PolarChart

PieChart, DonutChart and PolarChart are great way to represent percentage of each components of a whole. They are quite similar and share the same settings.

php pie chart

php donut chart

php polar chart

Example

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

With the minimum settings above, we had a PieChart to show percent of each category contributing to the whole sum of amount.

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

Column settings

In PieChart 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:

PieChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "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 eaxmple: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is seperated
decimalPointstring.Specify decimal point
configarrayContain 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.

PieChart::create(array(
    "dataSource"=>$this->dataStore("category_amount"),
    "columns"=>array(
        "category",
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>"$",
            "config"=>array(
                "backgroundColor"=>"#dddddd",
            )
        )
    )
))
nametypedefaultdescription
backgroundColorstring[]The fill color of the arcs in the dataset.
borderColorstring[]The border color of the arcs in the dataset.
borderWidthnumber[]The border width of the arcs in the dataset.
hoverBackgroundColorstring[]The fill colour of the arcs when hovered.
hoverBorderColorstring[]The stroke colour of the arcs when hovered.
hoverBorderWidthnumber[]The stroke width of the arcs when hovered.

RadarChart

php radar chart

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 eaxmple: "formatValue"=>"@value USD" or "formatValue"=>function($value){return $value." USD";}
decimalsnumberThe number of number after decimal points
thousandSeparatorstring,Specify how thousand is seperated
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.
fillboolean/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,
        )
    )
));

ScatterChart/BubbleChart

ScatterChart and BubbleChart are sharing the same settings. They are similar but there is a major different. While ScatterChart care about the location of the point of chart with (x,y) the BubbleChart also care about the size of the point. The BubbleChart has 3 value (x,y,v). The v value determined the size of points.

php scatter chart

php bubble chart

ScatterChart::create(array(
    "title"=>"Age and number of phone owned",
    "dataSource"=>array(
        array("age"=>12,"#phone"=>2),
        array("age"=>18,"#phone"=>3),
        array("age"=>21,"#phone"=>5),
        array("age"=>21,"#phone"=>3),
    ),
    "series"=>array(
        array("age","#phone")
    )
));
ScatterChart::create(array(
    "title"=>"Weight, Height and Number of Phone"
    "dataSource"=>array(
        array("weight"=>89,"height"=>169,"#phone"=>2),
        array("weight"=>75,"height"=>174,"#phone"=>2),
        array("weight"=>72,"height"=>176,"#phone"=>2),
        array("weight"=>78,"height"=>180,"#phone"=>2),
    ),
    "series"=>array(
        array("weight","height",#phone")
    )
));

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
seriesarrayList of series, each series is an array containing column name and settings
optionsarrayExtra options for line chart or area chart, please view options section for more details
backgroundOpacitynumber0.5Set the opacity for background
scalenumber1For BubbleChart only, this property set the scale for bubble to fit the size of chart. Please change this to make the point suitable for the size of your chart

Series property

Property series contains list of columns for ScatterChart and BubbleChart. ScatterChart will requires 2 columns while BubbleChart requires 3 columns. The adding array at the end will contains settings for the series.

ScatterChart::create(array(
    "series"=>array("age","#phone",array(
        "label"=>"Age vs Phone",
    ))
));
BubbleChart::create(array(
    "series"=>array("age","#phone",array(
        "label"=>"Height, weight vs Phone",
    ))
));
nametypedefaultdescription
labelstringLabel of the series
backgroundColorstringBackground of the point
borderColorstringBorder of the point
borderWidthnumberSize of point's border
pointStylestringcircleStyle of points.Values: 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'
radiusnumberSize of the point
hoverBackgroundColorstringBackground of point when hovered
hoverBorderColorstringBorder color of point when hovered
hoverBorderWidthnumberBorder width of the point when hovered
hoverRadiusnumberRadius of point when hovered
hitRadiusnumberAdditional radius for hit detection
scalenumberScale for the series

Support

Please use our forum if you need support, by this way other people can benefit as well. If the support request need privacy, you may send email to us at support@koolreport.com.

User Reviews
(3)
Badal Raut
on Feb 12

The chart is very beautiful and I love the offline feature of the chart compared to Google Chart. Just great.

Peter Holman
on Feb 13

Recommended chart package for php.

Emmanuel
on Feb 14

Just bought! I got some minor bug but get support very quickly from support team so I vote 5 for this.