Timeline

Overview #

A timeline chart is a visual rendition of a series of events. Timeline charts can be created for anything that occurred over a period of time. A timeline chart makes it easier to conceptualize a process or a sequence of events.

Code:

<?php
    $data = [
        ["timelineLabel" => "Cool Graph", "itemLabel" => "Unknown", "start" => "2018-01-21", "end" => "2018-01-29"],
        ["timelineLabel" => "Heater", "itemLabel" => "On", "start" => "2018-01-22", "end" => "2018-01-23"],
        ["timelineLabel" => "Heater", "itemLabel" => "Off", "start" => "2018-01-24", "end" => "2018-01-26"],
        ["timelineLabel" => "Heater", "itemLabel" => "On", "start" => "2018-01-26", "end" => "2018-01-30"],
    ];    
    \koolreport\chartjs\Timeline::create(array(
        "data" => $data,
        "columns" => [
            "timelineLabel", "start", "end", "itemLabel",
        ],
    ));

Data structure #

A timeline data comprises 4 columns:

  1. A timeline label
  2. Start datetime of an event/item of that timeline
  3. End datetime of the event/item of that timeline
  4. Label of the event/item of that timeline

Settings #

nametypedefaultdescription
colorSchemeArray of arraySpecify a list of list of colors to show multiple timelines' events/items in

Some extra options #

Below are some extra options for BarChart. This below settings are put under options property.

nametypedefaultdescription
showTextbooleantrueOption to show item label or not
textPaddingnumber5Option to padding item label from its start point

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.