A bundle to visualize data with google charts api
With this bundle you can visualize data with google charts api
- display data using google charts api
- optional: adds a reader config element to heimrichhannot/contao-reader-bundle
- optional: adds a configuration for google maps reader config element to display a elevation chart
To display a chart at first you need to create a chart config.
Define here which type of chart you want to use and customize attributes of the chart.
You need to select a dataType as well. Currently there is
reference to choose from.
If you select
reference as dataType you need to set the dataContainer and the dataField which holds the referenced data.
You can also set a specific entity to get the data from. This is optional. If you do not set an entity it is set when you use the chart as a reader config element.
Otherwise you could set it by an event listener. If the entity is never set, you will get an error.
If you are done creating the chart config there are several ways to display the chart.
The simplest way to display the chart is to create a module that uses the chart configuration to show the chart in frontend.
You can use the chart as reader config element in heimrichhannot/contao-reader-bundle.
If you have set the dataType to
reference in the chart configuration the entity will be set automatically by the current item id.
When data is added to the chart it has to be of type array.
Enter valid json that contains pairs of x-/y-values. Please do not enter the labels for the axis in this json but rather use the input fields labelX and labelY.
[ ['value-x', 'value-y'], ['value-x', 'value-y'], ['value-x', 'value-y'] ... ]
To use data that is provided by a certain entity you can use the reference dataType. In the chart config set the dataContainer and dataField which holds the data. Optional you can set the specific entity from which you want to retrieve the data. If you use the chart config for a reader config element the entity will be set automatically when the config element of the item is generated.
IMPORTANT: When you want to add data to the chart keep in mind that this data HAS TO BE AN ARRAY. You can modify the data in two different ways.
You can add a custom dataType which will be selectable in chart config.
Here data is configured and added to the dataType by the
For example for dataType
reference the data is pulled here from the referenced entity
which is selected by the values (dataContainer, dataField, dataEntity) you've set in the chart configuration.
DataTypes are added as services. Add the '_instanceof' part to your service.yml and add your dataType class like in this example.
services: _instanceof: HeimrichHannot\GoogleChartsBundle\DataType\DataTypeInterface: tags: ['huh.google_charts.data_type'] # DataTypes HeimrichHannot\GoogleChartsBundle\DataType\Concrete\DataTypeJson: ~ HeimrichHannot\GoogleChartsBundle\DataType\Concrete\DataTypeReference: ~
Independant from the dataType you've chosen you can modify the chart data by this event.
The event holds the chart config and the data that was set by the dataType as parameters.
To modify the data you need to set the data in the event using the