SAV Charts

Extension key: sav_charts
Version: main
Language: en
Description: Extension which displays charts using the charts.js library
Keywords: sav_charts
Copyright: 2026
Author: Laurent Foulloy
Email: yolf.typo3@orange.fr
License: This document is published under the Open Content License available from www.opencontent.org/openpub.
Rendered: Thu, 13 Aug 2026 07:20:04 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.

Introduction

What Does it Do?

This extension displays charts using the Chart.js library.

Instead of using directly Javascript, Charts configuration are defined through XML tags. Markers can be introduced in templates. Data can also be changed through XML either manually or using query managers.

The following charts type are available :

Bar charts
Bubble charts
Doughnut charts
Line charts
Pie charts
Polar area charts
Radar charts
Stacked bar charts
Horizontal bar charts
Scatter Line Charts
Charts can also be combined, e.g. a bar chart with a line chart

Tip

SAV Charts is provided with several basic templates and more advanced templates which simplify the implementation of charts with several sets of data.

The following screenshots are obtained with the provided basic templates.

Screenshots

Bar Chart

Bubble Chart

Doughnut Chart

Horizontal Bar Chart

Horizontal Stacked Bar Chart

Line Chart

Pie Chart

Polar Area Chart

Radar Chart

Scatter Chart

Stacked Bar Chart

Combination Chart

Users Manual

Download the extension and install it in the dependencies of your site (the extension comes with default sites settings).
Read the tutorial section.

Administration

Important

The flag Allow queries (Admin) must be set by an Admin user in the content flexform to execute queries.

Warning

This extension generates raw javacript codes from the chart configurations in the backend.

Most often, simple configurations are taken from the chart.js documentation. However, more complex configurations can be entered. As said in the TYPO3 Security Guide, "Even if editors do not insert malicious code intentionally, sometimes the lack of knowledge, expertise or security awareness could put your website under risk".

Admin users should be careful before granting the rights for backend users to enter charts.

Marker Tags From TypoScript

Marker tags can be created from TypoScript and used in charts. In the following example the marker MyMarker takes the value MyValue.

plugin.tx_savcharts.settings.marker.myMarker = TEXT
plugin.tx_savcharts.settings.marker.myMarker.value = MyValue

Marker Replacement in Queries

Marker replacement can also be performed in queries. The following example shows how to define the marker MyMarker associated with the query whose uid is equal to 1. The marker value MyValue will replace any marker ###MyMarker### in the query clauses.

plugin.tx_savcharts.settings.customQuery = COA
plugin.tx_savcharts.settings.customQuery.1.MyMarker = TEXT
plugin.tx_savcharts.settings.customQuery.1.MyMarker.value = MyValue

Reference

In the following sections all tag attributes can take a value or be a reference to a specific tag. The allowed syntaxes are:

tag#id. The attribute value will be replaced by the tag whose id is id (tags can be any allowed tag as marker, data, barChart...) . See for example the provided template barCharts.xml in which there is the following line. The attribute value is replaced by the marker whose id is labelSet1.
```
<item key="label" value="marker#labelSet1" />
```
Copied!
tag#id:integer1. The tag whose id is id must be an array. The attribute value will be replaced by the item at the position given by integer1.
tag#id:integer1-integer2. The tag whose id is id must be an array. The attribute value will be replaced by the sub-array starting at integer1 and ending at integer2.
for#id:value. The tag is replaced by the curent value of the attribute each in the <for> tag.
for#id:key. The tag is replaced by the curent key of the attribute each in the <for> tag.
tag#id:for#idFor:key. The tag whose id is id must be an array. The attribute value will be replaced by the item at the position given by key of the current each attribute of the <for> tag whose id is IdFor.
tag#id:for#idFor:value. The tag whose id is id must be an array. The attribute value will be replaced by the item at the position given by value of the current each attribute of the <for> tag whose id is IdFor.

Tip

Examples of such syntaxes can be found in the file Resources/Private/ChartsExamples/BarChartAdvanced.xml which builds a flexible template able to display upto 9 data sets with 9 different colors in the same charts as explained in the tutorial section.

