LineChart

Overview #

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

Code:

<?php
\koolreport\chartjs\LineChart::create(array(
    "title"=>"Sale vs Cost",
    "dataSource"=>$this->dataStore('month_sales'),
    "columns"=>array(
        "month",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","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 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 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.