• Overview
  • Example
• Stacked Chart
  • Normal Stacked
  • 100% Stacked
• Column style
  • Columns Color
  • Other Style Properties
• Labeling columns

ColumnChart

Overview #

ClassName: \koolreport\widgets\google\ColumnChart

A column chart is a vertical bar chart rendered in the browser using SVG or VML, whichever is appropriate for the user's browser. Like all Google charts, column charts display tooltips when the user hovers over the data. For a horizontal version of this chart, see the bar chart.

Example #

<?php 
\koolreport\widgets\google\ColumnChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>$this->dataStore("sale")
    "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.

Normal Stacked #

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

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

100% Stacked #

Stacked column charts also support 100% stacking, where the stacks of elements at each domain-value are rescaled such that they add up to 100%.

<?php 
ColumnChart::create(array(
    ...
    "options"=>array(
        "isStacked"=>"percent"
    )
));
?>

Column style #

Columns Color #

Normally columns are the same color if they are in the same series, however you can change the color for each of them.

<?php
\koolreport\widgets\google\ColumnChart::create(array(
    "title"=>"Color columns",
    "dataSource"=>array(
        array("category"=>"Books","sale"=>32000,"color"=>"#4F5060"),
        array("category"=>"Accessories","sale"=>43000,"color"=>"#67819D"),
        array("category"=>"Phones","sale"=>54000,"color"=>"#ADBD37"),
        array("category"=>"Movies","sale"=>23000,"color"=>"#588133",),
        array("category"=>"Others","sale"=>12000,"color"=>"#003B45"),
    ),
    "columns"=>array(
        "category",
        "sale"=>array(
            "label"=>"Sale",
            "type"=>"number",
            "prefix"=>"$",
            "style"=>function($row){
                return "color:".$row["color"];
            }
        ),
    ),
));

Other Style Properties #

Beside color properties of column style, Column Chart has other properties like this:

• opacity
• fill-color
• fill-opacity
• stroke-color
• stroke-opacity
• stroke-width

Example:

"style"=>function($row){
    return "color:#ADBD37;fill-opactity:0.6";
}

Labeling columns #

Charts have several kinds of labels, such as tick labels, legend labels, and labels in the tooltips. In this section, we'll see how to put labels inside (or near) the columns in a column chart.

Note: This is extremely useful if you are planning to print the chart or export to PDF. With this feature, your printed chart will have label on columns.

\koolreport\widgets\google\ColumnChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>$this->dataStore('sale_amount'),
    "columns"=>array(
        "category",
        "sale"=>array(
            "label"=>"Sale",
            "type"=>"number",
            "prefix"=>"$",
            "annotation"=>function($row)
            {
                return "$".number_format($row["sale"]);
            }
        )
    )
));