Lagoon Charts

Google Charts for Laravel Livewire

Requirements

• Laravel 9+
• Livewire 3+

Installation

Run composer:

composer require helvetitec/lagoon-charts:~2.0

For Livewire 2:

composer require helvetitec/lagoon-charts:~1.0

Included Charts

• Area Charts
• Bar Charts
• Candlestick Charts
• Column Charts
• Line Charts
• Pie Charts
• Waterfall Charts
• Timelines
• Gantt Charts
• Other Charts

Included Functions

• Actions
• Events (Selected, Ready, Error)
• Darkmode (Can be manually set if you set the 'viewMode' to 'light' to enable lightmode or 'dark' to enable darkmode
• Automatic Darkmode (Would be nice if it would be automatically set)
• Custom Tooltips
• HTML Tooltips

Usage

Prepare View

Important, since Version 2.2 you will need to add @lagoonScripts and @lagoonStyles to your layouts!

Add Styles:

@lagoonStyles <!-- This will add a small style part which will cause tooltipps stop cliping when hover over with the mouse -->

CoreCharts:

@lagoonScripts('en') <!-- The only parameter needed is the localization parameter, you can use any language recognized by Google -->
@lagoonScripts({{ app()->getLocale() }}) <!-- This will set the localization to the locale set in Laravel -->

Gantt Charts:

@lagoonScripts('en', 'gantt') <!-- To make Gantt Charts working, you'll need to load the package -->
@lagoonScripts('en', ['corechart', 'gantt']) <!-- If you have multiple chart types, add them as an array -->

Timeline Charts:

@lagoonScripts('en', 'timeline') <!-- To make Timeline Charts working, you'll need to load the package -->
@lagoonScripts('en', ['corechart', 'timeline']) <!-- If you have multiple chart types, add them as an array -->

Pie Chart

Livewire

$pieChartTable = new \Helvetitec\LagoonCharts\DataTables\PieChartTable();
$pieChartTable->addRow("Row1", 20);
$pieChartTable->addRow("Row2", 30);
$data = $pieChartTable->toArray();

Blade

@livewire('lagoon-pie-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'title' => 'Title', 'width' => 400, 'height' => 200, 'column1' => 'Col1Label', 'column2' => 'Col2Label'], key('uniqueKey'.now()))

Line Chart

Livewire

$lineChartTable = new \Helvetitec\LagoonCharts\DataTables\LineChartTable('xAxis', ['yAxis1', 'yAxis2']);
$lineChartTable->addRow([1, 100, 200]);
$lineChartTable->addRow([2, 200, 100]);
$data = $lineChartTable->toArray();

Blade

@livewire('lagoon-line-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Candlestick Chart

Livewire

$candlestickChartTable = new \Helvetitec\LagoonCharts\DataTables\CandlestickChartTable();
$candlestickChartTable->addRow([1, 100, 200]);
$candlestickChartTable->addRow([2, 200, 100]);
$data = $candlestickChartTable->toArray();

Blade

@livewire('lagoon-candlestick-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Waterfall Chart

Livewire

$waterfallChartTable = new \Helvetitec\LagoonCharts\DataTables\WaterfallChartTable();
$waterfallChartTable->addRow("Mon", 100, 200);
$waterfallChartTable->addRow("Tue", 200, 300);
$data = $waterfallChartTable->toArray();

Blade

@livewire('lagoon-waterfall-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Bar Chart

Livewire

$barChartTable = new \Helvetitec\LagoonCharts\DataTables\BarChartTable('xAxis', ['yAxis1', 'yAxis2']);
$barChartTable->addRow([1, 100, 200]);
$barChartTable->addRow([2, 200, 100]);
$data = $barChartTable->toArray();

Blade

@livewire('lagoon-bar-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Column Chart

Livewire

$columnChartTable = new \Helvetitec\LagoonCharts\DataTables\ColumnChartTable('xAxis', ['yAxis1', 'yAxis2']);
$columnChartTable->addRow([1, 100, 200]);
$columnChartTable->addRow([2, 200, 100]);
$data = $columnChartTable->toArray();

Blade

@livewire('lagoon-column-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Area Chart

Livewire

$areaChartTable = new \Helvetitec\LagoonCharts\DataTables\AreaChartTable('xAxis', ['yAxis1', 'yAxis2']);
$areaChartTable->addRow([1, 100, 200]);
$areaChartTable->addRow([2, 200, 100]);
$data = $areaChartTable->toArray();

Blade

@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now()))

Gantt Chart

Livewire

$ganttChartTable = new GanttChartTable();

$ganttChartTable->addTask("test1", "Test1", Carbon::now(), Carbon::now()->copy()->addMonth(), 30, 100, null);
$ganttChartTable->addTask("test2", "Test2", Carbon::now()->copy()->addMonth(), Carbon::now()->copy()->addMonths(2), 30, 100, "test1");

$data = $ganttChartTable->__toString(); //IMPORTANT USE __toString() here!

Blade

@livewire('lagoon-gantt-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'options' => []], key('uniquekey'.now()))

Timeline

Livewire

$timelineTable = new TimelineTable(true); //The parameter sets if the hours, minutes and seconds should be included in the date

$timelineTable->addTask("Person 1", "Project 1", Carbon::now(), Carbon::now()->copy()->addHour());
$timelineTable->addTask("Person 2", "Project 1", Carbon::now()->copy()->addHour(), Carbon::now()->copy()->addHours(2));

$data = $timelineTable->__toString(); //IMPORTANT USE __toString() here!

Blade

@livewire('lagoon-timeline', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'options' => []], key('uniquekey'.now()))

Add options to the Charts

You can add options with the 'options' => ['option1' => 'something'] variable. You can add all options that are inside the respective Google Chart.

Blade

@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => ['backgroundColor' => 'black']], key('uniquekey'.now()))

Add link to Chart PNG

You can add a link to a PNG from the chart by adding 'printable' => true, this does only work with corecharts!

Blade

@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'printable' => true], key('uniquekey'.now()))

Using Actions

You can use actions inside the charts by adding the SwitchAction object.

PHP

$switchAction = new \Helvetitec\LagoonCharts\Actions\SwitchAction("action", "Test Action");

$switchAction->addAction("alert('hello world!');"); //Adds a single javascript action to the list (starting at index 0)

$switchAction->addActionAt(0, "alert('hello world, again!');"); //Adds a single javascript action to a specific index

$switchStr = $switchAction->__toString();

$actions = [
    $switchStr
];

Blade

@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'actions' => $actions], key('uniquekey'.now()))

Using Events

You can use events inside the charts to interact with the charts and the data within

PHP

$readyEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Ready, "alert('hello, i\'m ready');");

//The error event will include an err variable
$errorEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Error, "alert('ops!' + err);");

//The select event will include a selection variable, which represents chart.getSelection();
$selectEvent = new \Helvetitec\LagoonCharts\Utils\Event(\Helvetitec\LagoonCharts\Utils\EventType::Select, "alert(selection[0][0]);");

$eventArr = [
    'ready' => $readyEvent->__toString(),
    'error' => $errorEvent->__toString(),
    'select' => $selectEvent->__toString()
];

Blade

@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'events' => $eventArr], key('uniquekey'.now()))