Download the PHP package mukadi/chartjs-builder without Composer
On this page you can find all versions of the php package mukadi/chartjs-builder. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mukadi/chartjs-builder
More information about mukadi/chartjs-builder
Files in mukadi/chartjs-builder
Package chartjs-builder
Short Description generate beautiful charts directly from SQL query in PHP
License MIT
Informations about the package chartjs-builder
Mukadi Chart Builder
Generate beautiful and fully customised charts directly from SQL query. The mukadi/chartjs-builder
library use Chart.js for displaying charts and PDO for querying data in your database.
1. Installation
Run php composer.phar require mukadi/chartjs-builder
If your are not using composer for managing your dependencies (you should !), you can just downlaod library from the repo and include the library autoloader file in your code and all package classes will be available:
2. The Factory
The Mukadi\Chart\Factory\ChartFactory
is the main package class used for create chart from SQL query. This class require a valid PDO connection as constructor parameter:
2.1. Chart Types
Once the Factory
object instanciated, you can start building your chart. First thing to do is to specify the type of the chart you want, supported types are :
- Bar
- Pie
- Polar area
- Line
- Doughnut and
- Radar
- Scatter
- Bubble
2.2. Query
Once the Factory
object instanciated, your can set the query from which you want your chart being generated
2.3. Labels
After the query configuration, you can set chart labels (displayed in the x axis):
Note: Bubble and Scatter chart doesn't support labels, the method as no effect on this charts and throw no error
2.4. Datasets
Scatter and Bubble charts has a different behavior, here is how to build this kind of chart:
Setup datasets by specifying: the column where fetching data, a text that will be used as label for the dataset and optionally an array of options (see the chart.js documentation for available options). For the chart labels just set the column where querying data or directly put an array of string.
2.5. Dataset helpers
helper | description |
---|---|
useRandomBackgroundColor(bool $alpha = true) | use a different random background color (if is alpha is true a RGBA color will be used) for each dataset value |
useRandomBorderColor(bool $alpha = true) | use a different random border color (if is alpha is true a RGBA color will be used) for each dataset value |
useRandomHoverBackgroundColor(bool $alpha = true) | use a different random hover background color (if is alpha is true a RGBA color will be used) for each dataset value |
useRandomHoverBackgroundColor(bool $alpha = true) | use a different random hover background color (if is alpha is true a RGBA color will be used) for each dataset value |
useRandomHoverBorderColor(bool $alpha = true) | use a different random hover border color (if is alpha is true a RGBA color will be used) for each dataset value |
2.6. Build and render chart
Last but not least, you have to build and render the chart in your view. For build your chart give an Id and set the chart type, optionally you can set some options (see the chart.js documentation for available options):
For render the chart in your page juste make an echo:
Don't forget to include libraries in your page:
And that's all !
3. Advanced Topics
3.1. Use parametrized query
3.2. Charts Definition
When building charts we can quickly end up with many lines of code that pollute our controller/page (especially if it is a dashboard for example). The Charts definition is an elegant way to build your charts in separate classes, so you get a more readable code and also reusable charts (a very powerful feature when combining with parametrized query).
Every Charts definition must implements the Mukadi\Chart\ChartDefinitionInterface
interface (of course ! :-D )
In your controller/page you only have to write this:
You can set query parameters and charts options directly in chart definition:
So in your controller/page just build your chart:
3.3. Custom Definition Provider
Internally, the Mukadi\Chart\Factory\ChartFactory
class use a Mukadi\Chart\DefinitionProviderInterface
implementation to retrieve a chart definition by it's FCQN (fully qualified class name), but this implementation is very simple and work only with no-args constructor Chart definition class. So if you defintion class has some dependencies we must build it by yourself and provide the instance to the factory.
There are some case where it's complex to build a definition instance by yourself or when you delegate this task to an external component such a DI container for example. In this case you may want the factory relying on the same component to build the chart definition for you.
First, Implement the Mukadi\Chart\DefinitionProviderInterface
interface :
And secondly override the default one:
You may also want to include the all factory in your DI strategy, to do so just implement you own factory by implementing the Mukadi\Chart\ChartFactoryInterface
or by extending the Mukadi\Chart\Factory\AbstractChartFactory
, you can refer to the MukadiChartJsBundle which is an integration of the current library for the Symfony Framework.