• Get started
• Stacked Chart
• Format yAxis
• Dual yAxis chart
• Label format
• Legend
• Extra options

ColumnChart

Get started #

Creating D3's ColumnChart is very easy, very similar to other package chart like Google Chart or ChartJs. You will need to define a dataSource which chart will get data from and list of columns that you want to build chart. The first column should be category and the following columns contains data for each series.

Sample Code:

\koolreport\d3\ColumnChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>array(
        array("category"=>"Books","sale"=>32000,"cost"=>20000,"profit"=>12000),
        array("category"=>"Accessories","sale"=>43000,"cost"=>36000,"profit"=>7000),
        array("category"=>"Phones","sale"=>54000,"cost"=>39000,"profit"=>15000),
        array("category"=>"Movies","sale"=>23000,"cost"=>18000,"profit"=>5000),
        array("category"=>"Others","sale"=>12000,"cost"=>6000,"profit"=>6000),
    ),
    "columns"=>array(
        "category",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
        "profit"=>array("label"=>"Profit","type"=>"number","prefix"=>"$"),
    )
));

Stacked Chart #

A stacked column chart is a column chart that places related values atop one another. If there are any negative values, they are stacked in reverse order below the chart's baseline. It's typically used when a category naturally divides into components.

You create a stacked column chart by setting the stacked option to true

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

Format yAxis #

You can format the number on yAxis with following settings

<?php 
ColumnChart::create(array(
    "yAxis"=>array(
        "decimals"=>2,
        "decPoint"=>".",
        "thousandSep"=>",",
        "prefix"=>"",
        "suffix"=>""
    )
));
?>

Dual yAxis chart #

D3's ColumnChart supports two y axis, to turn on you set dualAxis to true:

ColumnChart::create(array(
    ...
    "dualAxis"=>true
))

and then you can have settings for second y axis:

ColumnChart::create(array(
    ...
    "y2Axis"=>array(
        "decimals"=>2,
        "decPoint"=>".",
        "thousandSep"=>",",
        "prefix"=>"",
        "suffix"=>""
    )
))

Label format #

\koolreport\d3\ColumnChart::create(array(
    ...
    "columns"=>array(
        "category",
        "sale"=>array(
            "label"=>"Sale",
            "type"=>"number",
            "prefix"=>"$",
            "suffix"=>"",
            "decimals"=>2,
            "decPoint"=>".",
            "thousandSep"=>","
            "formatValue"=>function($value,$row)
            {
                return $value;
            }
        ),
        ...
    )
));

Above are all settings for columns, you may set the prefix, suffix or how to format number with decimals, decPoint and thousandSep. The formatValue can take a function in which you can have your own logic to format the value.

Legend #

You may hide, show and position the legend:

ColumnChart::create(array(
    ...
    "options"=>array(
        "legend"=>array(
            "position"=>"inset", // Accept "bottom", "right", "inset"
            "show"=>true,
        )
    )
));

Extra options #

There are number of extended options that you may set under the "options" property of ColumnChart. For more options, please have a look at C3JS documentation.

ColumnChart::create(array(
    ...
    "options"=>array(
        ...
    )
))