• Overview
• Tooltip
  • Format tooltip number
  • Extra tooltip options
• Format yAxis
• Dual yAxis chart
• Legend
• Timeseries

LineChart

Overview #

A line chart or line plot or line graph or curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields.

\koolreport\d3\LineChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>array(
        array("month"=>"January","sale"=>32000),
        array("month"=>"February","sale"=>43000),
        array("month"=>"March","sale"=>33000),
        array("month"=>"April","sale"=>40000),
        array("month"=>"May","sale"=>45000),
    ),
    "columns"=>array(
        "month",
        "sale"=>array(
            "label"=>"Sale Amount",
            "type"=>"number",
            "prefix"=>"$"
        )
    )
));

Tooltip #

Format tooltip number #

To format the number on tooltip, you can set properties on each column:

    "columns"=>array(
        ...
        "sale"=>array(
            "label"=>"Sale Amount",
            "type"=>"number",
            "prefix"=>"$",
            "suffix"=>"",
            "decimals"=>2,
            "decPoint"=>".",
            "thousandSep"=>",",
            "formatValue"=>function($value,$row)
            {
                return "$".$value;
            }
        ),
        ...
    )

If setting prefix, suffix, decimals, decPoint and thousandSep is not enough for you, you can use the formatValue to set custom format function for your value.

Extra tooltip options #

LineChart::create(array(
    "options"=>array(
        "tooltip"=>array(
            "show"=>true, // Take true or false to set visibility of tooltip
            "grouped"=>true, // Whether tooltip is grouped or show for each data point
            "position"=>"function (data, width, height, element) {
                //Change the position of tooltip
                return {top: 0, left: 0};
            }",
        )
    )
))

Format yAxis #

You can format the number on yAxis with following settings

<?php 
LineChart::create(array(
    "yAxis"=>array(
        "decimals"=>2,
        "decPoint"=>".",
        "thousandSep"=>",",
        "prefix"=>"",
        "suffix"=>""
    )
));
?>

Dual yAxis chart #

D3's LineChart supports two y axis, to turn on you set dualAxis to true:

ColumnChart::create(array(
    ...
    "dualAxis"=>true
))

and then you can have settings for second y axis:

ColumnChart::create(array(
    ...
    "y2Axis"=>array(
        "decimals"=>2,
        "decPoint"=>".",
        "thousandSep"=>",",
        "prefix"=>"",
        "suffix"=>""
    )
))

Legend #

You may hide, show and position the legend:

ColumnChart::create(array(
    ...
    "options"=>array(
        "legend"=>array(
            "position"=>"inset", // Accept "bottom", "right", "inset"
            "show"=>true,
        )
    )
));

Timeseries #

If type of your category column is date, datetime or time the timeseries feature will be turned on automatically.

\koolreport\d3\LineChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>array(
        array("date"=>"2018-09-01","sale"=>32000),
        array("date"=>"2018-09-02","sale"=>43000),
        array("date"=>"2018-09-04","sale"=>33000),
        array("date"=>"2018-09-05","sale"=>40000),
        array("date"=>"2018-09-09","sale"=>45000),
    ),
    "columns"=>array(
        "date"=>array(
            "type"=>"date",
            "xFormat"=>"%Y-%m-%d",
            "xDisplayFormat"=>"%B %d, %Y"
        ),
        "sale"=>array(
            "label"=>"Sale Amount",
            "type"=>"number",
            "prefix"=>"$"
        ),
    )
));

*Important: Here is the List Of Format String that you can use for xFormat and xFormatDisplay. The xFormat defines what is current format of your data and xFormatDisplay defines how you want your date to be displayed.