This package offers simple and easy integration of google charts with laravel .
-Fast and simple . Also you can provide Google chart options to documneted on google Chart API by creating a multidiemsional PHP array.
- Multiple Chart of same and different types can be loaded on same page.
Credit: Thanks to google chart API
Chats introduced:
- Bar Chart
- Bubble Chart
- Candlestick Chart
- Combo Chart
- Piechart Chart
- Scatter Chart
- Stepped Area Chart
- Tree Map Chart
- Word Tree Chart
Via Composer
$ composer require scopdrag/laravel-google-chartUse this command to publish charts views.
$ php artisan vendor:publishRegistering provider
Add following line to you config/app.php providers array
Scopdrag\LaravelGoogleChart\LaravelGoogleChartServiceProvider::class,
Use this code in your controller file and pass cols, rows and options to view
Add Google chart loader script file in tag of you webpage
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
$options = [
'title' => 'Population of Largest U.S. Cities',
'chartArea' => ['width' => '50%'],
'hAxis' => [
'title' => 'Total Population',
'minValue' => 0
],
'vAxis' => [
'title' => 'City'
],
'bars' => 'horizontal', //required if using material chart
'axes' => [
'y' => [0 => ['side' => 'right']]
]
];
$cols = ['City', '2010 Population', '2000 PopulaÎtions'];
$rows = [
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
];Use this in your Views/balade File
{!!ChartManager::setChartType('bar-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
Use this code on your views/blade file
$options = [
'title' => 'Population of Largest U.S. Cities',
'chartArea' => ['width' => '50%'],
'hAxis' => [
'title' => 'Total Population',
'minValue' => 0
],
'vAxis' => [
'title' => 'City'
],
'bars' => 'horizontal', //required if using material chart
'axes' => [
'y' => [0 => ['side' => 'right']]
]
];
$cols = ['City', '2010 Population', '2000 PopulaÎtions'];
$rows = [
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
];
echo ChartManager::setChartType('bar-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render();
$options = [
'title' => 'Population of Largest U.S. Cities',
'chartArea' => ['width' => '50%'],
'hAxis' => [
'title' => 'Total Population',
'minValue' => 0
],
'vAxis' => [
'title' => 'City'
],
'bars' => 'horizontal', //required if using material chart
'axes' => [
'y' => [0 => ['side' => 'right']]
]
];
$cols = ['City', '2010 Population', '2000 PopulaÎtions'];
$rows = [
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
];blade.php file code
{!!ChartManager::setChartType('bar-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$options = [
'title' => 'Population of Largest U.S. Cities',
'chartArea' => ['width' => '50%'],
'hAxis' => [
'title' => 'Total Population',
'minValue' => 0
],
'vAxis' => [
'title' => 'City'
],
'bars' => 'horizontal', //required if using material chart
'axes' => [
'y' => [0 => ['side' => 'right']]
]
];
$cols = ['City', '2010 Population', '2000 PopulaÎtions', ['role' => 'style']];
$rows = [
['New York City, NY', 8175000, 8008000, '#b87333'],
['Los Angeles, CA', 3792000, 3694000, 'silver'],
['Chicago, IL', 2695000, 2896000, 'gold'],
['Houston, TX', 2099000, 1953000, 'color: #e5e4e2'],
['Philadelphia, PA', 1526000, 1517000, 'color: #e5e4e2']
];.blade.php file code
{!!ChartManager::setChartType('bar-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$options = [
'width' => 800,
'height' => 400,
'legend' => ['position' => 'top', 'maxLines' => 3],
'bars' => ['groupWidth' => '75%'],
'isStacked' => TRUE
];
$cols = ['Date', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', ['role' => 'annotation']];
$rows = [
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
];.blade.php code
{!!ChartManager::setChartType('bar-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
##Bubble Chart
$cols = ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'];
$rows = [
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2.00, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
];
$options = [
'title' => 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
'hAxis' => [
'title' => 'Life Expectancy',
],
'vAxis' => [
'title' => 'Fertility Rate'
],
'bubble' => 'horizontal', //required if using material chart
'bubble' => [
'textStyle' => ['fontSize' => 11]
]
];.blade.php file code
{!!ChartManager::setChartType('bubble-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$rows = [
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
];
$options = [
'legend' => 'none'
];
$cols =[];.blade.php file code
{!!ChartManager::setChartType('candlestick-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$rows = [
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
];
$options = [
'legend' => 'none',
'bar' => [
'groupWidth' => '100%', // Draw a trendline for data series 0.
],
'candlestick' => [
'fallingColor' => ['strokeWidth' => 0, 'fill' => '#a52714'],
'risingColor' => ['strokeWidth' => 0, 'fill' => '#0f9d58'],
]
];
$cols=[];.blade.php code
{!!ChartManager::setChartType('candlestick-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'];
$rows = [
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
];
$options = [
'title' => 'Monthly Coffee Production by Country',
'hAxis' => [
'title' => 'Cups',
],
'vAxis' => [
'title' => 'Month'
],
'seriesType' => 'bars', //required if using material chart
'series' => [
'5' => ['type' => 'line']
]
];.blade.php file code
{!!ChartManager::setChartType('combo-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Major', 'Degrees'];
$rows = [
['Business', 256070], ['Education', 108034],
['Social Sciences & History', 127101], ['Health', 81863],
['Psychology', 74194]
];
$options = [
'pieSliceText' => 'none',
];
$cols =[];.blade.php file code
{!!ChartManager::setChartType('piechart-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Major', 'Degrees'];
$rows = [
['Business', 256070], ['Education', 108034],
['Social Sciences & History', 127101], ['Health', 81863],
['Psychology', 74194]
];
$options = [
'pieSliceText' => 'none',
'title' => 'My Daily Activities',
'is3D' => true,
];.blade.php file code
{!!ChartManager::setChartType('piechart-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Age', 'Weight'];
$rows = [
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
];
$options = [
'title' => 'Age vs. Weight comparison',
'hAxis' => [
'title' => 'Age',
'minValue' => 0,
'maxValue' => 15
],
'vAxis' => [
'title' => 'Weight',
'minValue' => 0,
'maxValue' => 15
],
'legend' => 'none',
];.blade.php file code
{!!ChartManager::setChartType('scatter-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Director (Year)', 'Rotten Tomatoes', 'IMDB'];
$rows = [
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
];
$options = [
'title' => 'The decline of \'The 39 Steps\'',
'hAxis' => [
'title' => 'Accumulated Rating',
],
'isStacked' => 'true',
];.blade.php file code
{!!ChartManager::setChartType('steppedarea-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'];
$rows = [
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
];
$options = [
'minColor' => '#f00',
'midColor' => '#ddd',
'maxColor' => '#0d0',
'headerHeight' => 15,
'fontColor' => 'black',
'showScale' => TRUE
];.blade.php
{!!ChartManager::setChartType('treemap-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Diameter', 'Age'];
$rows = [
[8, 37],
[4, 19.5],
[11, 52],
[4, 22],
[3, 16.5],
[6.5, 32.8], [
14, 72]
];
$options = [
'title' => 'Age of sugar maples vs. trunk diameter, in inches',
'hAxis' => [
'title' => 'Diameter',
],
'vAxis' => [
'title' => 'Age',
],
'legend' => 'none',
'trendlines' => [
0 => [], // Draw a trendline for data series 0.
],
];.blade.php file code
{!!ChartManager::setChartType('scatter-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
$cols = ['Phrases'];
$rows = [
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
];
$options = [
'wordtree' => ['format' => 'implicit', 'word' => 'cats']
];.blade.php file code
{!!ChartManager::setChartType('wordtree-chart')
->setOptions($options)
->setCols($cols)
->setRows($rows)
->render()!!}
Arguements for 'setChartType()' can be following depending upon requirements.
- 'bar-chart'
- 'bubble-chart'
- 'candlestick-chart'
- 'combo-chart'
- 'piechart-chart'
- 'scatter-chart'
- 'steppedarea-chart'
- 'treemap-chart'
- 'wordtree-chart'
Please see CHANGELOG for more information what has changed recently.
$ ./vendor/bin/phpunit- Thanks to Google Chart API
The MIT License (MIT). Please see License File for more information.