Download the PHP package elemind/filament-echarts without Composer

Filament Apache ECharts

Strongly inspired by Leandro Ferreira’s Apex Charts plugin, this plugin delivers Apache ECharts integration for Filament.

Installation

You can install the package via composer:

Register the plugin for the Filament Panels you want to use:

Usage

Start by creating a widget with the command:

Available chart samples

You may choose:

• Line
• Bar
• Pie
• Scatter
• Candlestick
• Radar
• Boxplot
• Sunburst
• Parallel
• Sankey
• Funnel
• Gauge

Setting a widget title

You may set a widget title:

Optionally, you can use the getHeading() method.

Setting a widget subheading

You may set a widget subheading:

Optionally, you can use the getSubheading() method.

Setting a chart id

You may set a chart id:

Making a widget collapsible

You may set a widget to be collapsible:

You can also use the isCollapsible() method:

Setting a widget height

By default, the widget height is set to 300px. You may set a custom height:

Optionally, you can use the getContentHeight() method.

Setting a widget footer

You may set a widget footer:

You can also use the getFooter() method:

Custom view:

Html string:

Hiding header content

You can hide header content by NOT providing these

• $heading
• getHeading()
• $subheading
• getSubheading()
• getOptions()

Filtering chart data

You can set up chart filters to change the data shown on chart. Commonly, this is used to change the time period that chart data is rendered for.

Filter schema

You may use components from the Schemas to create custom filters. You need to use HasFiltersSchema trait and implement the filtersSchema() method to define the filter form schema:

The data from the custom filter is available in the $this->filters array. You can use the active filter values within your getOptions() method:

Single select

To set a default filter value, set the $filter property:

Then, define the getFilters() method to return an array of values and labels for your filter:

You can use the active filter value within your getOptions() method:

Live updating (polling)

By default, chart widgets refresh their data every 5 seconds.

To customize this, you may override the $pollingInterval property on the class to a new interval:

Alternatively, you may disable polling altogether:

Defer loading

This can be helpful when you have slow queries and you don't want to hold up the entire page load:

Loading indicator

You can change the loading indicator:

You can also use the getLoadingIndicator() method:

Dark mode

The dark mode is supported and enabled by default.

Extra options and Formatters

You can use the extraJsOptions method to add additional options to the chart:

Publishing views

Optionally, you can publish the views using:

Publishing translations

Optionally, you can publish the translations using:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• elemind
• All Contributors

License

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