Charts Plotly

This is a module that integrates the Plotly.js library with the Charts module.

"Plotly.js is an open-source JavaScript charting library for creating interactive visualizations on the web. Built on top of D3.js and WebGL, it provides a high-level declarative API for creating publication-quality graphs." (Plotly.js website).

The project is open-source (MIT license) and free to use in commercial
applications.

Available chart types and features include:

• Area
• Bar
• Box Plot
• Bubble
• Candlestick
• Column
• Donut
• Gauge
• Heatmap
• Line
• Pie
• Radar
• Scatter
• Spline

Requirements

This module requires the following modules:

• Charts (version 5.2.1 or higher)

Recommended modules

If you don't want to use data already in your site, here are a few
recommended modules:

• Views CSV Source
• Views JSON Source
• Views Database Connector
• External Entities

Installation

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

This module uses Asset Packagist to bring in the Plotly.js library. Before you require the module with Composer, you need to make sure the following exist in your composer.json file:

1. The Asset Packagist repository is added to the "repositories" section.

   "repositories": [
     {
       "type": "composer",
       "url": "https://packages.drupal.org/8"
     },
     {
       "type": "composer",
       "url": "https://asset-packagist.org"
     }
   ],
   

2. The "mnsami/composer-custom-directory-installer" package is installed.
   This package allows you to install libraries into the "/libraries" directory
   instead of the default "/vendor" directory.

   composer require --prefer-dist mnsami/composer-custom-directory-installer
   

3. The installer types and paths are set in the "extra" section of your
   composer.json file. This tells Composer to install Plotly.js into the
   "/libraries/plotly.js" directory.

   "extra": {
     "installer-types": ["npm-asset", "bower-asset"],
     "installer-paths": {
       "web/libraries/plotly.js": ["npm-asset/plotly.js-dist-min"],
       "web/libraries/{$name}": [
         "type:drupal-library",
         "type:bower-asset",
         "type:npm-asset"
       ]
     }
   }
   

4. Install the module using Composer:

   composer require drupal/charts_plotly
   

Configuration

1. Enable the module at Administration > Extend.
2. Set Plotly as your default charting library
   at /admin/config/content/charts.
3. Create your chart! There are several ways to create a chart:
   • Create a view and use the "Chart" format
   • Add a chart field to your entity type (e.g. node, user, etc.)
   • Add a chart in your WYSIWYG using Charts Text Filter
   • Add a chart in your Twig template using Charts Twig
   • Use the Charts API to create a chart programmatically