Chart Tags

charts

charts

<charts>...</charts>

Type: Root object
Description: Creates a charts object. The tag <charts> is the root xml element.

addItem

addItem

<addItem reference="object#id" key="myKey" value="myValue" />

Type

Root method

Description

Method associated with the root tag <charts> which adds an item in an array.

Attributes

reference (required): the object reference.
key (required): the key of the item in the array.
value(required): the value associated with the item.

exportCsv

exportCsv

<exportCvs reference="object#id" data="object#id" />

Type

Root method

Description

Method associated with the root tag <charts> which makes it possible to export data in the CSV format.

Attributes

reference (required): the object reference.
data (required): the reference to data.
rowHeader: if set, the reference to the row header.
columnHeader: if set, the reference to the column header.
encoding: if set, the encoding is used to convert the output. By default, the CSV output is converted to ISO-8859-1.

setId

setId

<setId reference="object#id" newId="myNewId" />

Type

Root method

Description

Method associated with the root tag <charts> which makes it possible to change the id of the object given in the reference attribute.

Attributes

reference (required): the object reference.
newId (required): the new id.

barChart

barChart

<barChart id="myBarChartId" data="data#myBarChartData">...</barChart>

Type

Object

Description

Creates a bar chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

bubbleChart

bubbleChart

<bubbleChart id="myBubbleChartId" data="data#myBubbleChartData">...</bubbleChart>

Type

Object

Description

Creates a buble chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

doughnutChart

doughnutChart

<doughnutChart id="myDoughnutChartId" data="data#myDoughnutChartData">...</doughnutChart>

Type

Object

Description

Creates a doughnut chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

horizontalBarChart

horizontalBarChart

<horizontalBarChart id="myhorizontalBarChartId" data="data#myhorizontalBarChartData">...</horizontalBarChart>

Type

Object

Description

Creates an horizontal bar chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

horizontalStackedBarChart

horizontalStackedBarChart

<horizontalStackedBarChart id="myhorizontalStackedBarChartId" data="data#myhorizontalStackedBarChartData">...</horizontalStackedBarChart>

Type

Object

Description

Creates an horizontal stacked bar chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

lineChart

lineChart

<lineChart id="myLineChartId" data="data#myLineChartData">...</lineChart>

Type

Object

Description

Creates a doughnut chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

pieChart

pieChart

<pieChart id="myPieChartId" data="data#myPieChartData">...</pieChart>

Type

Object

Description

Creates a pie chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

polarAreaChart

polarAreaChart

<polarAreaChart id="myPolarAreaChartId" data="data#myPolarAreaChartData">...</polarAreaChart>

Type

Object

Description

Creates a polar Area chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

radarChart

radarChart

<radarChart id="myRadarChartId" data="data#myRadarChartData">...</radarChart>

Type

Object

Description

Creates a radar chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

scatterChart

scatterChart

<scatterChart id="myScatterChartId" data="data#myScatterChartData">...</radarChart>

Type

Object

Description

Creates a scatter chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

stackedBarChart

stackedBarChart

<stackedBarChart id="myStackedBarChartId" data="data#myStackedBarChartData">...</stackedBarChart>

Type

Object

Description

Creates a stacked bar chart object.

Attributes

id (required): the identifier.
data (required): a reference to the data used for the chart (in general a reference to a data object).
options: a reference to the options (in general a reference to a data object).
width: the canvas width. If this attribute is not provided, the default width is 400.
height: the canvas height. If this attribute is not provided, the default height is 300.

Data Tags

data

data

<data id="myDataId">5,6,7</data>

Type

Object

Description

Creates a data object from a comma separated list of data.

Attributes

id (required): the identifier.

It is equivalent to:

<data id="myDataId">
	<setData values="5,6,7"/>
</template>

setData

setData

<setData values="5,6,7" />

Type

Default method

Description

Sets the values from a comma separated list of data.

Attributes

values (required): comma separated list of data.

