Download the PHP package asantibanez/livewire-charts without Composer

On this page you can find all versions of the php package asantibanez/livewire-charts. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package livewire-charts

GitHub release

Livewire Charts

Preview

preview

Demo

https://github.com/asantibanez/livewire-charts-demo

Installation

You can install the package via composer:

Next, you must export the package public scripts. To do this run

This command will export a vendor/livewire-charts folder under the public directory of your app which is used by the @livewireChartsScripts directive. More on this topic later.

Requirements

This package requires the following packages/libraries to work:

Please follow each package/library instructions on how to set them properly in your project.

Note: At the moment, Apex Charts is only supported for drawing charts.

Usage

Livewire Charts supports out of the box the following types of charts

Each one comes with its own "model" class that allows you to define the chart's data and render behavior.

For example, to render a column chart, we can create an instance of ColumnChartModel and add some data to it

Note: Chart model methods are chainable 💪

With $columnChartModel at hand, we pass it to our LivewireColumnChart component in our Blade template.

Note: Optionally add "key" to enable props reactivity if needed 💪

Next, include the @livewireChartsScripts directive next to your other app scripts

And that's it! You have a beautiful rendered chart in seconds. 👌

column chart example

Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you are good to go. 👍

LivewireCharts facade

Chart models can also be created using the LivewireCharts facade.

Enabling Interactions

To enable click events, you must use the with[XXX]ClickEvent($eventName) method present in every model class and define a custom $eventName that will be fired with the corresponding data when a column/marker/slice is clicked.

Here we define an onColumnClick event that will be fired when a column is clicked in our chart.

We can listen to the onClickEvent registering a listener in any other Livewire component.

"Reactive" Charts

You can use livewire-charts components as nested components in you Livewire components. Once rendered, charts will not automatically react to changes in the $model passed in. This is just how Livewire works.

However, to enable "reactivity" when data passed in changes, you can define a special $key to your components so they are fully re-rendered each time the chart data changes.

Each model class comes with a reactiveKey() method that returns a string based on its data. If any of the properties are changed, this key will update accordingly and re-render the chart again.

In the following example, a parent component houses both column chart and pie chart and defines a $model for each one. The parent component renders the charts as follows

When the parent component changes their respective models, charts will automatically re-render itself.

reactive charts example

Charts API

For each chart, a specific model class needs to be used. Here, it is detailed the api available for each type of chart.

All

Method Description
setTitle(string $title) Sets chart title
setAnimated(boolean $animated) Enables/disables animation
setDataLabelsEnabled(boolean $enabled) Enables/disables data labels
withDataLabels() Enables data labels
withoutDataLabels() Disables data labels
withLegend() Shows legends
withoutLegend() Hides legends
setColors(array $colors) Set colors for chart
addColors(string $color) Append $color to $colors set
setXAxisCategories(array $categories) Enables custom categories for chart X Axis
sparklined() Enables Apex Charts sparkline feature
setSparklineEnabled(boolean $isEnabled) Enables/Disables Apex Charts sparkline feature
setJsonConfig(array $config) Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation

LivewireLineChart

Method Description
multiLine() Adds multiline support for line chart
singleLine() Adds single support for line chart
addPoint(string $title, double $value, array $extras = []) Adds a point to a single line chart. $extras is forwarded on click event
addSeriesPoint(string $seriesName, string $title, double $value, array $extras = []) Adds a point to series to a multi line chart. $extras is forwarded on click event
addMarker(string $title, double $value) Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only)
withOnPointClickEvent(string $eventName) Event Name that will be fired when a point/marker of the chart is clicked

LivewireColumnChart

Method Description
setOpacity(int $opacity) Sets columns' opacity
setColumnWidth(int $columnWidth) Sets columns' width
setHorizontal() Displays columns horizontally
setVertical() Displays columns vertically
multiColumn() Sets chart to display multiple column series
singleColumn() Sets chart to display a single column series
stacked() Sets chart to display column series stacked
addColumn(string $title, double $value, string $color, array $extras = []) Adds a column to the chart with the specified color. $extras is forwarded on click event
addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) Adds a column to a multicolumn chart. $extras is forwarded on click event
withOnColumnClickEventName(string $eventName) Event Name that will be fired when a column of the chart is clicked

LivewirePieChart

Method Description
setOpacity(int $opacity) Sets slices' opacity
asPie() Displays chart as pie
asDonut() Displays chart as donut
addSlice(string $title, double $value, string $color, array $extras = []) Adds a slice to the chart with the specified color. $extras is forwarded on click event
withOnSliceClickEvent(string $eventName) Event Name that will be fired when a column of the chart is clicked

LivewireAreaChart

Method Description
addPoint(string $title, double $value, array $extras = []) Adds a point to the area chart. $extras is forwarded on click event
withOnPointClickEvent(string $eventName) Event Name that will be fired when a point of the chart is clicked
setXAxisVisible(boolean $visible) Shows/hides xAxis labels
setYAxisVisible(boolean $visible) Shows/hides yAxis labels

LivewireRadarChart

Method Description
addSeries(string $seriesName, string $title, double $value, array $extras = [])
withOnPointClickEvent(string $eventName) Event Name that will be fired when a point of the chart is clicked

LivewireTreeMapChart

Method Description
addBlock(string $title, double $value, array $extras = []) Adds a block to the default series
addSeriesBlock(string $seriesName, string $title, double $value, array $extras = []) Adds a block to the specified series
withOnBlockClickEvent(string $eventName) Event Name that will be fired when a block of the chart is clicked
setDistributed(bool $distributed) Set whether the chart uses distribution or not

LivewireRadialChart

Method Description
addBar(string $title, double $value, string $color = null, array $extras = []) Adds a bar to the default series
withOnBarClickEvent(string $eventName) Event Name that will be fired when a bar of the chart is clicked
showTotal() Show the total percetage to the graph
hideTotal() Hides the total percetage to the graph

Advanced Usage - Integrating Scripts

The directive @livewireChartsScripts adds a script tag that includes public/vendor/livewire-charts/app.js. If you want to include this script in your build system, you can export the package scripts with php artisan vendor:publish and selecting livewire-charts:scripts. This will export js/vendor/livewire-charts inside your resources folder. You can then adjust imports as you see fit in your project.

Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system.

Advanced Usage - Custom Json Configs

The setJsonConfig() method on every chart allows adding custom Apex properties not provided first hand by the package. This means that any chart property supported by Apex chart can be passed down using this method.

Note: If you want to add nested properties, you can use dot (.) notation for this matter.

You can even pass down simple JS functions. For example, for formatting you can pass down your own closure

Troubleshooting

Chart components must be placed inside a container with fixed height. This is because the chart will use all the given vertical space. A fixed height is needed to render properly.

Note: if a fixed height is not given, the chart will grow vertically infinitely. That's not what we want, right?

Testing

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

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


All versions of livewire-charts with dependencies

PHP Build Version
Package Version
Requires php Version ^7.2|^7.3|^7.4|^8.0
illuminate/support Version ^7.0|^8.0|^9.0|^10.0|^11.0
livewire/livewire Version ^3.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package asantibanez/livewire-charts contains the following files

Loading the files please wait ....