• Overview
• Curve Line
• Dual-Y Axis

LineChart

Overview #

A line chart that is rendered within the browser using SVG or VML. Displays tooltips when hovering over points.

Code:

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

Curve Line #

Code:

LineChart::create(array(
    ...
    "options"=>array(
        "curveType"=>"function"
    )
));

Dual-Y Axis #

Code:

<?php
\koolreport\widgets\google\LineChart::create(array(
    ...
    "options"=>array(
        "series"=> array(
            0=> array("targetAxisIndex"=> 0),
            1=> array("targetAxisIndex"=> 1),
        ),
        "vAxes"=>array(
            0=> array("title"=> 'Sale'),
            1=> array("title"=> 'Cost')
        ),
    )
));

Explanation:

1. First we define "vAxes" with two axis, you may see we name the title of each axis "Sale" and "Cost".
2. We map our series to the axis by define series 0 (refer to sale) to the Axis number 1 (using "targetAxisIndex").