Charts

Codacy BadgeStyleCILicenseTotal DownloadsLatest Stable Version

Server-side data builder for Chart.js, with 2 Bulma styled, VueJS components for the frontend.

Watch the demo

click on the photo to view a short demo in compatible browsers

Features

  • it supports Bar, Bubble, Line, Pie, Doughnut, Polar Area and Radar chart types
  • it creates properly formatted data structures, specific for each supported type of chart from a given data-set
  • the used colors are configurable through the publishable config file
  • comes with a Chart.vue VueJS component meant to be included anywhere
  • comes with a ChartCard.vue VueJS component meant to be used as card containing the chart
  • can translate labels, legends and data series
  • can download the graphical representation of the graph, as a PNG file

Installation

  1. Publish the config with php artisan vendor:publish --tag=charts-config

  2. Include ChartCard.vue in your page/component:

import ChartCard from '../../components/enso/charts/ChartCard.vue';
  1. Run npm run webpack

  2. In your controller add a method that will return the data for you chart:

public function line()
{
    return (new LineChart())
        ->title('Income')
        ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
        ->datasets([
            'Sales' => [65, 59, 80, 81, 26, 25, 10],
            'Revenue' => [15, 29, 60, 31, 56, 65, 44],
        ])->fill()
        ->get();
}
  1. Use the VueJS component(s) in your views:
<chart :type="pie"
    :data="chartData"
    :options="chartOptions"/>        

Or for the server-side wrapper

<chart-card :source="api/charts/line"/>

Configuration

The package's configuration file offers a few options for customization:

  • fillBackgroundOpacity - number, the chart background's opacity, default is 0.25
  • colors - array, the list of colors used when drawing the various chart types

Options

The Chart.vue component can be used anywhere by integrating it into any other component or page, and takes the following parameters:

  • type - 'line', 'bar', 'radar', 'polarArea', 'pie', 'doughnut', 'bubble' | (required)
  • data - object containing the properly formatted data for the given chart type | (required)
  • options - ChartJs options object | (optional)

The ChartCard.vue component is a chart in a Bulma card, and is meant to be used to retrieve its own data, and take the following parameters:

  • source - the route path that will fetch the data | (required)
  • params - parameters object that gets passed to the backend, may be used for customization of the data-set | (optional)
  • i18n - function, parameter for translating labels, legends and data | (optional) By default, if used within Enso, it will attempt to use the __() translation function. If the translation function is not available, it will just return the text to be translated as is.

Methods

The following methods are available on the components

  • Chart.vue
    • init()
    • update()
  • ChartCard.vue
    • get(), to reload the data from server
    • download(), to download the chart representation as a PNG file

Call these methods with vm.$refs.chart.method()

Publishes

  • php artisan vendor:publish --tag=charts-config - the configuration file
  • php artisan vendor:publish --tag=charts-assets - the VueJS components
  • php artisan vendor:publish --tag=enso-assets - a common alias for when wanting to update the VueJS components, once a newer version is released, usually used with the --force flag
  • php artisan vendor:publish --tag=enso-config - a common alias for when wanting to update the config, once a newer version is released, usually used with the --force flag

Notes

The Chart builder will use the colors from app/config/enso/charts.php (in that order) for the given data-sets.

The Laravel Enso Core package comes with this package included.

Last Updated: 11/12/2018, 4:35:32 PM