Download the PHP package bernskioldmedia/laravel-highcharts without Composer
On this page you can find all versions of the php package bernskioldmedia/laravel-highcharts. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download bernskioldmedia/laravel-highcharts
More information about bernskioldmedia/laravel-highcharts
Files in bernskioldmedia/laravel-highcharts
Package laravel-highcharts
Short Description A Laravel and Livewire wrapper for Highcharts.
License MIT
Homepage https://github.com/bernskioldmedia/laravel-highcharts
FAQ
Example:
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 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.
Informations about the package laravel-highcharts
A Laravel and Livewire implementation of Highcharts.
Prerequisites
- Laravel 10 or higher
- PHP 8.2 or higher
- Highcharts, available on
window.Highcharts. - Livewire 2 or higher
Installation
You can install the package via composer:
After installing the package you need to import the Alpine JS component which
is used to display the chart. You can do this by adding the following to your
resources/app.js file:
If you are using Livewire 3, you need
to manually bundle AlpineJS per
the Livewire documentation. Your resources/app.js file should then look like this:
Publishing config and views
You can publish the config file with:
This is the contents of the published config file:
Optionally, you can publish the views using
Usage
Building a chart
The package provides a series of convenience classes that provide fluent methods for adding data and customizing basic Highcharts options. These are not meant to be a complete implementation of the Highcharts API, but rather a convenient way to build charts in your Laravel application.
The following example shows how to build a simple bar chart:
As we don't intend to add fluent methods for all Highcharts options, you can use set and setMany methods to add any
options you need. The option nesting and keys are the same as in the Highcharts API. The key supports dot notation for
nesting.
For example, to disable animations, you can do:
Rendering a chart in your Livewire component
This package supports one chart per Livewire component. To render a chart there are three steps involved:
- Building the chart with the data, from the
Data\Chartclass (see below) - Implementing the
InteractsWithCharttrait in your Livewire component. - Rendering the Blade component in your Livewire component's view.
Your Livewire component should look something like this:
The Blade part of your Livewire component should look something like this:
Note: The chart-key attribute is required and must match the key you used when building the chart.
Drawing on the chart with "Chart Extras"
The package provides a way to draw on the chart using "Chart Extras". These are classes that create a fluent interface to the data required to draw common non-data elements on the chart: Quadrants, lines and labels.
Drawing a quadrant
The following example draws a black quadrant on the chart from the origin to the point (10, 10):
Drawing a line
The following example draws a black line on the chart from the origin to the point (100, 100):
Adding a label
The following example adds a black, centered, label to the chart at the point (75, 75):
Exporting a chart
Each chart will listen to the export-chart event on the window object. By triggering this with the appropriate
details, any chart can be exported either from JavaScript or from Livewire.
The detail object must contain the chartId and type keys. The chartId must match the key you used when building
the chart. The type must be a valid type for the Highcharts exportChartLocal method.
The exportSettings can take an object with settings for the export per the Highcharts exportChartLocal method.
The options take an object with chart options to customize the chart before exporting.
The following example shows how to export a chart from JavaScript:
Using Livewire, you can either use the dispatch method, or use the bundled ExportsChart trait.
If you are using the ExportsChart trait, you can also customize the export settings and options by adding the
the getChartExportSettings and ? getChartOptionsForExport methods to your Livewire component. To ensure their signature,
we suggest implementing the bundled CustomizesChartExportOptions and CustomizesChartExportSettings interfaces.
If you are using the trait on the same component as the InteractsWithChart trait you don't have to provide the chart key, and can use the minimal syntax:
Testing
Changelog
Please see CHANGELOG for more information on what has changed recently.
Credits
- Bernskiold Media
- Erik Bernskiold
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
