Download the PHP package radiatecode/dachartjs without Composer

The package used to generate charts in Laravel without implementing javascript in the front-side. It is used as a back-end service of chart js. It will dynamically render HTML & JS configuration.

Examples

Example 1: Monthly Project, Task and Issue Completion Chart

Chart Class

In controller:

In view (blade) file:

Example 2: API or AJAX Chart

The chart shows top sales products according to the month selection.

Chart Class

In controller:

In blade file:

When "search-btn" is triggered it will get value from input element of month, attach the value with the given url as query string and send request to server to fetch data.

Api Route:

Api Response:

Requirements

• PHP >= 7.0
• Laravel 5.2-5.8|6.x|7.x|8.x

• Chart Js

  Installation

  You can install the package via composer:

  composer require radiatecode/dachartjs

Register Service Provider (Optional on Laravel 5.5+)

Register provider on your config/app.php file.

Usages

In two ways you can generate chart such as

• Generate by dedicated class.

• Or, Generate by service

  Generate chart by dedicated class

  Run the command to create a chart class

  php artisan make:dachartjs MonthlyCompletionChart

This will create a dedicated chart class under App\Charts namespace.

Sample Code:

Note: HorizontalBarChart::class has some predefined default options. So if you want to change the default options then override changeDefaultOptions().

Or, if you want to provide custom options instead of default options then override options().

Note: If you want to define chart size override chartSize()

In controller:

After all the configuration you can use the dedicated class in the controller

Dedicated chart class object provides two methods

• render(): Render method will return array of chart configurations. The configuration later can be manually used in javascript
• template(): Template method return a html builder instance

In view (blade) file:

Generate chart by service

Available Methods of Chart service class:

1. build()

Create chart service instance in a static way.

It could be helpful if we want to avoid creating chart instance like new Chart()

2. labels()

labeling the data index of the chart. it could be x-axis or y-axis, by default it is x-axis.

labels axis change by indexAxis property which used in the options configuration

3. datasets()

Datasets can be build by Dataset Facades

Or datasets can be configured as raw array

4. changeDefaultOption() [Optional]

Each type of chart class has some predefined default options. For example see the defaultOptions() methods of MultiAxisLineChart

So, in some scenario you may need to update the values of default options. In that case you can use changeDefaultOption('optionKey','value')

Note: dot used in key arg is to indicate the nested array level of the options. The method only works when the options are in php array format

5. options() [Optional]

If you don't want to use default options then use your custom options

You can pass php array format options

Or, you can pass json string format options

To know more about the options properties see chart js official documentation.

6. size() [Optional]

Chart size

Width is optional for responsive chart

6. render()

Render method will return array of chart configurations. The configuration later can be manually used in javascript

Check the sample code here

7. template()

If you don't want to setup javascript manually in view file then use template() instead of render(). Template method return a html builder instance

Methods of html builder

1. chartHtml() : Generate html canvas tag

2. chartLibraries() : Generate the chart js CDN scripts

3. chartScripts() : Generate chart with back-end configuration and data

Check the sample code here

4. apiChartScripts($ajaxOptions, string $clickEventId = null, array $inputElementIds = []) : Generate chart with back-end configuration. It loads chart data & labels via ajax. It also allows update or refresh the chart via firing click event.

For api response you have to use ChartResponse Facade

load chart data by ajax: If you just want to load chart data by ajax then only pass value to 1st argument of apiChartScripts

1st argument accept string (url) or array of ajax options [url, type, headers]

Check the sample Code here

Update chart data by ajax: If you want to update the chart based on some input values then you have to pass a trigger ID in the 2nd argument and input IDs in the 3rd argument of apiChartScripts. Check the sample Code here

Chart Types

There are various predefined types of chart (configured) available such as

Bar chart

• Horizontal Bar Chart
• Stacked Bar Chart
• Vertical Bar Chart

  Line chart

• Interpolation Line Chart
• Line Chart
• Multi Axis Line Chart
• Stepped Line Chart

  Bubble chart

  Pie chart

  Doughnut chart

  Polar Area Chart

  Radar Chart

  Scatter Chart

You can create your own custom type by extending BaseChartType. Namespace could be App\Charts\Types (create Charts\Types folder inside the app folder)

Dataset Facade

Dataset Facade can be helpful to generate datasets for chart, each dataset has various properties such as label, background color, border color, data, fill, boarder width etc. Above examples or sample code shows that how to generate datasets by using Dataset Facade

Methods

See the available methods of Dataset Facade

Dedicated Dataset Class (Suggestion)

If you create a chart with multiple datasets which depends on multiple db query then it would be nicer to create a separate dataset class in order to increase the readability, maintainability of the code

Namespace could be App\Charts\Datasets (create Charts\Datasets folder inside the app folder)

Check the sample code here

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

• Noor Alam
• All Contributors

License

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