KoolReport
  1. Home
  2. Google Charts
  3. Google Charts: Stepped Area Chart

Some Common Options

The above example shows you how to create SteppedAreaChart using built-in Google Charts. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.

For example:

...
"options" => array(
    ...
    "isStacked" => true,
    "backgroundColor" => '#ddd',
    "legend" => [
        "position" => 'bottom'
    ],
    "connectSteps" => false,
    "colors" => ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
)

<?php

require_once "../../../../load.koolreport.php";
require_once "MyReport.php";

$report = new MyReport;
$report->run()->render();

<?php
require_once "../../../../load.koolreport.php";
class MyReport extends \koolreport\KoolReport
{

}
<?php

use \koolreport\widgets\google\SteppedAreaChart;

$data = [
    ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
    ['Alfred Hitchcock (1935)', 8.4,         7.9],
    ['Ralph Thomas (1959)',     6.9,         6.5],
    ['Don Sharp (1978)',        6.5,         6.4],
    ['James Hawes (2008)',      4.4,         6.2]
];
?>
<div class="report-container">
    <div class="text-center">
        <h1>Some Common Options</h1>
    </div>

    <div style="margin-bottom:50px;">
        <?php
        SteppedAreaChart::create(array(
            "dataSource" => $data,
            "columns" => array(
                'Director (Year)',
                'Rotten Tomatoes',
                'IMDB'
            ),
            "options" => array(
                "title" => 'The decline of \'The 39 Steps\'',
                "vAxis" => [
                    "title" => 'Accumulated Rating'
                ],
                "isStacked" => true,
                "backgroundColor" => '#ddd',
                "legend" => [
                    "position" => 'bottom'
                ],
                "connectSteps" => false,
                "colors" => ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
            )
        ));
        ?>
    </div>
</div>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro