Lavacharts

Introduction

Lavacharts abstracts Google's Javascript Chart API to PHP

The Lavachart library takes away the need for manual writing of Javascript in your views
The library wraps the work of generating the proper Javascript, so you can focus on the data and not the JS in page.
Configuration is intuitive and easy to follow since it correlates 1:1 with the Google Chart API.
Designed to work with any PHP project, but some bonus features were added for Laravel users.
Laravel specific features include: A ServiceProvider, Facade, and Blade template extensions.

Found a bug? Have an issue? Come visit the project on Github and let me know.

Installation

Get up and running within minutes, using the PHP package manager, Composer.

Click Here to check out Composer, if you haven't heard of it

With Composer

First, copy this line into your project's composer.json file, in the "require": {} section

"khill/lavacharts" : "2.5.*"

Next, run composer to download and install

composer update

Finally, require 'vendor/autoload.php'; in your project and you are good to go!

Laravel

If you are using Laravel...

Do not require the vendor/autoload.php file, since Laravel takes care of that.

And also, register the service provider by adding this line to the providers array in app/config/app.php

"Khill\Lavacharts\Laravel\LavachartsServiceProvider"

Don't worry about adding the class alias, it is loaded automatically.

Remember, while using Laravel, replace $lava-> with Lava::

Manual (Non Composer)

First, grab the most recent copy of the source from Github using the this link:

You will also need to get a copy of the Carbon Library since it is a dependency of DataTables.

Then, include Carbon and Lavacharts and create a new instance.

include(/* path to unzipped carbon archive */ . '/src/Carbon/Carbon.php')
include(/* path to unzipped lavacharts archive */ . '/src/Lavacharts.php');

use \Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts;

Quickstart

Getting up and running with Lavacharts is a breeze and you can follow along with these easy steps to get you going.
You can also view the examples if you want to dive right in and look under the hood.
These steps will show you how to put a simple line chart into your project.

DataTables

Creating a new DataTable

The following is a simple example, just to get you up and running.

For an in-depth look at DataTables, Click Here or use the link from the menu.

First, create a new DataTable object using the method from Lavcharts.
Next, add some columns, defining the structure of the chart's data.
- addDateColumn($description) for dates
- addNumberColumn($description) for numbers
- addStringColumn($description) for strings
In this example, the first column is the horizontal axis, then then next two columns are the two sets of data.
The addRow() method signature, follows the order in which the columns were added.
So here, data[0] is for 'day', data[1] is for 'projected' and data[2] is for 'official'

$stocksTable = $lava->DataTable();  // Lava::DataTable() if using Laravel

$stocksTable->addDateColumn('Day of Month')
            ->addNumberColumn('Projected')
            ->addNumberColumn('Official');

// Random Data For Example
for ($a = 1; $a < 30; $a++)
{
    $rowData = array(
      "2014-8-$a", rand(800,1000), rand(800,1000)
    );

    $stocksTable->addRow($rowData);
}

Creating a Chart

Select which chart you will be generating.
Assign the chart a label.
Assign the datatable to the chart.
Continue on to render the chart.

$chart = $lava->LineChart('myFancyChart');  // Lava::LineChart() if using Laravel

$chart->datatable($stocksTable);

// You could also pass an associative array to setOptions() method
// $chart->setOptions(array(
//   'datatable' => $stocksTable
// ));

Output

Rendering the chart

There are two ways to get your chart to display on your page.

The library will generate only the javascript, and render into a div with a set elementId
The library will generate everything you need, div and javascript.

Syntax: render(chartType, chartLabel, elementId [, bool | array(height, width)])

// Example #1, output into a div you already created
// <div id="myStocks"></div>
echo $lava->render('LineChart', 'myFancyChart', 'myStocks');

// Example #2, have the library create the div
echo $lava->render('LineChart', 'myFancyChart', 'myStocks', true);

// Example #3, have the library create the div with a fixed size
echo $lava->render('LineChart', 'myFancyChart', 'myStocks', array('height'=>300, 'width'=>600));

Alternatively, the render method is available from the Chart object as well, bypassing the need for inputing the type and title of the chart.

// After creating the chart with $linechart = $lava->LineChart() or any other type,
// pass the Chart object to your view and call the render method with a div's elementId
echo $linechart->render('myStocks');

Lavacharts

Methods

These are the methods available via the main Lavacharts class.

This method with output the script tag to the google jsapi, along with some core javascript for lavacharts.

Use with Angular so the script tag is not placed inside an ng-view and can be manually placed in the header.

If you do not need manual placement, ignore this method and the render methods will automatically add the script tags.

jsapi() returns String

render( string $chartType, string $chartLabel, string $divId[, bool $div | array $divDimensions ] ) returns String

DataTable( [string $timezone] ) returns DataTable

Any valid chart object, capitalized: LineChart, BarChart, PieChart, etc...

*Chart( string $title ) returns Chart

Any valid config object, capitalized: TextStyle, HorizontalAxis, Annotation, etc...

*( array $options ) returns ConfigObject

Any valid format object, capitalized: DateFormat, NumberFormat

*( array $options ) returns Format

Any valid event object, capitalized: Ready, MouseOver, etc...

*( string $callback ) returns Event

DataTables

Columns

There are many ways to add columns to the DataTable, using strings, arrays, or an array of arrays.

Type - Defines the type of data that will be in the column.
colDesc - The description of the column. (optional)
colLabel - A label used to access specific columns. (optional)
format - The desired format for the column. (optional)

addColumn( string $type [, string $colDesc [, string $colLabel [, Format $format ]]] ) returns DataTable

addColumn( array( string $type [, string $colDesc [, string $colLabel [, Format $format ]]]) ) returns DataTable

addColumns( array( /* of column arrays, see above */ ) ) returns DataTable

Also provided are simplified, alias methods, which will automatically fill the type and colLabel.

Note: The first columns label with be "col_1", then "col_2", etc.

addDateColumn( string $colDesc [, Format $format ] ) returns DataTable

addNumberColumn( string $colDesc [, Format $format ] ) returns DataTable

addStringColumn( string $colDesc ) returns DataTable

Other column related methods

getColumns() returns array

getNumberOfColumns() returns int

Rows

Add rows either by chaining the single row command, or batch adding with the addRows() method.

Note: Each row array added, must have the same number of data points as the number of columns.

addRow( array( $c1 [, $c2 [, $cN ]]) ) returns DataTable

addRows( array( /* of row arrays, see above */ ) ) returns DataTable

Other row related methods

getRows() returns array

getNumberOfRows() returns int

Formats

Columns can have formats applied so the data/labels will be shown according to the format definition. The two available are:

DateFormat
NumberFormat

All of the methods return the Format object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Format's constructor

Formats are created the same way as ConfigObjects

DateFormat

formatType( string $ft ) returns Format

pattern( string $p ) returns Format

timezone( string $tz ) returns Format

Explanations of the methods can be found in Google's Documentation

NumberFormat

decimalSymbol( string $ds ) returns Format

fractionDigits( int $fd ) returns Format

groupingSymbol( string $gs ) returns Format

negativeColor( string $nc ) returns Format

negativeParens( bool $np ) returns Format

pattern( string $p ) returns Format

prefix( string $p ) returns Format

suffix( string $s ) returns Format

Explanations of the methods can be found in Google's Documentation

Utility Methods

Set the timezone to be used for Date columns, defaults to America/Los_Angeles

setTimezone( string $tz ) returns DataTable

If using string dates, maybe to represent only years such as "2000" and they are not being interpreted correctly, then use this method to set the format string for the whole DataTable.

Use a format string following the DateTime format

setDateTimeFormat( string $dtf ) returns DataTable

Get the JSON representation of a DataTable, useful for reloading charts via AJAX. (See Example)

toJson() returns JSON Object

Charts

Select a chart from the dropdown menu to see the different configuration methods / options available.

All of the methods below are also available to all of the charts, as the each extend the parent Chart

Parent ChartAll of the methods (except for setOptions) return the Chart to enable the chaining of configuration options
Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

  datatable(Datatable $dt)
  returns Chart

  setOptions(array $options)
  returns Chart

  backgroundColor(BackgroundColor $bgc)
  returns Chart

  chartArea(ChartArea $ca)
  returns Chart

  colors(array $c)
  returns Chart

  events()
  returns Chart

  fontSize(int $fs)
  returns Chart

  fontName(string $fn)
  returns Chart

  height(int $h)
  returns Chart

  legend(Legend $l)
  returns Chart

  title(string $t)
  returns Chart

  titlePosition(string $tp)
  returns Chart

  titleTextStyle(TextStyle $ts)
  returns Chart

  tooltip(Tooltip $t)
  returns Chart

  width(int $w)
  returns Chart

  getDataTableJson()
  returns JSON Object

LineChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

axisTitlesPosition(string $atp) returns Chart

curveType(string $c) returns Chart

hAxis(HorizontalAxis $ha) returns Chart

interpolateNulls(bool $in) returns Chart

lineWidth(int $lw) returns Chart

pointSize(int $ps) returns Chart

vAxis(VerticalAxis $va) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

AreaChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

areaOpacity(float $ao) returns Chart

axisTitlesPosition(string $atp) returns Chart

hAxis(HorizontalAxis $ha) returns Chart

interpolateNulls(bool $in) returns Chart

lineWidth(int $lw) returns Chart

pointSize(int $ps) returns Chart

vAxis(VerticalAxis $va) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

BarChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

annotations(Annotation $a) returns Chart

axisTitlesPosition(string $atp) returns Chart

barGroupWidth(int | string /* representing a percent */ $bgw) returns Chart

dataOpacity(float $do) returns Chart

enableInteractivity(bool $ei) returns Chart

focusTarget(string $ft) returns Chart

forceIFrame(bool $fif) returns Chart

hAxes(array /* of HorizontalAxis objects */ $va) returns Chart

hAxis(HorizontalAxis $ha) returns Chart

orientation(string $o) returns Chart

isStacked(bool $is) returns Chart

reverseCategories(bool $rc) returns Chart

series(array /* of Series objects */ $s) returns Chart

theme(string $t) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

ColumnChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

axisTitlesPosition(string $atp) returns Chart

barGroupWidth(int | string /* representing a percent */ $bgw) returns Chart

hAxis(HorizontalAxis $ha) returns Chart

isStacked(bool $is) returns Chart

pointSize(int $ps) returns Chart

vAxis(VerticalAxis $va) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

ComboChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

annotations(Annotation $a) returns Chart

areaOpacity(float $ao) returns Chart

axisTitlesPosition(string $atp) returns Chart

barGroupWidth(int | string /* representing a percent */ $bgw) returns Chart

hAxis(HorizontalAxis $ha) returns Chart

isStacked(bool $is) returns Chart

series(array /* of Series objects */ $s) returns Chart

seriesType(string $s) returns Chart

vAxes(array /* of VerticalAxis objects */ $va) returns Chart

vAxis(VerticalAxis $va) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

PieChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

is3D(bool $i) returns Chart

slices(array /* of Slice objects */ $s) returns Chart

pieSliceBorderColor(string $psbc) returns Chart

pieSliceText(string $pst) returns Chart

pieSliceTextStyle(TextStyle $psts) returns Chart

pieStartAngle(int $psa) returns Chart

reverseCategories(bool $rc) returns Chart

sliceVisibilityThreshold(int | float $svt) returns Chart

pieResidueSliceColor(string $prsc) returns Chart

pieResidueSliceLabel(string $prsl) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

DonutChart

The donut chart extends the pie chart with one extra method

All the configuration options are the same as the pie chart.

pieHole(float $ph) returns Chart

GeoChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

colorAxis(ColorAxis $ca) returns Chart

datalessRegionColor(string $drc) returns Chart

displayMode(string $dm) returns Chart

enableRegionInteractivity(bool $eri) returns Chart

keepAspectRatio(bool $kar) returns Chart

region(string $r) returns Chart

magnifyingGlass(MagnifyingGlass $mg) returns Chart

markerOpacity(float $mo) returns Chart

resolution(string $r) returns Chart

sizeAxis(SizeAxis $sa) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

CalendarChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

cellColor(Stroke $cc) returns Chart

cellSize(int $cs) returns Chart

dayOfWeekLabel(TextStyle $l) returns Chart

dayOfWeekRightSpace(int $s) returns Chart

daysOfWeek(string $dow) returns Chart

focusedCellColor(Stroke $fcc) returns Chart

monthLabel(TextStyle $ml) returns Chart

monthOutlineColor(Stroke $moc) returns Chart

underMonthSpace(int $ums) returns Chart

underYearSpace(int $uys) returns Chart

unusedMonthOutlineColor(Stroke $umoc) returns Chart

colorAxis(ColorAxis $ca) returns Chart

forceIFrame(bool $fif) returns Chart

noDataPattern(Color $c) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

GaugeChart

All of the methods return the Chart to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the chart's setOptions() method

forceIFrame(bool $fif) returns Chart

greenColor(string $gc) returns Chart

greenFrom(int $gf) returns Chart

greenTo(int $gt) returns Chart

majorTicks(array $mt) returns Chart

max(int $m) returns Chart

min(int $m) returns Chart

minorTicks(int $mt) returns Chart

redColor(string $rc) returns Chart

redFrom(int $rf) returns Chart

redTo(int $rt) returns Chart

yellowColor(string $yc) returns Chart

yellowFrom(int $yf) returns Chart

yellowTo(int $yt) returns Chart

Explanations for each configuration option can be found in Google's Config Docs

LineChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$temperatures = $lava->DataTable();

$temperatures->addDateColumn('Date')
             ->addNumberColumn('Max Temp')
             ->addNumberColumn('Mean Temp')
             ->addNumberColumn('Min Temp')
             ->addRow(array('2014-10-1', 67, 65, 62))
             ->addRow(array('2014-10-2', 68, 65, 61))
             ->addRow(array('2014-10-3', 68, 62, 55))
             ->addRow(array('2014-10-4', 72, 62, 52))
             ->addRow(array('2014-10-5', 61, 54, 47))
             ->addRow(array('2014-10-6', 70, 58, 45))
             ->addRow(array('2014-10-7', 74, 70, 65))
             ->addRow(array('2014-10-8', 75, 69, 62))
             ->addRow(array('2014-10-9', 69, 63, 56))
             ->addRow(array('2014-10-10', 64, 58, 52))
             ->addRow(array('2014-10-11', 59, 55, 50))
             ->addRow(array('2014-10-12', 65, 56, 46))
             ->addRow(array('2014-10-13', 66, 56, 46))
             ->addRow(array('2014-10-14', 75, 70, 64))
             ->addRow(array('2014-10-15', 76, 72, 68))
             ->addRow(array('2014-10-16', 71, 66, 60))
             ->addRow(array('2014-10-17', 72, 66, 60))
             ->addRow(array('2014-10-18', 63, 62, 62));

$linechart = $lava->LineChart('Temps')
                  ->dataTable($temperatures)
                  ->title('Weather in October');

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $linechart or $lava to your view to render.

View

Vanilla

<div id="temps_div"></div>
// With the chart object
<? echo $linechart->render('temps_div') ?>

// With the lava object
<? echo $lava->render('LineChart', 'Temps', 'temps_div') ?>

Laravel

<div id="temps_div"></div>
// With Lava class alias
<? echo Lava::render('LineChart', 'Temps', 'temps_div') ?>

// With Blade Templates
@linechart('Temps', 'temps_div')

Rendered Chart

Javascript Output

lava.charts.LineChart.Temps.draw = function() {
var $this = lava.charts.LineChart.Temps;

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Date"},{"type":"number","label":"Max Temp"},{"type":"number","label":"Mean Temp"},{"type":"number","label":"Min Temp"}],"rows":[{"c":[{"v":new Date(2014,9,1,0,0,0)},{"v":67},{"v":65},{"v":62}]},{"c":[{"v":new Date(2014,9,2,0,0,0)},{"v":68},{"v":65},{"v":61}]},{"c":[{"v":new Date(2014,9,3,0,0,0)},{"v":68},{"v":62},{"v":55}]},{"c":[{"v":new Date(2014,9,4,0,0,0)},{"v":72},{"v":62},{"v":52}]},{"c":[{"v":new Date(2014,9,5,0,0,0)},{"v":61},{"v":54},{"v":47}]},{"c":[{"v":new Date(2014,9,6,0,0,0)},{"v":70},{"v":58},{"v":45}]},{"c":[{"v":new Date(2014,9,7,0,0,0)},{"v":74},{"v":70},{"v":65}]},{"c":[{"v":new Date(2014,9,8,0,0,0)},{"v":75},{"v":69},{"v":62}]},{"c":[{"v":new Date(2014,9,9,0,0,0)},{"v":69},{"v":63},{"v":56}]},{"c":[{"v":new Date(2014,9,10,0,0,0)},{"v":64},{"v":58},{"v":52}]},{"c":[{"v":new Date(2014,9,11,0,0,0)},{"v":59},{"v":55},{"v":50}]},{"c":[{"v":new Date(2014,9,12,0,0,0)},{"v":65},{"v":56},{"v":46}]},{"c":[{"v":new Date(2014,9,13,0,0,0)},{"v":66},{"v":56},{"v":46}]},{"c":[{"v":new Date(2014,9,14,0,0,0)},{"v":75},{"v":70},{"v":64}]},{"c":[{"v":new Date(2014,9,15,0,0,0)},{"v":76},{"v":72},{"v":68}]},{"c":[{"v":new Date(2014,9,16,0,0,0)},{"v":71},{"v":66},{"v":60}]},{"c":[{"v":new Date(2014,9,17,0,0,0)},{"v":72},{"v":66},{"v":60}]},{"c":[{"v":new Date(2014,9,18,0,0,0)},{"v":63},{"v":62},{"v":62}]}]}, 0.6);

$this.options = {"title":"Weather in October"};

$this.chart = new google.visualization.LineChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.LineChart.Temps.draw);

AreaChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$population = $lava->DataTable();

$population->addDateColumn('Year')
           ->addNumberColumn('Number of People')
           ->addRow(array('2006', 623452))
           ->addRow(array('2007', 685034))
           ->addRow(array('2008', 716845))
           ->addRow(array('2009', 757254))
           ->addRow(array('2010', 778034))
           ->addRow(array('2011', 792353))
           ->addRow(array('2012', 839657))
           ->addRow(array('2013', 842367))
           ->addRow(array('2014', 873490));

$areachart = $lava->AreaChart('Population')
                  ->setOptions(array(
                    'datatable' => $population,
                    'title' => 'Population Growth',
                    'legend' => $lava->Legend(array(
                      'position' => 'in'
                    ))
                  ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $areachart or $lava to your view to render.

View

Vanilla

<div id="pop_div"></div>
// With the chart object
<? echo $areachart->render('pop_div') ?>

// With the lava object
<? echo $lava->render('AreaChart', 'Population', 'pop_div') ?>

Laravel

<div id="pop_div"></div>
// With Lava class alias
<? echo Lava::render('AreaChart', 'Population', 'pop_div') ?>

// With Blade Templates
@areachart('Population', 'pop_div')

Rendered Chart

Javascript Output

lava.charts.AreaChart = {"Population":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.AreaChart.Population.draw = function() {
var $this = lava.charts.AreaChart.Population;

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Year","id":"date"},{"type":"number","label":"Number of People","id":"pop"}],"rows":[{"c":[{"v":new Date(2014,11,19,20,6,0)},{"v":623452}]},{"c":[{"v":new Date(2014,11,19,20,7,0)},{"v":685034}]},{"c":[{"v":new Date(2014,11,19,20,8,0)},{"v":716845}]},{"c":[{"v":new Date(2014,11,19,20,9,0)},{"v":757254}]},{"c":[{"v":new Date(2014,11,19,20,10,0)},{"v":778034}]},{"c":[{"v":new Date(2014,11,19,20,11,0)},{"v":792353}]},{"c":[{"v":new Date(2014,11,19,20,12,0)},{"v":839657}]},{"c":[{"v":new Date(2014,11,19,20,13,0)},{"v":842367}]},{"c":[{"v":new Date(2014,11,19,20,14,0)},{"v":873490}]}]}, 0.6);

$this.options = {"title":"Population Growth","legend":{"position":"in"}};

$this.chart = new google.visualization.AreaChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.AreaChart.Population.draw);

BarChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$votes  = $lava->DataTable();

$votes->addStringColumn('Food Poll')
      ->addNumberColumn('Votes')
      ->addRow(array('Tacos', rand(1000,5000)))
      ->addRow(array('Salad', rand(1000,5000)))
      ->addRow(array('Pizza', rand(1000,5000)))
      ->addRow(array('Apples', rand(1000,5000)))
      ->addRow(array('Fish', rand(1000,5000)));

$lava->BarChart('Votes')
     ->setOptions(array(
         'datatable' => $votes
     ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $barchart or $lava to your view to render.

View

Vanilla

<div id="poll_div"></div>
// With the chart object
<? echo $barchart->render('poll_div') ?>

// With the lava object
<? echo $lava->render('BarChart', 'Food Poll', 'poll_div') ?>

Laravel

<div id="poll_div"></div>
// With Lava class alias
<? echo Lava::render('BarChart', 'Food Poll', 'poll_div') ?>

// With Blade Templates
@barchart('Food Poll', 'poll_div')

Rendered Chart

Javascript Output

lava.charts.BarChart["Votes"] = {chart:null,draw:null,data:null,options:null,formats:[]};

if (!document.getElementById("chart")){console.error("[Lavacharts] No matching element was found with ID \"chart\"");}

lava.charts.BarChart["Votes"].draw = function() {
var $this = lava.charts.BarChart["Votes"];

$this.data = new google.visualization.DataTable({"cols":[{"type":"string","label":"Food"},{"type":"number","label":"Votes"}],"rows":[{"c":[{"v":"Tacos"},{"v":1448}]},{"c":[{"v":"Salad"},{"v":2690}]},{"c":[{"v":"Pizza"},{"v":3353}]},{"c":[{"v":"Apples"},{"v":4465}]},{"c":[{"v":"Fish"},{"v":3231}]}]}, 0.6);

$this.options = [];

$this.chart = new google.visualization.BarChart(document.getElementById("chart"));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.BarChart["Votes"].draw);

ColumnChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$finances = $lava->DataTable();

$finances->addDateColumn('Year')
         ->addNumberColumn('Sales')
         ->addNumberColumn('Expenses')
         ->setDateTimeFormat('Y')
         ->addRow(array('2004', 1000, 400))
         ->addRow(array('2005', 1170, 460))
         ->addRow(array('2006', 660, 1120))
         ->addRow(array('2007', 1030, 54));

$columnchart = $lava->ColumnChart('Finances')
                    ->setOptions(array(
                      'datatable' => $finances,
                      'title' => 'Company Performance',
                      'titleTextStyle' => $lava->TextStyle(array(
                        'color' => '#eb6b2c',
                        'fontSize' => 14
                      ))
                    ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $columnchart or $lava to your view to render.

View

Vanilla

<div id="perf_div"></div>
// With the chart object
<? echo $columnchart->render('perf_div') ?>

// With the lava object
<? echo $lava->render('ColumnChart', 'Finances', 'perf_div') ?>

Laravel

<div id="perf_div"></div>
// With Lava class alias
<? echo Lava::render('ColumnChart', 'Finances', 'perf_div') ?>

// With Blade Templates
@columnchart('Finances', 'perf_div')

Rendered Chart

Javascript Output

lava.charts.AreaChart = {"Population":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.AreaChart.Population.draw = function() {
var $this = lava.charts.AreaChart.Population;

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Year","id":"date"},{"type":"number","label":"Number of People","id":"pop"}],"rows":[{"c":[{"v":new Date(2014,11,19,20,6,0)},{"v":623452}]},{"c":[{"v":new Date(2014,11,19,20,7,0)},{"v":685034}]},{"c":[{"v":new Date(2014,11,19,20,8,0)},{"v":716845}]},{"c":[{"v":new Date(2014,11,19,20,9,0)},{"v":757254}]},{"c":[{"v":new Date(2014,11,19,20,10,0)},{"v":778034}]},{"c":[{"v":new Date(2014,11,19,20,11,0)},{"v":792353}]},{"c":[{"v":new Date(2014,11,19,20,12,0)},{"v":839657}]},{"c":[{"v":new Date(2014,11,19,20,13,0)},{"v":842367}]},{"c":[{"v":new Date(2014,11,19,20,14,0)},{"v":873490}]}]}, 0.6);

$this.options = {"title":"Population Growth","legend":{"position":"in"}};

$this.chart = new google.visualization.AreaChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.AreaChart.Population.draw);

ComboChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$finances = $lava->DataTable();

$finances->addDateColumn('Year')
         ->addNumberColumn('Sales')
         ->addNumberColumn('Expenses')
         ->addNumberColumn('Net Worth')
         ->addRow(array('2009-1-1', 1100, 490, 1324))
         ->addRow(array('2010-1-1', 1000, 400, 1524))
         ->addRow(array('2011-1-1', 1400, 450, 1351))
         ->addRow(array('2012-1-1', 1250, 600, 1243))
         ->addRow(array('2013-1-1', 1100, 550, 1462));

$combochart = $lava->ComboChart('Finances')
                   ->setOptions(array(
                     'datatable' => $finances,
                     'title' => 'Company Performance',
                     'titleTextStyle' => $lava->TextStyle(array(
                       'color' => 'rgb(123, 65, 89)',
                       'fontSize' => 16
                     )),
                     'legend' => $lava->Legend(array(
                       'position' => 'in'
                     )),
                     'seriesType' => 'bars',
                     'series' => array(
                       2 => $lava->Series(array(
                         'type' => 'line'
                       ))
                     )
                   ));
// Note: In the series config, '2' correlates to the 3rd horizontal axis dataset.
// The DateColumn is the VerticalAxis, so 'Net Worth' is the 3rd, key 2, in the series.

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $combochart or $lava to your view to render.

View

Vanilla

<div id="finances-div"></div>
// With the chart object
<? echo $combochart->render('finances-div') ?>

// With the lava object
<? echo $lava->render('ComboChart', 'Finances', 'finances-div') ?>

Laravel

<div id="finances-div"></div>
// With Lava class alias
<? echo Lava::render('ComboChart', 'Finances', 'finances-div') ?>

// With Blade Templates
@combochart('Finances', 'finances-div')

Rendered Chart

Javascript Output

lava.charts.ColumnChart = {"Finances":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.ColumnChart.Finances.draw = function() {
var $this = lava.charts.ColumnChart.Finances;

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Year"},{"type":"number","label":"Sales"},{"type":"number","label":"Expenses"}],"rows":[{"c":[{"v":new Date(2004,11,19,22,34,51)},{"v":1000},{"v":400}]},{"c":[{"v":new Date(2005,11,19,22,34,51)},{"v":1170},{"v":460}]},{"c":[{"v":new Date(2006,11,19,22,34,51)},{"v":660},{"v":1120}]},{"c":[{"v":new Date(2007,11,19,22,34,51)},{"v":1030},{"v":54}]}]}, 0.6);

$this.options = {"title":"Company Performance","titleTextStyle":{"color":"#eb6b2c","fontSize":14}};

$this.chart = new google.visualization.ColumnChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.ColumnChart.Finances.draw);

PieChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$reasons = $lava->DataTable();

$reasons->addStringColumn('Reasons')
        ->addNumberColumn('Percent')
        ->addRow(array('Check Reviews', 5))
        ->addRow(array('Watch Trailers', 2))
        ->addRow(array('See Actors Other Work', 4))
        ->addRow(array('Settle Argument', 89));

$piechart = $lava->PieChart('IMDB')
                 ->setOptions(array(
                   'datatable' => $reasons,
                   'title' => 'Reasons I visit IMDB',
                   'is3D' => true,
                     'slices' => array(
                        $lava->Slice(array(
                          'offset' => 0.2
                        )),
                        $lava->Slice(array(
                          'offset' => 0.25
                        )),
                        $lava->Slice(array(
                          'offset' => 0.3
                        ))
                      )
                  ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $piechart or $lava to your view to render.

View

Vanilla

<div id="chart-div"></div>
// With the chart object
<? echo $piechart->render('chart-div') ?>

// With the lava object
<? echo $lava->render('PieChart', 'IMDB', 'chart-div') ?>

Laravel

<div id="chart-div"></div>
// With Lava class alias
<? echo Lava::render('PieChart', 'IMDB', 'chart-div') ?>

// With Blade Templates
@piechart('IMDB', 'chart-div')

Rendered Chart

Javascript Output

lava.charts.PieChart = {"IMDB":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.PieChart.IMDB.draw = function() {
var $this = lava.charts.PieChart.IMDB;

$this.data = new google.visualization.DataTable({"cols":[{"type":"string","label":"Reasons"},{"type":"number","label":"Percent"}],"rows":[{"c":[{"v":"Check Reviews"},{"v":5}]},{"c":[{"v":"Watch Trailers"},{"v":2}]},{"c":[{"v":"See Actors Other Work"},{"v":4}]},{"c":[{"v":"Settle Argument"},{"v":89}]}]}, 0.6);

$this.options = {"title":"Reasons I visit IMDB","is3D":true,"slices":[{"offset":0.2},{"offset":0.25},{"offset":0.3}]};

$this.chart = new google.visualization.PieChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.PieChart.IMDB.draw);

DonutChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$reasons = $lava->DataTable();

$reasons->addStringColumn('Reasons')
        ->addNumberColumn('Percent')
        ->addRow(array('Check Reviews', 5))
        ->addRow(array('Watch Trailers', 2))
        ->addRow(array('See Actors Other Work', 4))
        ->addRow(array('Settle Argument', 89));

$donutchart = $lava->DonutChart('IMDB')
                   ->setOptions(array(
                     'datatable' => $reasons,
                     'title' => 'Reasons I visit IMDB'
                   ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $donutchart or $lava to your view to render.

View

Vanilla

<div id="chart-div"></div>
// With the chart object
<? echo $donutchart->render('IMDB', 'chart-div') ?>

// With the lava object
<? echo $lava->render('DonutChart', 'IMDB', 'chart-div') ?>

Laravel

<div id="chart-div"></div>
// With Lava class alias
<? echo Lava::render('DonutChart', 'IMDB', 'chart-div') ?>

// With Blade Templates
@donutchart('IMDB', 'chart-div')

Rendered Chart

Javascript Output

lava.charts.DonutChart = {"IMDB":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.DonutChart.IMDB.draw = function() {
var $this = lava.charts.DonutChart.IMDB;

$this.data = new google.visualization.DataTable({"cols":[{"type":"string","label":"Reasons"},{"type":"number","label":"Percent"}],"rows":[{"c":[{"v":"Check Reviews"},{"v":5}]},{"c":[{"v":"Watch Trailers"},{"v":2}]},{"c":[{"v":"See Actors Other Work"},{"v":4}]},{"c":[{"v":"Settle Argument"},{"v":89}]}]}, 0.6);

$this.options = {"pieHole":0.5,"title":"Reasons I visit IMDB"};

$this.chart = new google.visualization.PieChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(lava.charts.DonutChart.IMDB.draw);

GeoChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$popularity = $lava->DataTable();

$popularity->addStringColumn('Country')
           ->addNumberColumn('Popularity')
           ->addRow(array('Germany', 200))
           ->addRow(array('United States', 300))
           ->addRow(array('Brazil', 400))
           ->addRow(array('Canada', 500))
           ->addRow(array('France', 600))
           ->addRow(array('RU', 700));

$geochart = $lava->GeoChart('Popularity')
                 ->setOptions(array(
                   'datatable' => $popularity
                 ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $geochart or $lava to your view to render.

View

Vanilla

<div id="pop-div"></div>
// With the chart object
<? echo $geochart->render('pop-div') ?>

// With the lava object
<? echo $lava->render('GeoChart', 'Popularity', 'pop-div') ?>

Laravel

<div id="pop-div"></div>
// With Lava class alias
<? echo Lava::render('GeoChart', 'Popularity', 'pop-div') ?>

// With Blade Templates
@geochart('Popularity', 'pop-div')

Rendered Chart

Javascript Output

lava.charts.GeoChart = {"Popularity":{chart:null,draw:null,data:null,options:null,formats:[]}};

if (!document.getElementById('chart')){console.error('[Lavaharts] No matching element was found with ID "chart"');}

lava.charts.GeoChart.Popularity.draw = function() {
var $this = lava.charts.GeoChart.Popularity;

$this.data = new google.visualization.DataTable({"cols":[{"type":"string","label":"Country"},{"type":"number","label":"Popularity"}],"rows":[{"c":[{"v":"Germany"},{"v":200}]},{"c":[{"v":"United States"},{"v":300}]},{"c":[{"v":"Brazil"},{"v":400}]},{"c":[{"v":"Canada"},{"v":500}]},{"c":[{"v":"France"},{"v":600}]},{"c":[{"v":"RU"},{"v":700}]}]}, 0.6);

$this.options = [];

$this.chart = new google.visualization.GeoChart(document.getElementById('chart'));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['geochart']});
google.setOnLoadCallback(lava.charts.GeoChart.Popularity.draw);

CalendarChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$sales = $lava->DataTable();

$sales->addDateColumn('Date')
      ->addNumberColumn('Orders');

foreach (range(2, 5) as $month) {
    for ($a=0; $a < 20; $a++) {
        $day = rand(1, 30);
        $sales->addRow(array("2014-${month}-${day}", rand(0,100)));
    }
}

$calendarchart = $lava->CalendarChart('Sales')
                      ->setOptions(array(
                          'datatable' => $sales,
                          'title' => 'Cars Sold',
                          'unusedMonthOutlineColor' => $lava->Stroke(array(
                              'stroke'        => '#ECECEC',
                              'strokeOpacity' => 0.75,
                              'strokeWidth'   => 1
                          )),
                          'dayOfWeekLabel' => $lava->TextStyle(array(
                              'color' => '#4f5b0d',
                              'fontSize' => 16,
                              'italic' => true
                          )),
                          'noDataPattern' => $lava->Color(array(
                              'color' => '#DDD',
                              'backgroundColor' => '#11FFFF'
                          )),
                          'colorAxis' => $lava->ColorAxis(array(
                              'values' => array(0, 100),
                              'colors' => array('black', 'green')
                          ))
                      ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $calendarchart or $lava to your view to render.

View

Vanilla

<div id="sales_div"></div>
// With the chart object
<? echo $calendarchart->render('sales_div') ?>

// With the lava object
<? echo $lava->render('CalendarChart', 'Sales', 'sales_div') ?>

Laravel

<div id="sales_div"></div>
// With Lava class alias
<? echo Lava::render('CalendarChart', 'Sales', 'sales_div') ?>

// With Blade Templates
@calendarchart('Sales', 'sales_div')

Rendered Chart

Javascript Output

lava.charts.CalendarChart["Sales"] = {chart:null,draw:null,data:null,options:null,formats:[]};

if (!document.getElementById("chart")){console.error("[Lavacharts] No matching element was found with ID \"chart\"");}

lava.charts.CalendarChart["Sales"].draw = function() {
var $this = lava.charts.CalendarChart["Sales"];

$this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Date"},{"type":"number","label":"Orders"}],"rows":[{"c":[{"v":new Date(2014,1,28,0,0,0)},{"v":33}]},{"c":[{"v":new Date(2014,1,11,0,0,0)},{"v":27}]},{"c":[{"v":new Date(2014,1,7,0,0,0)},{"v":96}]},{"c":[{"v":new Date(2014,1,18,0,0,0)},{"v":96}]},{"c":[{"v":new Date(2014,1,14,0,0,0)},{"v":76}]},{"c":[{"v":new Date(2014,1,21,0,0,0)},{"v":25}]},{"c":[{"v":new Date(2014,1,24,0,0,0)},{"v":57}]},{"c":[{"v":new Date(2014,1,13,0,0,0)},{"v":79}]},{"c":[{"v":new Date(2014,1,17,0,0,0)},{"v":20}]},
/* Some data omitted for brevity */
{"c":[{"v":new Date(2014,1,20,0,0,0)},{"v":17}]},{"c":[{"v":new Date(2014,1,5,0,0,0)},{"v":59}]},{"c":[{"v":new Date(2014,1,11,0,0,0)},{"v":83}]},{"c":[{"v":new Date(2014,1,26,0,0,0)},{"v":6}]},{"c":[{"v":new Date(2014,1,7,0,0,0)},{"v":37}]},{"c":[{"v":new Date(2014,1,23,0,0,0)},{"v":4}]},{"c":[{"v":new Date(2014,2,1,0,0,0)},{"v":69}]},{"c":[{"v":new Date(2014,4,3,0,0,0)},{"v":67}]},{"c":[{"v":new Date(2014,4,21,0,0,0)},{"v":53}]},{"c":[{"v":new Date(2014,4,28,0,0,0)},{"v":9}]},{"c":[{"v":new Date(2014,4,10,0,0,0)},{"v":21}]},{"c":[{"v":new Date(2014,4,9,0,0,0)},{"v":24}]},{"c":[{"v":new Date(2014,4,27,0,0,0)},{"v":55}]},{"c":[{"v":new Date(2014,4,15,0,0,0)},{"v":44}]},{"c":[{"v":new Date(2014,4,9,0,0,0)},{"v":78}]}]}, 0.6);

$this.options = {"calendar":{"unusedMonthOutlineColor":{"stroke":"#ECECEC","strokeOpacity":0.75,"strokeWidth":1},"dayOfWeekLabel":{"color":"#4f5b0d","fontSize":16,"italic":true}},"title":"Cars Sold","noDataPattern":{"color":"#DDD","backgroundColor":"#11FFFF"},"colorAxis":{"values":[0,100],"colors":["black","green"]}};

$this.chart = new google.visualization.Calendar(document.getElementById("chart"));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1.1', {'packages':['calendar']});
google.setOnLoadCallback(lava.charts.CalendarChart["Sales"].draw);

GaugeChart Example

Controller

use Khill\Lavacharts\Lavacharts;

$lava = new Lavacharts; // See note below for Laravel

$temps = $lava->DataTable();

$temps->addStringColumn('Type')
      ->addNumberColumn('Value')
      ->addRow(array('CPU', rand(0,100)))
      ->addRow(array('Case', rand(0,100)))
      ->addRow(array('Graphics', rand(0,100)));

$lava->GaugeChart('Temps')
     ->setOptions(array(
         'datatable' => $temps,
         'width' => 400,
         'greenFrom' => 0,
         'greenTo' => 69,
         'yellowFrom' => 70,
         'yellowTo' => 89,
         'redFrom' => 90,
         'redTo' => 100,
         'majorTicks' => array(
             'Safe',
             'Critical'
         )
     ));

For Laravel, omit "$lava = new Lavacharts" and replace "$lava->" with "Lava::"

Otherwise, pass $gaugechart or $lava to your view to render.

View

Vanilla

<div id="temps_div"></div>
// With the chart object
<? echo $gaugechart->render('temps_div') ?>

// With the lava object
<? echo $lava->render('GaugeChart', 'Temps', 'temps_div') ?>

Laravel

<div id="temps_div"></div>
// With Lava class alias
<? echo Lava::render('GaugeChart', 'Temps', 'temps_div') ?>

// With Blade Templates
@gaugechart('Temps', 'temps_div')

Rendered Chart

Javascript Output

lava.charts.GaugeChart["Temps"] = {chart:null,draw:null,data:null,options:null,formats:[]};

if (!document.getElementById("chart")){console.error("[Lavacharts] No matching element was found with ID \"chart\"");}

lava.charts.GaugeChart["Temps"].draw = function() {
var $this = lava.charts.GaugeChart["Temps"];

$this.data = new google.visualization.DataTable({"cols":[{"type":"string","label":"Type"},{"type":"number","label":"Value"}],"rows":[{"c":[{"v":"CPU"},{"v":65}]},{"c":[{"v":"Case"},{"v":86}]},{"c":[{"v":"Graphics"},{"v":11}]}]}, 0.6);

$this.options = {"width":400,"greenFrom":0,"greenTo":69,"yellowFrom":70,"yellowTo":89,"redFrom":90,"redTo":100,"majorTicks":["Safe","Critical"]};

$this.chart = new google.visualization.Gauge(document.getElementById("chart"));

$this.chart.draw($this.data, $this.options);
};

google.load('visualization', '1', {'packages':['gauge']});
google.setOnLoadCallback(lava.charts.GaugeChart["Temps"].draw);

Configuration Options

How To Use

All of the config methods return themselves to enable the chaining of options.

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Config's constructor

Constructor

$lava->TextStyle([
    'color' => '#F4C6B2',
    'fontName' => 'Arial',
    'fontSize' => 16
]);

Chaining

$lava->TextStyle()
     ->color('#F4C6B2')
     ->fontName('Arial')
     ->fontSize(16);

Laravel

Lava::TextStyle([
    'color' => '#F4C6B2',
    'fontName' => 'Arial',
    'fontSize' => 16
]);

Annotation

All of the methods return the Annotation object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Annotation's constructor

highContrast(bool $hc) returns Annotation

textStyle(TextStyle $ts) returns Annotation

BackgroundColor

All of the methods return the BackgroundColor object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the BackgroundColor's constructor

stroke(string $s) returns BackgroundColor

strokeWidth(int $sw) returns BackgroundColor

fill(string $f) returns BackgroundColor

BoxStyle

All of the methods return the BoxStyle object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the BoxStyle's constructor

stroke(string $s) returns BoxStyle

strokeWidth(int $sw) returns BoxStyle

rx(int $rx) returns BoxStyle

ry(int $ry) returns BoxStyle

gradient(Gradient $g) returns BoxStyle

ChartArea

All of the methods return the ChartArea object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the ChartArea's constructor

left(int $l) returns ChartArea

top(int $t) returns ChartArea

width(int $w) returns ChartArea

height(int $h) returns ChartArea

Color

All of the methods return the Color object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Color's constructor

color(string $c) returns Color

backgroundColor(string $bc) returns Color

ColorAxis

All of the methods return the ColorAxis object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the ColorAxis's constructor

minValue(int $mv) returns ColorAxis

maxValue(int $mv) returns ColorAxis

values(array $v) returns ColorAxis

colors(array $c) returns ColorAxis

Gradient

All of the methods return the Gradient object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Gradient's constructor

color1(string $c1) returns Gradient

color2(string $c2) returns Gradient

x1(string /* representing a percent */ $rx) returns Gradient

y1(string /* representing a percent */ $rx) returns Gradient

x2(string /* representing a percent */ $rx) returns Gradient

y2(string /* representing a percent */ $rx) returns Gradient

HorizontalAxisAll of the methods return the HorizontalAxis object to enable the chaining of configuration options
Alternatively, you can build an associative array, using the method names as keys, and pass the array into the HorizontalAxis's constructor

  allowContainerBoundaryTextCutoff(bool $acbtc)
  returns HorizontalAxis

  baselineColor(string $blc)
  returns VerticalAxis

  direction(int $d)
  returns HorizontalAxis

  format(string $f)
  returns HorizontalAxis

  gridlines(array $g)
  returns HorizontalAxis

  minorGridlines(array $mg)
  returns HorizontalAxis

  logScale(bool $ls)
  returns HorizontalAxis

  textPosition(string $tp)
  returns HorizontalAxis

  title(string $t)
  returns HorizontalAxis

  titleTextStyle(TextStyle $tts)
  returns HorizontalAxis

  maxAlternation(int $ma)
  returns HorizontalAxis

  maxTextLines(int $mtl)
  returns HorizontalAxis

  maxValue(int $mv)
  returns HorizontalAxis

  minValue(int $mv)
  returns HorizontalAxis

  showTextEvery(int $ste)
  returns HorizontalAxis

  slantedText(bool $st)
  returns HorizontalAxis

  slantedTextAngle(int $sta)
  returns HorizontalAxis

  viewWindowMode(string $vwm)
  returns HorizontalAxis

  viewWindow(array $vw)
  returns HorizontalAxis

Legend

All of the methods return the Legend object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Legend's constructor

position(string $p) returns Legend

alignment(string $a) returns Legend

textStyle(TextStyle $ts) returns Legend

MagnifyingGlass

The MagnifyingGlass object is created by passing an int to the constructor to set the ZoomFactor

The default zoomFactor is 5, and can also be set with the named method.

zoomFactor(int $zf) returns MagnifyingGlass

Series

All of the methods return the Series object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Series's constructor

annotation(Annotation $a) returns Series

curveType(string $ct) returns Series

seriesTargetAxis(string $sta) returns Series

textStyle(TextStyle $ts) returns Series

type(string $t) returns Series

SizeAxis

All of the methods return the SizeAxis object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the SizeAxis's constructor

maxSize(int $ms) returns SizeAxis

maxValue(int $mv) returns SizeAxis

minSize(int $ms) returns SizeAxis

minValue(int $mv) returns SizeAxis

Slice

All of the methods return the Slice object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Slice's constructor

color(string $c) returns Slice

offset(string $o) returns Slice

textStyle(TextStyle $ts) returns Slice

Stroke

All of the methods return the Stroke object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the Stroke's constructor

stroke(string $s) returns Stroke

strokeOpacity(float $so) returns Stroke

strokeWidth(int $sw) returns Stroke

TextStyle

All of the methods return the TextStyle object to enable the chaining of configuration options

Alternatively, you can build an associative array, using the method names as keys, and pass the array into the TextStyle's constructor

color(string $c) returns TextStyle

fontName(string $fn) returns TextStyle

fontSize(string $fs) returns TextStyle

VerticalAxisAll of the methods return the VerticalAxis object to enable the chaining of configuration options
Alternatively, you can build an associative array, using the method names as keys, and pass the array into the VerticalAxis's constructor

  baselineColor(string $blc)
  returns VerticalAxis

  direction(int $d)
  returns VerticalAxis

  format(string $f)
  returns VerticalAxis

  gridlines(array $g)
  returns VerticalAxis

  minorGridlines(array $mg)
  returns VerticalAxis

  logScale(bool $ls)
  returns VerticalAxis

  textPosition(string $tp)
  returns VerticalAxis

  title(string $t)
  returns VerticalAxis

  titleTextStyle(TextStyle $tts)
  returns VerticalAxis

  maxValue(int $mv)
  returns VerticalAxis

  minValue(int $mv)
  returns VerticalAxis

  viewWindowMode(string $vwm)
  returns VerticalAxis

  viewWindow(array $vw)
  returns VerticalAxis

Chart Events

Enable interaction with your charts through events

Adding an event your chart is as simple as defining a javascript function in your page, then attaching the Lava event object to the chart.

Pass the event's constructor the function name, and when the chart event is fired, the function will be called.

As with any chart customization, you can use the named method, events(), and pass in an array of events.

Or you can add the key 'events' to a config array with and pass an array of events there.

Ready

$ready = $lava->Ready('readyCallback');  // Lava::Ready() if using Laravel

More information can be found on Google's Website

MouseOut

$mouseOut = $lava->MouseOut('mouseOutCallback');  // Lava::MouseOut() if using Laravel

MouseOver

$mouseOver = $lava->MouseOver('mouseOverCallback');  // Lava::MouseOver() if using Laravel

Select

$select = $lava->Select('selectCallback');  // Lava::Select() if using Laravel

More information can be found on Google's Website

Javascript

Event Callbacks

To use events with your charts, follow these two easy steps:

Define a javascript function within your page, before the rendering of any charts. In the example below, the function is called "selectHandler"
While configuring your chart in PHP, pass the event object the name of your javascript function, as seen in the above examples.

When the chart is rendered, your defined function will be wrapped with lava.event() which gives your function access to the event and chart objects.

function selectHandler (event, chart) {
  // Useful for using chart methods such as chart.getSelection();
  console.log(chart.getSelection());
}

Helper Functions

The get function takes a chart label (the label you used when creating the chart) and returns the chart object.

lava.get(chartLabel, callback)

lava.get('myFancyChart', function (chart) {
    console.log(chart);
});

This will let you access the chart and its methods outside of a chart event.

lava.loadData(chartLabel, dataTableJson, callback)

lava.loadData('myFancyChart', {dataTableJsonObject}, function (chart) {
    console.log(chart);
});

This will allow you to update charts via ajax, loading data using a datatable's toJson() method.

Ajax Data Loading

Here is an example of how to reload charts with ajax, using jQuery.

Server Side

$temps = $lava->DataTable('America/Los_Angeles');

$temps->addDateColumn('Date')
      ->addNumberColumn('Max Temp')
      ->addNumberColumn('Mean Temp')
      ->addNumberColumn('Min Temp');

foreach(range(1, 30) as $day) {
    $temps->addRow(array(
        '2014-10-'.$day,
        rand(50,90),
        rand(50,90),
        rand(50,90)
    ));
}

return $temps->toJson();

Page Script

$.getJSON('http://my.cool.site.com/api/whatever/getDataTableJson', function (dataTableJson) {
  lava.loadData('Chart1', dataTableJson, function (chart) {
    console.log(chart);
  });
});

Charts and Graphs for PHPPowered by the Google Chart API

Introduction

Installation

With Composer

Laravel

Manual (Non Composer)

Quickstart

DataTables

Creating a Chart

Output

Lavacharts

Methods

DataTables

Columns

Rows

Formats

Utility Methods

Charts

Parent Chart

LineChart

AreaChart

BarChart

ColumnChart

ComboChart

PieChart

DonutChart

GeoChart

CalendarChart

GaugeChart

LineChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

AreaChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

BarChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

ColumnChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

ComboChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

PieChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

DonutChart Example

Controller

View

Vanilla

Laravel

Rendered Chart

Javascript Output

GeoChart Example

Controller

Charts and Graphs for PHP
Powered by the Google Chart API