callback

callback

<callback key="callbackKey">callbackFileName.js</callback>
<callback key="callbackKey"><!-- javascript function --></callback>

Type

Method

Description

Defines a callback. The javacript function can be provided by means of a file name or inserted inserted inline inside a XML comment (see the FAQ section for an example).

Attributes

key (required): the key for the callback.

changeToPercentage

changeToPercentage

<changeToPercentage />

Type

Method

Description

Changes the data to percentage.

Attributes

precision: the precision for rounding floats (default value is 1).

item

<item key="myKey" value="tag#id" /> or
<item key="myKey" value="5" /> or
<item key="myKey" values="1, 3, 5" /> or
<item key="myKey">5</item>

Type

Method

Description

Sets a data item either by means of a reference, a value or a comma-separated list of values.

Attributes

key (required): the key for the item.
value: if set, the value is defined directly or by the reference, for example data#myDataId. If value is equal to true or false then a boolean value is generated for this item.
type: if this attribute is equal to function, the value attribute is taken as the name of a javascript function.
values: if set, a comma-sparated list of values is assumed.
if no value or values attribute is provided, the tag childs can be a value or other <item> tags.

setDataFromQuery

setDataFromQuery

<setDataFromQuery query="myQueryId" field="fieldName" />

Type

Method

Description

Defines the data from a query.

Attributes

query (required): the query identifier.
field (required): the field to extract from the query result.
groupby: it set, either the size of the reference defined by the tag and the id, for example "data#myDataId", or the given integer, will be used to group the data. It means that an new array element will be generated each time the count is reached. This option is useful to display data when GROUP BY clause is used in the query.

setDataFromQueryRow

setDataFromQueryRow

<setDataFromQueryRow query="myQueryId" fields="fieldName1, fieldName2, fieldName3" />

Type

Method

Description

Defines the data from the row of a query.

Attributes

query (required): the query identifier.
fields (required): the comma-separated list of fields to extract from the query row.

For Tags

for

for

<for each="data#myData">...</for>

Type

Object

Description

Repeats the sequence inside the tag for each element provided by means of the each attribute.

Attributes

each (required): the element for the repetition.

Marker Tags

marker

marker

<marker id="myMarkerId">marker value</marker>

Type

Object

Description

Creates a marker object

Attributes

id (required): the identifier.

It is equivalent to:

<marker id="myMarkerId">
   <setMarker value="marker value"/>
</template>

setMarker

setMarker

<setMarker value="marker value" />

Type

Default method

Description

Defines the marker.

Attributes

value (required): the value for the marker.

setMarkerByPieces

setMarkerByPieces

<setMarkerByPieces attribute1 .. AttributeN />

Type

Default method

Description

Defines the markerby concatenating the attributes.

Attributes

Any attribute name can be used. The resulting marker is the concatenation of all attribute values.

In the following exemple, the marker myMarkerId has the value Number of pages created per year.

    
<marker id="myMarkerId">
   <setMarkerByPieces part1="Number of " part2="pages created " part3="per year" />
</marker>

This method is useful when markers include information from a query, for example. In this case, a part is a reference to the data generated by the query.

Tip

Using \n in an attribute value generates a newline break.

Plugin Tags

plugin

plugin

<plugin id="myPluginId">yourFileName.js</plugin>

Type

Object

Description

Loads the javascript file (see the FAQ section).

Attributes

id (required): the identifier.

Query Tags

query

query

<query id="myQueryId">...</query>

Type: Object
Description: Creates a query object.
Attributes: required): the identifier.

setQueryManager

setQueryManager

<setQueryManager name="savcharts" uid="queryUid" marker1="myMarker" ... />

Type

Object

Description

Defines the query manager associated with the query.

Attributes

name (required): Unless you have define you own query manager, use savcharts.
uid (required): The uid of your query. Queries are defined in the backend.
other attributes define markers that can be used in the query clauses. In these clauses ###myMarker### will be replaced by the value of the marker myMarker. Any attribute name, except name and uid can be used.

