PHPackages brocode/module-chartee - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. brocode/module-chartee ActiveMagento2-module[Utility & Helpers](/categories/utility) brocode/module-chartee ====================== Module to generate Graphs and Charts with chart.js 1.2.1(2y ago)42.0k[1 issues](https://github.com/brosenberger/module-chartee/issues)1MITJavaScript Since Dec 30Pushed 2y ago3 watchersCompare [ Source](https://github.com/brosenberger/module-chartee)[ Packagist](https://packagist.org/packages/brocode/module-chartee)[ Fund](https://www.buymeacoffee.com/brosenberger)[ RSS](/packages/brocode-module-chartee/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (2)Versions (8)Used By (1) Chartee - a Magento 2 chart-js module ===================================== [](#chartee---a-magento-2-chart-js-module) This module should ease the way of creating powerful charts in Magento 2. It is based on the chart.js library (which itself is already used by Magento2 for its dashboard charts) and various extensions for additional chart types. **Goals of this module:** - Be independent of the version management of Magento and updates of its library dependencies (only the current 2.4.7-beta2 uses chart.js v4.4.0!) and use newer chart.js versions in older Magento2 installations - Provide a simple way to create charts in Magento2 without much knowledge of the chart.js library itself - Provide boilerplate codes to easily integrate any type of chart in various places within Magento - Encourage everyone to create meaningful representations of data already available in Magento2, no stackholder would see otherwise as it is buried in the databases [!["Buy Me A Coffee"](https://camo.githubusercontent.com/9f44ce2dc3b3eecdd02598900866ffc518801df1932849703dae1e5ce5031070/68747470733a2f2f7777772e6275796d6561636f666665652e636f6d2f6173736574732f696d672f637573746f6d5f696d616765732f6f72616e67655f696d672e706e67)](https://www.buymeacoffee.com/brosenberger) Installation ------------ [](#installation) ``` composer require brocode/module-chartee bin/magento module:enable BroCode_Chartee bin/magento setup:upgrade ``` Features -------- [](#features) ### Supported chart types [](#supported-chart-types) **Bar chart**Based on the base implementation from [![Bar chart](/docs/demo_barchart.png)](/docs/demo_barchart.png) **Stacked bar chart** A bar chart variation with the help of the chart.js plugin [![Stacked bar chart](/docs/demo_stackedbarchart.png)](/docs/demo_stackedbarchart.png) **Polar chart** A polar chart based on the sample from [![Polar chart](/docs/demo_polarchart.png)](/docs/demo_polarchart.png) **Doughnut chart** A variation of the base doughnut chart, based on [![Doughnut chart](/docs/demo_doughnutchart.png)](/docs/demo_doughnutchart.png) **Gauge chart** A variation of the doughnut chart, based on [https://www.youtube.com/watch?v=VF6jd2Fv4bs&list=RDCMUCojXvfr41NqDxaPb9amu8-A&index=1](https://www.youtube.com/watch?v=VF6jd2Fv4bs&list=RDCMUCojXvfr41NqDxaPb9amu8-A&index=1)[![Gauge chart](/docs/demo_gaugechart.png)](/docs/demo_gaugechart.png) **Boxplot chart** *What is a Boxplot chart? See [Wikipedia](https://en.wikipedia.org/wiki/Box_plot) for more information.* A boxplot chart, based on [![Boxplot chart](/docs/demo_boxplotchart.png)](/docs/demo_boxplotchart.png) ### Ready to use charts [](#ready-to-use-charts) **Customer Group Distribution** The charts shows the distribution of registered customers between all customer groups. It also provides the possibility to download the shown data as CSV. It can be found in the page `Customers -> Customer Groups`: [![Customer Group Distribution](/docs/customergroup_distribution_chart.png)](/docs/customergroup_distribution_chart.png) *Permissions:* only admin users with the permission `BroCode_Chartee::chart_customer_group_distribution` can see the chart. [![Customer Group Distribution Permissions](/docs/acl_configuration.png)](/docs/acl_configuration.png) *Configuration:* `Stores -> Configuration -> Services -> Chartee Reports Configuration -> Customer Report Settings` - the chart can be disabled via configuration - the download filename can be changed via configuration [![Customer Group Distribution Configuration](/docs/customer_chart_configuration.png)](/docs/customer_chart_configuration.png) ### Adminhtml menu items [](#adminhtml-menu-items) All menus can be found under `Content -> BroCode Chartee`[![Adminhtml menu items](/docs/menu_items.png)](/docs/menu_items.png) **Chartbuilder Listing** Shows all registered chart builders. [![Chartbuilder Listing](/docs/chartbuilder_listing.png)](/docs/chartbuilder_listing.png) Currently no further features are implemented. Possible features could be: - Preview of generated chart.js configurations (TBD) **Demo Charts** Listing of all current demo charts and links how they have been implemented on js side. ### Boilerplate code snipptes [](#boilerplate-code-snipptes) #### ColumnBaseChart [](#columnbasechart) Simple base class to order all added subblocks in a column layout. It dynamically sets the according needed columns, based if a chart is shown or not (which can change based on configuration or permissions). Additionally a section title added. Sample of a row with 2 columns and a section title: ``` section_title First Section Title ... ... ``` #### BaseCompositeChart [](#basecompositechart) Base chart display class. It can be used within the frontend and adminhtml (a specialized subclass exists with the extension of checking backend permissions: BroCode\\Chartee\\Block\\Adminhtml\\BaseCompositeChartsBlock). It provides the following features: - checks the visibility based on a configuration value - adds the possibility to prepare a download link of the shown data (or more) as CSV file - the download file name can be configured (otherwise it will be autogenerated as {current-date}\_{md5-hash}.csv) - the key to the data from the chartbuilder that should be downloadable - checks the visibility based on a ACL permission (only the adminhtml-class) ``` visibilityConfigPath brocode_chartee_reports/customer/customer_group_distribution permission BroCode_Chartee::chart_customer_group_distribution chartDataBuilder brocode-customer-stacked-group downloadNameConfigPath brocode_chartee_reports/customer/customer_group_distribution_downloadfile downloadDataKey customer_groups_data ``` #### Chart Data Builder [](#chart-data-builder) Every chart needs a datasource, which is an implementation of \\BroCode\\Chartee\\Api\\ChartDataBuilderInterface. For every base chart a separate Databuilder is already implemented with default configurations for that type of chart and possibly additional methods for creating the needed configuration. Every base chart has its default DataBuilder and an implementation example within \\BroCode\\Chartee\\Model\\DataBuilder\\Demo. **Implementation of a new Databuilder** Extend the needed specific ChartDataBuilder, here a Sample of the DemoPolarChartDataBuilder: ``` class DemoPolarChartDataBuilder extends PolarChartDataBuilder { public function build() { $this->setDataLabels(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']) ->createDataSet() ->setLabel('Weekly Sales') ->setDataValues(12, 19, 3, 17, 28, 24, 7) ->setBackgroundColors("#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e") ->build(); return parent::build(); } } ``` To add downloadable data to be used, any data must be set separatelly to the chart builder class: ``` public function build() { ... $this->setData('customer_groups_data', $groupData); ... return parent::build(); } ``` **Registration within the databuilder service** The databuilder needs to be registered within a di.xml in order to use it as named builder within the Template-block class: ``` \BroCode\Chartee\Model\DataBuilder\Customer\StackedCustomerGroupDataBuilder ``` **Datafiltering** the \\BroCode\\Chartee\\Model\\ChartRequestParameterService provides methods to gather all set filtering parameter that should be considered when building up the needed data. Current following parameters are supported: - Scope (ChartRequestParameterService::getStoreIds(), based on the backend store switcher Magento\\Backend\\Block\\Store\\Switcher) - DateRange (ChartRequestParameterService::getStartDate() & ChartRequestParameterService::getEndDate(), null if not set) Hint for adding a store filter to your backend page: ``` 0 1 1 ``` Hint for adding a date range filter to your backend page: ``` ``` Hint for using a date range picker in a custom element: ``` ``` Hint for configuration possibility (see ), e.g. hiding the week numbers: ``` ``` #### BroCode\\Chartee\\Block\\Widget\\BaseChart [](#brocodecharteeblockwidgetbasechart) These charts are used by the BaseCompositeChart class and can also be used as standalone charts too. The according demo page charts are implemented that way. Steps to add a new chart: - create a databuilder (see above) - create a virtual type and define a specific view model for that databuilder ``` BroCode\Chartee\Model\DataBuilder\Demo\DemoBoxplotDataBuilder ``` - create a layout update and set a the defined view model ``` BroCode\Chartee\Block\ViewModel\DemoBoxplotChartConfiguration ``` JS-Libraries, Chart.js version and extensions --------------------------------------------- [](#js-libraries-chartjs-version-and-extensions) - chart.js v4.4.0 - chart.js helpers (parts of it) v4.3.2 - chart.js boxplot plugin v4.2.4 - chart.js stacked100 plugin v1.5.2 - chart.js autocolors plugin 0.2.2 - custom implementation (based on samples from the internet, see above for reference) within graph.js - doughnut labels line plugin - gauge chart - JQuery daterangepicker extension ### Health Score 27 — LowBetter than 47% of packages Maintenance15 Infrequent updates — may be unmaintained Popularity23 Limited adoption so far Community13 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor1 Top contributor holds 97.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~6 days Total 7 Last Release 868d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9453d161c28a18e817351e00d7ebe81ada31842a249ffb3389830b3483584e60?d=identicon)[brosenberger](/maintainers/brosenberger) --- Top Contributors [![rosenberger-e-conomix](https://avatars.githubusercontent.com/u/47806105?v=4)](https://github.com/rosenberger-e-conomix "rosenberger-e-conomix (38 commits)")[![brosenberger](https://avatars.githubusercontent.com/u/2969243?v=4)](https://github.com/brosenberger "brosenberger (1 commits)") ### Embed Badge ![Health badge](/badges/brocode-module-chartee/health.svg) ``` [![Health](https://phpackages.com/badges/brocode-module-chartee/health.svg)](https://phpackages.com/packages/brocode-module-chartee) ``` ### Alternatives [civicrm/civicrm-core Open source constituent relationship management for non-profits, NGOs and advocacy organizations. 749284.3k35](/packages/civicrm-civicrm-core)[craftcms/feed-me Import content from XML, RSS, CSV or JSON feeds into entries, categories, Craft Commerce products, and more. 293943.4k27](/packages/craftcms-feed-me)[elgentos/regenerate-catalog-urls Regenerate Catalog URL Rewrites (products, categories, cms pages) 2842.6M](/packages/elgentos-regenerate-catalog-urls)[oat-sa/tao-core TAO core extension 66140.1k108](/packages/oat-sa-tao-core)[myparcelnl/magento A Magento 2 module that creates MyParcel labels 1859.0k](/packages/myparcelnl-magento)[loki/magento2-components Core module for defining Alpine.js components with advanced AJAX features 1010.0k22](/packages/loki-magento2-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)