KoolReport
  1. Home
  2. ApexCharts
  3. How to draw TimeLineChart - Basic

TimeLineChart

This example shows how to create beautiful TimeLineChart

positionnamedate_startdate_end
President George Washington 1789/4/30 1797/3/4
President John Adams 1797/3/4 1801/3/4
Vice President John Adams 1789/4/21 1797/3/4
President Thomas Jefferson 1801/3/4 1809/3/4
Vice President Thomas Jefferson 1797/3/4 1801/3/4
Secretary of State Thomas Jefferson 1790/3/22 1793/12/31
Vice President Aaron Burr 1801/3/4 1805/3/4
Vice President George Clinton 1805/3/4 1812/4/20
Secretary of State John Jay 1789/9/25 1790/3/22
Secretary of State Edmund Randolph 1794/1/2 1795/8/20
Secretary of State Timothy Pickering 1795/8/20 1800/5/12
Secretary of State Charles Lee 1800/5/13 1800/6/5
Secretary of State John Marshall 1800/6/13 1801/3/4
Secretary of State Levi Lincoln 1801/3/5 1801/5/1
Secretary of State James Madison 1801/5/2 1809/3/3 

$data2 = \koolreport\apexcharts\Chart::rowsToColumns($data, [
    'rowColumns' => ['name'],
    'valueColumns' => ['date_start', 'date_end'],
    'fixedColumns' => ['position']
]);
positionGeorge Washington__date_startGeorge Washington__date_endJohn Adams__date_startJohn Adams__date_endThomas Jefferson__date_startThomas Jefferson__date_endAaron Burr__date_startAaron Burr__date_endGeorge Clinton__date_startGeorge Clinton__date_endJohn Jay__date_startJohn Jay__date_endEdmund Randolph__date_startEdmund Randolph__date_endTimothy Pickering__date_startTimothy Pickering__date_endCharles Lee__date_startCharles Lee__date_endJohn Marshall__date_startJohn Marshall__date_endLevi Lincoln__date_startLevi Lincoln__date_endJames Madison__date_startJames Madison__date_end
President 1789/4/30 1797/3/4 1797/3/4 1801/3/4 1801/3/4 1809/3/4 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Vice President 0 0 1789/4/21 1797/3/4 1797/3/4 1801/3/4 1801/3/4 1805/3/4 1805/3/4 1812/4/20 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Secretary of State 0 0 0 0 1790/3/22 1793/12/31 0 0 0 0 1789/9/25 1790/3/22 1794/1/2 1795/8/20 1795/8/20 1800/5/12 1800/5/13 1800/6/5 1800/6/13 1801/3/4 1801/3/5 1801/5/1 1801/5/2 1809/3/3 

\koolreport\apexcharts\TimeLineChart::create(array(
    "dataSource" => $data2,
    "columns" => [
        'position',
        'George Washington' => [
            'combination' => [
                'George Washington__date_start',
                'George Washington__date_end'
            ]
        ],
        'Thomas Jefferson' => [
            'combination' => [
                'Thomas Jefferson__date_start',
                'Thomas Jefferson__date_end'
            ]
        ],
        'John Adams' => [
            'combination' => [
                'John Adams__date_start',
                'John Adams__date_end'
            ]
        ],
        ...
    ]
));

The above example shows you how to create TimeLineChart using ApexCharts package. 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.

<?php

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

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

<?php

class MyReport extends \koolreport\KoolReport
{

}
<div class="report-content">
    <div class="text-center">
        <h1>TimeLineChart</h1>
        <p class="lead">
            This example shows how to create beautiful TimeLineChart
        </p>
    </div>
    <style>
        .apexcharts-canvas {
            margin: 0 auto;
        }
    </style>
    <div style="margin-bottom:50px;">
        <?php
        $data = [
            [
                'name',
                'position',
                'date_start',
                'date_end',
            ],
            [
                "George Washington",
                "President",
                "1789/4/30",
                "1797/3/4"
            ],
            [
                "John Adams",
                "President",
                "1797/3/4",
                "1801/3/4"
            ],
            [
                "John Adams",
                "Vice President",
                "1789/4/21",
                "1797/3/4"
            ],
            [
                "Thomas Jefferson",
                "President",
                "1801/3/4",
                "1809/3/4"
            ],
            [
                "Thomas Jefferson",
                "Vice President",
                "1797/3/4",
                "1801/3/4"
            ],
            [
                "Thomas Jefferson",
                "Secretary of State",
                "1790/3/22",
                "1793/12/31"
            ],
            [
                "Aaron Burr",
                "Vice President",
                "1801/3/4",
                "1805/3/4"
            ],
            [
                "George Clinton",
                "Vice President",
                "1805/3/4",
                "1812/4/20"
            ],
            [
                "John Jay",
                "Secretary of State",
                "1789/9/25",
                "1790/3/22"
            ],
            [
                "Edmund Randolph",
                "Secretary of State",
                "1794/1/2",
                "1795/8/20"
            ],
            [
                "Timothy Pickering",
                "Secretary of State",
                "1795/8/20",
                "1800/5/12"
            ],
            [
                "Charles Lee",
                "Secretary of State",
                "1800/5/13",
                "1800/6/5"
            ],
            [
                "John Marshall",
                "Secretary of State",
                "1800/6/13",
                "1801/3/4"
            ],
            [
                "Levi Lincoln",
                "Secretary of State",
                "1801/3/5",
                "1801/5/1"
            ],
            [
                "James Madison",
                "Secretary of State",
                "1801/5/2",
                "1809/3/3"
            ]
        ];
        ?>