Markers can be directly defined as, for example, myMarker#myValue. In that case, the marker name will be myMarker and its value is myValue.

Markers can be defined as a reference to a marker tag, for example marker#myMarker. In that case, the marker name will be myMarker and its value is the value of the marker whose id is myMarker.

Markers can also be defined as a reference to a specific element in a data or marker array, for example myMarker#data#myData:0. In that case, the marker name will be myMarker and its value is obtained from the data with index 0 and whose id is myData.

Template Tags

template

template

<template id="myTemplateId">yourFileName.xml</template>

Type

Object

Description

Loads the XML template file given inside the XML tag. The file name is relative to the site path.

Attributes

id (required): the identifier.

It is equivalent to:

<template id="myTemplateId">
   <loadTemplate fileName="yourFileName.xml"/>
</template>

loadTemplate

loadTemplate

<loadTemplate fileName="yourFileName.xml"/>

Type

Default method

Description

Loads the XML template file given in the fileName attribute.

Attributes

fileName (required): the file name is relative to the site path.

Tutorial

The processing in SAV Charts is based on the interpretation of XML tags which are associated with objects. You may split the processing in several XML files or strings or have all XML tags inserted in the same file.

Designing XML Templates From Examples

Introduction

The chart.js documentation provides examples for the different charts.

The SAV Charts extension comes with templates for all chart types. These templates are in the directory Resources/Private/Templates/ChartExamples of the extension.

To display a template, simply create a SAV Charts plugin content element in a page.

Then click on the plugin tab.

Fill the template field of the flexform and save.

Important

Use the EXT: prefix to reference the template file from the extension.

<template id="1">
   EXT:sav_charts/Resources/Private/Templates/ChartsExamples/LineChart.xml
</template>

Go to the frontend and you should see the following image.

Writing Templates

The templates provided with the extension were adpated from the examples given in the chart.js documentation. Let us illustrate the principle for the line chart.

The javascript code to display the line graph is the following:

var data = {
   labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [
      {
         label: "My First dataset",
         fillColor: "rgba(220,220,220,0.2)",
         strokeColor: "rgba(220,220,220,1)",
         pointColor: "rgba(220,220,220,1)",
         pointStrokeColor: "#fff",
         pointHighlightFill: "#fff",
         pointHighlightStroke: "rgba(220,220,220,1)",
         data: [65, 59, 80, 81, 56, 55, 40]
      },
      {
         label: "My Second dataset",
         fillColor: "rgba(151,187,205,0.2)",
         strokeColor: "rgba(151,187,205,1)",
         pointColor: "rgba(151,187,205,1)",
         pointStrokeColor: "#fff",
         pointHighlightFill: "#fff",
         pointHighlightStroke: "rgba(151,187,205,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
      }
   ]
};

The template is built by transforming this javascript code into a XML structure using the <data> tag. By doing so, thanks to the data tag id, references can be used. References provide an easy means to split the data and therefore to make it possible to have them overloaded in the flexform data section or with queries.

The following code is the translation in XML of the previous javascript code where <data> tags whose id are labels, dataSet1 and dataSet2 can be easily overloaded as explained in the next section.

<?xml version="1.0" encoding="UTF-8"?>
<charts>        
   <lineChart id="1" data="data#lineChartData" options="data#lineChartOptions" >
             
      <marker id="labelSet0">My First dataset</marker>
      <marker id="labelSet1">My Second dataset</marker>       
         
      <data id="labels">
         January, February, March, April, May, June, July
      </data>
     
      <data id="dataSet0">
         65, 59, 80, 81, 56, 55, 40
      </data>
         
      <data id="dataSet1">
         28, 48, 40, 19, 86, 27, 90
      </data>         
     
      <data id="set0">
         <item key="label" value="marker#labelSet0" />
         <item key="backgroundColor">rgba(220,220,220,0.2)</item>
         <item key="pointColor">rgba(220,220,220,1)</item>
         <item key="pointBackgroundColor">#fff</item>
         <item key="pointHoverBackgroundColor">rgba(220,220,220,1)</item>
         <item key="data" value="data#dataSet0" />
      </data> 
     
      <data id="set1">
         <item key="label" value="marker#labelSet12" />
         <item key="backgroundColor">rgba(151,187,205,0.2)</item>
         <item key="pointColor">rgba(151,187,205,1)</item>
         <item key="pointBackgroundColor">#fff</item>
         <item key="pointHoverBackgroundColor">rgba(151,187,205,1)</item>            
         <item key="data" value="data#dataSet1" />
      </data>     
     
      <data id="dataSets">
         <item key="0" value="data#set0" />
         <item key="1" value="data#set1" />
      </data>     
     
      <data id="lineChartData">
         <item key="labels" value="data#labels" />           
         <item key="datasets" value="data#dataSets" />       
      </data> 
         
      <data id="lineChartOptions">
      </data>     
         
   </lineChart>
