• Overview
• Settings
  • Data column settings
  • ChartJs config for column
• Some extra options
• Stacked chart

ColumnChart

Overview #

A column chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

Code:

<?php
\koolreport\chartjs\ColumnChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>$this->dataStore('sales')
    "columns"=>array(
        "category",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
        "profit"=>array("label"=>"Profit","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.

Settings #

Data column settings #

Since version 3.0.0, 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
            )
        )
    ))

ChartJs config for column #

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 ColumnChart. This below settings are put under options property.

Stacked chart #

ColumnChart support stacked chart

Code:

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