TYPO3 Extension ``charts`` ========================== Extension to create datasets and show them as line, bar, pie or doughnut chart in frontend Features -------- - Based on extbase & fluid, implementing best practices from TYPO3 CMS - Supporting editors & authors by providing - records to create data for charts incl. labels, data and dataset-labels - fluid based content elements to display charts (bar, line, pie or doughnut) in frontend - (optional) fill data records for charts with informations from spreadsheets when `spreadsheet `__ extension is present in TYPO3 installation - Supporting administrators & developers by providing - select option in extension manager to manage/set the preferred chart library - registry to add multiple chart libraries implementing at least the ``Hoogi91\Charts\DataProcessing\Charts\LibraryInterface`` - DataProcessors to get chart data, assets and their settings from Flexform configuration Users Manual ------------ Create Chart Data ~~~~~~~~~~~~~~~~~ Before creating a chart content element you need to create a dataset that can be used by chart libraries. Go to list view and create a new chart data record. On default labels, data and data labels are configured with TYPO3’s table wizard. If you have `spreadsheet `__ extension installed in your TYPO3 installation then the following screen shows how to select data correctly. .. figure:: Documentation/Images/dataset_spreadsheet.png :alt: Spreadsheet-based Dataset Content-Management Spreadsheet-based Dataset Content-Management Create Chart Content Element ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Create a new element in TYPO3 backend and select tab “Charts” and then the chart type you want to create .. figure:: Documentation/Images/chart-element-overview.png :alt: Table (Excel Spreadsheets) Chart Elements Overview If using `spreadsheet `__ extension and the spreadsheet cells background is colored it will be (depending on used chart libray) used in frontend output as the following example shows: ================================= ============================================================ Excel Input File Frontend Output with `Chart.js `__ ================================= ============================================================ |Spreadsheet Example with Colors| |Spreadsheet Frontend Output with Colors| ================================= ============================================================ *see above chart data selection on how to select labes and data from such an excel file* Developer Informations ---------------------- To register your own or an overridden chart library please put the following in your ``ext_localconf.php``: .. code:: php /** @var \Hoogi91\Charts\DataProcessing\Charts\LibraryRegistry $libraryRegistry */ $libraryRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Hoogi91\Charts\DataProcessing\Charts\LibraryRegistry::class); // add new chart library $libraryRegistry->register('my-chart-library', \Vendor\MyExtKey\DataProcessing\Charts\Library\MyChartLibrary::class); // add override for default chart.js library $libraryRegistry->register('chart.js', \Vendor\MyExtKey\DataProcessing\Charts\Library\ChartJs::class, true); $libraryRegistry->register('chartist', \Vendor\MyExtKey\DataProcessing\Charts\Library\Chartist::class, true); .. |Spreadsheet Example with Colors| image:: Documentation/Images/dataset_excel_file.png .. |Spreadsheet Frontend Output with Colors| image:: Documentation/Images/dataset_result.png