</charts>

Tip

<data> were inserted inside the <lineChart> tag just by personal choice. They could have been provided before the <lineChart> tag. In that case, this tag would have no content and would simply be written:

 
<lineChart id="1" data="data#lineChartData" options="data#lineChartOptions" />

Overloading Data

Open the plugin in the backend and fill the Data section of the flexform as follows and save:

Go in the frontend and you should see the following figure.

The principle in SAV Charts is to consider that for a given tag with a given id the first definition is the first one to use. Therefore, in the previous example, since <data> tag for id dataSet0 and dataSet1 are defined in the data section, which is before the template section, they will not be replaced by the same <data> tags in the template. One may consider that the <data> tags in the data section overloads the same tags in the template.

It provides a quite simple way of working with generic templates and adapting their behavior with your real data. For example, using the same template LineChart.xml, you may want to display only one curve. It can simply be done by defining the <data> tag whose id is dataSets in the data section as shown below.

<data id="dataSet0">1,6,3,9</data>
<data id="labels">1,2,3,4</data>
   <data id="dataSets">
      <item key="0" value="data#set0" />
</data>

Enter the previous code in the flexform data section, save and go to the frontend.

Note

In very specific cases you may explicitly allow to overload a given tag by setting the attribute overload to 1. See Resources/Private/Templates/ChartExamples/LineChartAdvanced.xml in which this feature is used to build a flexible template.

Overloading Markers

Markers are tags which can be used to create strings. In the line chart template two markers are used to define labels which are displayed in the legend. The markers can be overloaded in the Markers section of the flexform. Assuming that you have the previous code to display only one line chart, input the following code in the Markers sections, save and go to the frontend.

<marker id="labelSet0">Single curve</marker>

Options

Options are defined in the chart.js documentation. They can be set by overloading the <data> tag associated with the options attribute of the chart. For example, in the LineChart.xml template, the chart is defined as follows:

<lineChart id="1" data="data#lineChartData" options="data#lineChartOptions" >
   ....
</lineChart>

The options attribute is a reference to the <data> tag whose id is lineChartOptions.

Overloading this tag in the Data section of the flexform will set options.

Let us assume that the data section is still configure for a single chart, with a modifed label.

Add the following code in the Data section of the flexform. It will cancel the animation, set a linear interpolation between points.

<data id="lineChartOptions" >
   <item key="animation"></item>
   <item key="elements">
      <item key="line">
         <item key="tension" value="0" />
      </item>
   </item>
</data>

Note

A linear interpolation is obtained by setting tension to 0 in Chart.defaults.global.elements.line (see chart.js documentation). Since the global option are in the <data> whose id is lineChartOptions, nested items whose keys are elements and line provide acces to Chart.defaults.global.elements.line.

Tip

To generate a boolean value, set the attribute value to true or false.

Using Advanced Templates

More complex templates are provided with SAV Charts. They can display upto to 9 items in the same charts.

Colors are defined in a specific template DefaultColors.xml which were chosen to provide constrast between items.

Let us illustrate the use of advanced templates with, for example, the template LineChartAdvanced.xml.

In the template section enter the following code, save and go to the frontend.

