• Overview
  • Example
• Stacked Chart
  • Normal Stacked
  • 100% Stacked
• Bar style
  • Bars Color
  • Other Style Properties
• Labeling bars

BarChart

Overview #

ClassName: \koolreport\widgets\google\BarChart

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

Example #

<?php 
\koolreport\widgets\google\BarChart::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 bar chart is a bar 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 bar chart by setting the isStacked option to true

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

100% Stacked #

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

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

Bar style #

Bars Color #

Normally bars 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\BarChart::create(array(
    "title"=>"Color bars",
    "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 bar style, Bar 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 bars #

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 bars in a bar 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 bars.

\koolreport\widgets\google\BarChart::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"]);
            }
        )
    )
));