PHPackages mvnrsa/livewire-live-google-charts - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. mvnrsa/livewire-live-google-charts ActiveLibrary mvnrsa/livewire-live-google-charts ================================== Live Google Charts for Laravel Livewire 3 (Auto refresh/poll) v0.9.9(2y ago)17716—0%3MITPHP Since Apr 11Pushed 2y ago1 watchersCompare [ Source](https://github.com/mvnrsa/livewire-live-google-charts)[ Packagist](https://packagist.org/packages/mvnrsa/livewire-live-google-charts)[ RSS](/packages/mvnrsa-livewire-live-google-charts/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (4)DependenciesVersions (7)Used By (0) Live Charts for Laravel Livewire 3 ================================== [](#live-charts-for-laravel-livewire-3) This package now supports both the **Google** and **ChartJS** charting libraries, even both on the same page. Live? ----- [](#live) **Live** as in the charts will **auto refresh** at a specified poll interval using the **Livewire wire:poll** attribute. Note that the component is only drawn the first time and thereafter only the data is updated on every poll, so the data transferred for polling is significantly less and the chart is just **updated**, not recreated every time. ### Coffee? ☕ [](#coffee-) One of my favorite escapes from coding and business is taking my wife for a **coffee**. (Which is pretty cheap in sunny South Africa). If you use this package please think about how much time and effort you have saved and **[buy us a coffee](https://www.buymeacoffee.com/mvnrsa)**. ☕ Requirements ------------ [](#requirements) - Laravel 9+ - Livewire 3+ Installation ------------ [](#installation) ``` composer require mvnrsa/livewire-live-google-charts ``` Configuration ------------- [](#configuration) A number of defaults can be set if you publish the config file: ``` php artisan vendor:publish --tag=livecharts ``` The values in the config file should be pretty self-explanotory. Obtaining the Data ------------------ [](#obtaining-the-data) The package uses a cached query builder (or any external data source) to fetch the data. Actually only the query, bindings and connection is cached because we can not cache the builder class(es) between requests. You have to start by prepairing a builder that will fetch your data every time the data needs to be refreshed. ### Something like this: [](#something-like-this) ``` $builder = Model::select('column',DB::raw("count(*) as cnt")) ->groupBy('column') ->orderBy('column'); ``` ### This builder will give you nice random data for testing: [](#this-builder-will-give-you-nice-random-data-for-testing) ``` $builder = Model::select( 'column', DB::raw('FLOOR(1+rand()*10) AS `cnt 1`'), DB::raw('FLOOR(1+rand()*10) AS `cnt 2`'), // DB::raw('FLOOR(1+rand()*10) AS `cnt 3`'), // etc. ) ->groupBy('column') ->orderBy('column'); ``` ### External Data Sources: [](#external-data-sources) To use an external data source, such as a third party API, just extend one of the chart components and add a `getExternalData()` method to your component. See [EXTERNAL](EXTERNAL.md) for more details. Configure the Chart ------------------- [](#configure-the-chart) ``` $chartOptions = [ 'library'=>'chartjs', 'title'=>'Chart Title', 'builder'=>$builder, 'poll'=>2, 'width'=>500, height=>250, /* ... */ ]; ``` - `library` selects which charting library to use - google/chartjs - `title` should be obvious - leave empty for no title inside the chart - `builder` is the builder instance (without `->get()`!) - `poll` is the poll interval in seconds - **0 means no polling/refresh** it will just draw the chart once - `width` and `height` can be anything that HTML will understand - px, %, em, etc. - `colors` provide a color pallette as an array of colors - `is3D` (true/false) make some charts 3D - `pieHole` (0.0 to 1.0) controls the relative size of the pie hole for donut charts - `jsTypes` is an array of series types for mixed series ChartJS charts Most of the options have sensible defaults from the config file and can be left out. Blade ----- [](#blade) ``` @livewire('livecharts-pie-chart', $chartOptions) ``` Available charts ---------------- [](#available-charts) - Pie - Donut - Bar - Column - Line - Area - Multi/Mixed Bar, Line, Area (ChartJS only) - Candlestick (Google only) Just replace pie in the blade example above with donut, bar, column, etc. Note that for a candlestick chart the builder should return 5 columns. Colors ------ [](#colors) You can specify the color pallete for the chart by adding a `colors` array to the options. Any color that will work in HTML will work eg: ``` $colors = [ 'red,'#00ff00','#0000ff','pink','cyan' ]; $chartOptions = [ 'title'=>'Chart Title', 'builder'=>$builder, 'poll'=>2, 'colors'=>$colors ]; ``` Mixed/Multi chart types ----------------------- [](#mixedmulti-chart-types) For a ChartJS chart with mixed bar/line/area data series just add a `jsTypes` array with the types. ``` $chartOptions = [ ... 'jsTypes' => [ 'bar', 'line', 'area' ] ]; ``` Other Library Options --------------------- [](#other-library-options) Any other options can be passed to the chart library by simply adding an `options` array to the chart options: ``` $chartOptions = [ .... 'options'=> [ /* other options here */ ] ]; ``` ### Author [](#author) [Marnus van Niekerk](https://github.com/mvnrsa) - [mvnrsa](https://github.com/mvnrsa) - ### Credit to Helvetitec [](#credit-to-helvetitec) This package was originally an extension of the excellent [Helvetitec/lagoon-charts](https://github.com/Helvetitec/lagoon-charts)Google charts package by [Helvetitec](https://github.com/Helvetitec). Except these ones are "live" :-) ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community9 Small or concentrated contributor base Maturity35 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 6 Last Release 758d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7608c7ee2e454ed881207b21ccc818f5144aa35b91d19e391e03091b80f86944?d=identicon)[mvnrsa](/maintainers/mvnrsa) --- Top Contributors [![mvnrsa](https://avatars.githubusercontent.com/u/31034801?v=4)](https://github.com/mvnrsa "mvnrsa (1 commits)") ### Embed Badge ![Health badge](/badges/mvnrsa-livewire-live-google-charts/health.svg) ``` [![Health](https://phpackages.com/badges/mvnrsa-livewire-live-google-charts/health.svg)](https://phpackages.com/packages/mvnrsa-livewire-live-google-charts) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)