<template id="1">
   EXT:sav_charts/Resources/Private/Templates/ChartsExamples/LineChartAdvanced.xml
</template>

The chart has 9 superposed curves with the same data, predefined colors, predefined labels and a predefined title.

In the data section enter the following code, save and go to the frontend.

<data id="data">
   <item key="0" values="10, 6, 7, 2, 1, 5, 3" />     
</data>

Modify the data section as follows:

<data id="data">
   <item key="0" values="10, 6, 7, 2, 1, 5, 3" />
   <item key="1" values="5, 3, 8, 1, 6, 9, 2" />
</data>  
 
<data id="labels">
   1, 2, 3, 4, 5, 6, 7
</data>

In the marker section, enter the following code, save and go to the frontend.

<marker id="title">A line chart with two curves</marker> 
<marker id="labelSet0">Curve 1</marker> 
<marker id="labelSet1">Curve 2</marker>

Using and Developing Query Managers

Query managers are used in <query> tags to execute queries which can be used in charts.

SAV Charts extension comes with an internal query manager named savcharts which can deal with TYPO3 database queries as well as queries from other databases.

Using the Query Manager

In the backend in list mode create a new record in a page or a folder.

Select Database if you need to access to an external database, fill the different fields and save.

Tip

You do not need to create a new database access if you only need to access to the current TYPO3 database.

Select Query to create a query. Select a database (default is TYPO3 Database), fill the different clauses and save.

The following figure illustrates the query to display the number of pages per year.

Assuming that the new query has the id 1, the following flexform configuration displays a bar chart with the number of pages per year.

In the Queries section, the default query manager savcharts is used. It calls the query whose uid is 1.

The Data section of the flexform overloads the template to display only a single barchart with the data provided by the query, as explained in the section Using Advanced Templates.

Important

The flag Allow queries (Admin) must be set by an Admin user in the content flexform to execute queries.

Go to the frontend to display the resulting chart.

Developing Your Query Manager

Query managers are implemented by means of hooks.The hook for the internal query manager is in Classes/Hooks/SavChartsQueryManager.php. This class extends the abstract class AbstractQueryManager (Classes/Hooks/AbstractQueryManager.php) which itself implements the interface QueryManagerInterface (Classes/Hooks/QueryManagerInterface.php).

You can develop your own query manager by providing a hook which must be added in the file ext_localconf.php of your extension.

Assuming that your vendor name is MyVendorName and your extension name is my_extension. Assuming also that you have written your manager as the class MyQueryManager in Classes/Hooks/MyQueryManager.php. Finally, assuming that you want to name your query manager myManager, you should add the following code in ext_localconf.php of your extension.

$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['queryManagerClass']['myManager'] = \MyVendorName\MyExtension\Hooks\MyQueryManager::class;

Exporting Data in CSV

You can easily export data associated with any chart using the exportCSV method associated with the <charts> tag (see exportCsv).

Assuming that you want to export data associated with the line chart template with a row header containing the x-axis labels and a column header containing the legend labels of the two curves. Add the following code in the Templates section of the flexform.

Now, in the frontend you should see an icon under the legend. Click on the icon to open the CSV file.

Frequently Asked Questions

Warning

SAV Charts is now using Chart.js 4.x. Several breaking changes were made in Chart.js 3.0 and Chart.js 4.0 (see 3.x Migration Guide and 4.x Migration Guide). All templates in Resources/Private/Templates/ChartsExamples were modified to take these changes into consideration.

If you are upgrading Sav Charts, you may have to modify your templates.

How to Generate a Boolean Value?

Set the attribute value to true or false.

<data id="barChartOptions">
   <item key="animation" value="false" />
   <item key="responsive" value="false" />
   <item key="plugins">
       <item key="title">
          <item key="display" value="true" />
          <item key="text" value="marker#title" />
       </item>
       <item key="tooltip">
           <item key="backgroundColor">rgba(0,0,0,0.7)</item>
       </item>
   </item>                        
</data>

How to Set the y-Axis Properties?

