scopdrag/laravel-google-chart

This package offers simple and easy integration of google charts with laravel

laravel-google-chart

This package offers simple and easy integration of google charts with laravel .

Features:

-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

Install

Via Composer

$ composer require scopdrag/laravel-google-chart

Use this command to publish charts views.

$ php artisan vendor:publish

Registering provider

Add following line to you config/app.php providers array

Scopdrag\LaravelGoogleChart\LaravelGoogleChartServiceProvider::class,

Usage

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()!!}

OR You can directly use in view file

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();

Bar chart

                 
                
                $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()!!}
                 

Coloring bar chart

                $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()!!}

Stacked Bar Chart

                $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()!!}

Candlestick charts

                $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()!!}

Waterfall charts

                $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()!!}

Combo Chart

                $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()!!}

Pie Chart

                $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()!!}

3D Pie Chart

                $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()!!}

ScatterChart

                $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()!!}

Stepped Chart

                $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()!!}

Tree Map Charts

                $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()!!}

Scatter Chart

                $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()!!}

Word tree charts

                $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'

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

$ ./vendor/bin/phpunit

Credits

• Thanks to Google Chart API

License

The MIT License (MIT). Please see License File for more information.

laravel-google-chart

laravel-google-chart's Issues

How to add Column Chart in this API

I tried to add new chart - Column chart
also create blade file for that
below is my blade file code
but its generate Bar chart instead of Column chart

@include('LaravelGoogleChart::includes.package_loader')

<script type="text/javascript"> google.charts.setOnLoadCallback(function() { var data = google.visualization.arrayToDataTable({!!json_encode($data)!!}); var options = {!! json_encode($options) !!}; var material = new google.visualization.ColumnChart(document.getElementById('chart_{!! $id !!}')); material.draw(data, options); }); </script>

Please help to how to add more google chart in this API,

Thanks,
Kaushik

Outdated dependencies

Detailed description

I used this package with a Laravel 5.8 application but now I want to upgrade to a newer version. Unfortunately the current version of laravel-google-chart is not updated since longer time and therefor gives an error on the dependency of the illuminate/support package.
I assume more people will encounter this issue. Are there any plans to upgrade the depencies?

Context

My current implementation is a bit old, so I want to improve. I will not be the only one I assume

Possible implementation

Perhaps it could be wise to validate all dependencies

Your environment

My technical target context is Laravel 7 with php 7.3

Get the following error ErrorException in FileViewFinder.php line 137: when implementing one of the examples below

So I copied the candlestick example into my laravel project

Detailed description

this function is in my controller
public function show($id) {

    $stock = Stock::find($id);

    if(!$stock) {
        Session::flash('message', 'The stock you requested could not be found.');
        return redirect('/');
    }

    $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 =[];

    return view('stocks.show')->with([
        'stock' => $stock,
        'rows' => $rows,
        'options' => $options,
        'cols' => $cols,
    ]);
}

This is part of my view

    <h1>{{ $stock->ticker }}</h1>

    <a href='/stocks/{{ $stock->id }}'><img class='logo' src='{{ $stock->logo }}' alt='Logo for {{ $stock->ticker }}'></a>

    <p>Company Website: {{ $stock->website }}</p>

    <p>Added on: {{ $stock->created_at }}</p>

    <p>Last updated: {{ $stock->updated_at }}</p>

    {{!! ChartManager::setChartType('candlestick-chart')
                    ->setOptions($options)
                    ->setCols($cols)
                    ->setRows($rows)
                    ->render() !!}}


    <a class='stockAction' href='/stocks/edit/{{ $stock->id }}'><i class='fa fa-pencil'></i></a>
    <a class='stockAction' href='/stocks/{{ $stock->id }}/delete'><i class='fa fa-trash'></i></a>

</div>

Provide a detailed description of the change or addition you are proposing.

Make it clear if the issue is a bug, an enhancement or just a question.

Context

The context is that this package doesn't seem to work after its installed.
I following the install directions and yet get this error.

Why is this change important to you? How would you use it?

How can it benefit other users?

Possible implementation

Not obligatory, but suggest an idea for implementing addition or change.

Your environment

Include as many relevant details about the environment you experienced the bug in and how to reproduce it.

• Version used (e.g. PHP 5.6, HHVM 3):
• Operating system and version (e.g. Ubuntu 16.04, Windows 7):
• Link to your project:
• ...
• ...

How to add Controller in Chart????

Hello

Please help me how to add different types of controller in chart???

Thanks,
Kaushik