• Overview
  • Example
• Stacked Area
  • Normal Stacked
  • 100% Stacked

AreaChart

Overview #

An area chart that is rendered within the browser using SVG or VML. Displays tips when hovering over points.

Example #

<?php
AreaChart::create(array(
    "title"=>"Sale vs Cost",
    "dataSource"=>$this->dataStore('sale_by_time')
    "columns"=>array(
        "month",
        "sale"=>array(
            "label"=>"Sale",
            "type"=>"number",
            "prefix"=>"$"
        ),
        "cost"=>array(
            "label"=>"Cost",
            "type"=>"number",
            "prefix"=>"$"
        ),
    ),
));
?>

Stacked Area #

By default, the area chart draws the series on top of one another. You can stack them atop one another instead, so that the data values at each x-value are summed. In an area chart, the value for each series will always be stacked relative to the preceding series value. Stacking a mix of negative and positive values will cause the areas to overlap.

Normal Stacked #

AreaChart::create(array(
    ...
    "options"=>array(
        "isStacked"=>true
    ),
));

100% Stacked #

AreaChart::create(array(
    ...
    "options"=>array(
        "isStacked"=>"percent"
    ),
));