You can change the default y-axis (or x-axis) properties using the options for the chart. For example, assume that the y-axis for the lineChart example has to be changed so that the minimum is 10, the maximum is 100 and the step is 5.

Add the following configuration in the data section or in your template.

<data id="lineChartOptions">
   <item key="scales"> 
      <item key="y">
         <item key="max" value="100" />
         <item key="min" value="10" />
         <item key="ticks">   
            <item key="stepSize" value="5" />
         </item>
      </item>
   </item>
</data>

Save, clear the cache and go to the frontend.

Tip

You can easily adapt the previous configuration to other cases by translating the javascript configuration examples given in the documentation.

The translation is simple:

Replace options by a <data id="..."> ... </data> where the id is the identifier for the chart options (it is defined in the template).
Replace opening braces by <item> tags with attributes as keys.
Replace open brackets, if any, by <item> tags with keys equal to 0.
Replace simple attributes inside braces by <item /> tags with key and value attributes.
Replace closing braces or brackets by </item> tags.

For example, the following code changes also the label style of the x-axis. A callback is used to modify the tick labels.

 
<data id="lineChartOptions">
   <item key="scales"> 
      <item key="y">
         <item key="max" value="100" /> 
         <item key="min" value="10" />
         <item key="ticks">      
            <item key="stepSize" value="5" />
         </item>
      </item>
      <item key="x">
         <item key="ticks">
            <item key="font">
               <item key="size" value="15" />
               <item key="tyle" value="italic" />
            </item>
            <item key="color" value="rgb(200, 0, 0)" />
            <callback key="callback">
               <!--
               function(value, index, values) {
                  return '- ' + this.getLabelForValue(value) + ' -';
               }
               -->
            </callback>
         </item>
      </item>
   </item>
</data>

Note

In Chart.js 3.0 , the former xAxes and yAxes arrays in scales were removed.

How to Modify the Tooltip Format?

The tooltip format can be modified using callbacks that are provided with chart.js. For example let us assume that data provided with the Pie Chart example are in €. Let us also assume that we want to change the tiptool content in order to have label - value € instead of the defaut format label:value.

Chart.js library allows to modify several behaviors by means of callbacks. Please consult the chart.js documentation for details.

The tooltip label can been changed by means of the label callback in tooltip options.

Inline Javascript Function

Add the following configuration in the data section or in your template.

<data id="pieChartOptions">
   <item key="plugins">
      <item key="tooltip">
         <item key="callbacks">
            <callback key="label">
               <!--
               function(context) {
                  return context.label + ' - ' + context.formattedValue + ' €';
               }
               -->
            </callback>
         </item>
      </item>
   </item>   
</data>

Warning

The javascript function must be in a XML comment.

Save, clear the cache and go to the frontend.

The configuration is simply the translation of the following javascript configuration.

     
options: {
   plugins: { 
      tooltip: {
         callbacks: {
             label: function(context) {
                return context.label + ' - ' + context.formattedValue + ' €';
             }
         }
      }
   }
}

Note

In Chart.js 3.0 tooltips was renamed tooltip and is now in the plugins item of the options. A tooltip item context is avaible in callbacks. For more information see the tooltip section in Chart.js documentation.

Javascript Function in a File

When the javascript function associated with the callback is more complex, you can also put it in a file and call that file in the callback as shown in the following configuration.

How to call a JavaScript Function on Events?

The following configuration shows how to associate the JavaScript function newLegendClickHandler with the onClick event of the legend.

<data id="barChartOptions">
   <item key="legend">
      <item key="onClick" type="function" value="newLegendClickHandler" />
   </item>                        
</data>

How to Create a Combination Chart?

An example which combines a bar chart and a line chart is provided in the directory Resources/Private/Templates/ChartsExamples. Create a new graph then, in the template section, enter the following code, save and go to the frontend.

<template id="1">
   EXT:sav_charts/Resources/Private/Templates/ChartsExamples/ComboChart.xml
</template>