<div style="overflow: scroll">
    <?php
        \koolreport\widgets\koolphp\Table::create([
            'dataSource' => $data,
            'paging' => true,
            'columns' => ['position', 'name', 'date_start', 'date_end'],
            
        ]);
        ?>
</div>

<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<pre style="font-weight:bold"><code>
$data2 = \koolreport\apexcharts\Chart::rowsToColumns($data, [
    'rowColumns' => ['name'],
    'valueColumns' => ['date_start', 'date_end'],
    'fixedColumns' => ['position']
]);
</code></pre>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>

<div style="overflow: scroll">
    <?php
        $data2 = \koolreport\apexcharts\Chart::rowsToColumns($data, [
            'rowColumns' => ['name'],
            'valueColumns' => ['date_start', 'date_end'],
            'fixedColumns' => ['position'],
        ]);
        // \koolreport\core\Utility::prettyPrint2($data2);
        \koolreport\widgets\koolphp\Table::create([
            'dataSource' => $data2
        ]);
    ?>
</div>

<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<pre style="font-weight:bold" ><code>
\koolreport\apexcharts\TimeLineChart::create(array(
    "dataSource" => $data2,
    "columns" => [
        'position',
        'George Washington' => [
            'combination' => [
                'George Washington__date_start',
                'George Washington__date_end'
            ]
        ],
        'Thomas Jefferson' => [
            'combination' => [
                'Thomas Jefferson__date_start',
                'Thomas Jefferson__date_end'
            ]
        ],
        'John Adams' => [
            'combination' => [
                'John Adams__date_start',
                'John Adams__date_end'
            ]
        ],
        ...
    ]
));
</code></pre>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
        <div>
            <?php
            \koolreport\apexcharts\TimeLineChart::create(array(
                "dataSource" => $data2,
                "columns" => [
                    'position',
                    'George Washington' => [
                        'combination' => [
                            'George Washington__date_start',
                            'George Washington__date_end'
                        ]
                    ],
                    'Thomas Jefferson' => [
                        'combination' => [
                            'Thomas Jefferson__date_start',
                            'Thomas Jefferson__date_end'
                        ]
                    ],
                    'John Adams' => [
                        'combination' => [
                            'John Adams__date_start',
                            'John Adams__date_end'
                        ]
                    ],
                    'John Jay' => [
                        'combination' => [
                            'John Jay__date_start',
                            'John Jay__date_end'
                        ]
                    ],
                    'Edmund Randolph' => [
                        'combination' => [
                            'Edmund Randolph__date_start',
                            'Edmund Randolph__date_end'
                        ]
                    ],
                    'Timothy Pickering' => [
                        'combination' => [
                            'Timothy Pickering__date_start',
                            'Timothy Pickering__date_end'
                        ]
                    ],
                    'Charles Lee' => [
                        'combination' => [
                            'Charles Lee__date_start',
                            'Charles Lee__date_end'
                        ]
                    ],
                    'John Marshall' => [
                        'combination' => [
                            'John Marshall__date_start',
                            'John Marshall__date_end'
                        ]
                    ],
                    'Levi Lincoln' => [
                        'combination' => [
                            'Levi Lincoln__date_start',
                            'Levi Lincoln__date_end'
                        ]
                    ],
                    'James Madison' => [
                        'combination' => [
                            'James Madison__date_start',
                            'James Madison__date_end'
                        ]
                    ],
                    'George Clinton' => [
                        'combination' => [
                            'George Clinton__date_start',
                            'George Clinton__date_end'
                        ]
                    ],
                    'Aaron Burr' => [
                        'combination' => [
                            'Aaron Burr__date_start',
                            'Aaron Burr__date_end'
                        ]
                    ],
                ],
                "options" => [
                    'plotOptions | bar' => [
                        'barHeight' => '50%',
                        'rangeBarGroupRows' => true
                    ],
                    'xaxis | type' => 'datetime',
                    'legend | position' => 'right',
                    'tooltip | custom' => "function(opts) {
                        const fromYear = new Date(opts.y1).getFullYear()
                        const toYear = new Date(opts.y2).getFullYear()
                    
                        const w = opts.ctx.w
                        let ylabel = w.globals.labels[opts.dataPointIndex]
                        let seriesName = w.config.series[opts.seriesIndex].name
                            ? w.config.series[opts.seriesIndex].name
                            : ''
                        const color = w.globals.colors[opts.seriesIndex]
                    
                        return (
                            '<div class=\"apexcharts-tooltip-rangebar\">' +
                            '<div> <span class=\"series-name\" style=\"color: ' +
                            color +
                            '\">' +
                            (seriesName ? seriesName : '') +
                            '</span></div>' +
                            '<div> <span class=\"category\">' +
                            ylabel +
                            ' </span> <span class=\"value start-value\">' +
                            fromYear +
                            '</span> <span class=\"separator\">-</span> <span class=\"value end-value\">' +
                            toYear +
                            '</span></div>' +
                            '</div>'
                        )
                    }"
                ],
                "uniqueCategories" => true,
                'colors' => [
                    '#008FFB',
                    '#00E396',
                    '#FEB019',
                    '#FF4560',
                    '#775DD0',
                    '#3F51B5',
                    '#546E7A',
                    '#D4526E',
                    '#8D5B4C',
                    '#F86624',
                    '#D7263D',
                    '#1B998B',
                    '#2E294E',
                    '#F46036',
                    '#E2C044'
                ],
                'fillType' => 'solid',
                // "showLegend" => false,
                // "showLabel" => true,
                // "height" => "600px",
                // "width" => "85%",
                "maxWidth" => "800px",
            ));
            ?>
        </div>
    </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