The file ComboChart.xml is very similar to the file BarChart.xml. Only slight changes were made. The type attribute of the second dataset is set to line and the fill attribute to false.

<data id="set1">
   <item key="type">line</item>
   <item key="fill" value="false"/>
...
</data>

The value for the type attribute of each chart is given in the chart.js documentation.

Entity Relationship Diagram

The Entity Relationship Diagram is generated by the SAV Library Kickstarter in Graphviz DOT language and included using PlantUML.

New tables with their fields are represented with a Black border.
Existing tables are represented with a Dark green border. Only existing fields uid and pid are shown. If new fields are created, they are shown in Light blue.
1-n relations are in Dark blue.
n-n relationships are in Dark red with the name of the associated mm table.

Changelog

Version	Changes
14.3.0	Compatibility changed to TYPO3 13.4.x and 14.3.x.
13.4.0	Compatibility changed to TYPO3 12.4.x and 13.4.x. Version of chart.js changed to 4.4.5.
11.5.0	Compatibility changed to TYPO3 11.5.x. Version of chart.js changed to 3.6.0.
11.2.0	Compatibility changed to TYPO3 11.2.x. Version of chart.js changed to 3.2.1. Scatter graph added with example. Combination graph example added.
10.4.0	Compatibility changed to TYPO3 10.4.x.
10.3.0	Compatibility changed to TYPO3 10.3.x. Version of chart.js changed to 2.9.3. True or false values and use of functions outside callbacks added (issue #1).
9.5.0	Version of chart.js changed to 2.9.2. Compatibility changed to TYPO3 9.5.x. Documentation updated to docker.
0.5.0	Version of chart.js changed to 2.7.0. Compatibility to TYPO3 6.2 removed. Compatibility changed to TYPO3 9.0.
0.4.0	Version of chart.js changed to 2.7.0. composer.json added. Vendor name changed.
0.3.2	Default type for stacked option changed to boolean.
0.3.1	Small bug corrected in the use of file callback functions (thanks to Holger Birkner for reporting this bug).
0.3.0	Processing of callback functions and plugins added. Documentation updated. Version of chart.js changed to 2.5.0.
0.2.1	Documentation updated. Version of chart.js changed to 2.4.0. Compatibility changed to TYPO3 8.9.
0.2.0	BeginAtZero becomes the default option for line charts. Subitems may contain data items like setDataFromQuery. New templates added for horizontal bar charts, horizontal stacked bar charts and bubble bar charts. Compatibility changed to TYPO3 8.3. Version of chart.js changed to 2.2.2
0.1.0	SAV Charts modified for Version 2.1.6 of chart.js Advanced templates added.
0.0.2	Small changes to remove the use of deprecated methods. Compatibility changed to TYPO3 8.0.
0.0.1	1st public release.

SAV Charts

Table of Contents

Introduction

What Does it Do?

Screenshots

Bar Chart

Bubble Chart

Doughnut Chart

Horizontal Bar Chart

Horizontal Stacked Bar Chart

Line Chart

Pie Chart

Polar Area Chart

Radar Chart

Scatter Chart

Stacked Bar Chart

Combination Chart

Users Manual

Administration

Marker Tags From TypoScript

Marker Replacement in Queries

Reference

Table of Contents

Chart Tags

charts

charts

addItem

addItem

exportCsv

exportCsv

setId

setId

barChart

barChart

bubbleChart

bubbleChart

doughnutChart

doughnutChart

horizontalBarChart

horizontalBarChart

horizontalStackedBarChart

horizontalStackedBarChart

lineChart

lineChart

pieChart

pieChart

polarAreaChart

polarAreaChart

radarChart

radarChart

scatterChart

scatterChart

stackedBarChart

stackedBarChart

Data Tags

data

data

setData

setData

callback

callback

changeToPercentage

changeToPercentage

item

setDataFromQuery

setDataFromQuery

setDataFromQueryRow

setDataFromQueryRow

For Tags

for

for

Marker Tags

marker

marker

setMarker

setMarker

setMarkerByPieces

setMarkerByPieces

Plugin Tags

plugin