How to Create Drupal Charts With Views

There are many ways to present data to your readers. One example would be a table or a list. Sometimes the best approach is to show data on a chart.

It can ease understanding of large quantities of data. There is a way to make charts in Drupal with the help of the Charts module and Views.

In this tutorial, you will learn the basic usage of the module in combination with the Google Charts library.

Step #1. Install the Charts Module and the Library

I'm going to walk you through how to install the Charts module and the library you'll need.

• Download and install the Charts module.
• Click Extend.
• Enable in the Modules page the Charts module and its submodule Google Charts.
• Click Install:

If you use Composer to manage dependencies, edit "/composer.json" as follows.

• Run "composer require --prefer-dist composer/installers" to ensure that you have the "composer/installers" package installed. This package facilitates the installation of packages into directories other than "/vendor" (e.g. "/libraries") using Composer.
• Add the following to the "installer-paths" section of "composer.json": "libraries/{$name}": ["type:drupal-library"],
• Add the following to the "repositories" section of "composer.json":

          {
              "type": "package",
              "package": {
                  "name": "google/charts",
                  "version": "45",
                  "type": "drupal-library",
                  "extra": {
                      "installer-name": "google_charts"
                  },
                  "dist": {
                      "url": "https://www.gstatic.com/charts/loader.js",
                      "type": "file"
                  },
                  "require": {
                      "composer/installers": "~1.0"
                  }
              }
          }
  

• Run:

  composer require --prefer-dist google/charts:45
  

• You should find that new directories have been created under /libraries
• Click Configuration > Content authoring > Charts default configuration. 
• Select Google Charts as the default charting library.
• Click Save defaults:

Step #2. Create a Content Type for your Drupal Charts

We need some kind of structured data to present in our charts. I’m going to compare the population of all the countries in South America. You can, of course, make your own example.

• Go to Structure > Content types > Add content type.
• Create a content type for your Drupal charts

• Add the required fields to match your data:

• At the end, you should have something like this:

• Now that you have your content type in place, let's proceed to create the nodes. In this example, each node will be an individual country.

Step #3. Create the View for your Drupal charts

• Click Structure > Views > Add view. 
• Give your view a proper name. 
• Choose the content type you want to present to your readers.
• Choose to create a block with a display format Unformatted list of fields. You won’t be able to proceed in this step if you choose Chart due to a small bug in the logic of the module.
• I’ve chosen 12 items per block because there are 12 countries I want to show in my chart.
• Click Save and edit:

• In the FIELDS section of Views UI click Add.
• Look for the relevant field for your chart and click Add and configure fields.
• Leave the defaults and click Apply:

• In the FORMAT section click Unformatted list.
• Choose Chart.
• Click Apply:

• Select the Charting library in the drop-down. 
• Select the title as the label field, if it’s not been selected already.
• Check your relevant data field as provided data.
• Scroll down and change the Legend position to None.
• Click Apply. 

Feel free to play with all the configuration options available here to match the chart you want or need. Save the view when you've finished.

Step #4. Place Your Block

• Click Structure > Block layout.
• Search for the region you want to place the block in.
• Click Place block.
• Search your block and click Place block once again.
• Click Save blocks at the bottom of the screen and take a look at your site.

There you have it - your Drupal chart is live. Of course, if you change the data in one of your nodes, the chart will adjust itself accordingly. If you want to change the chart display, just change it in the Chart settings of your view. 

You can also give the other charting libraries (C3, Highcharts) a try and see what fits your needs best.

As always thank you for reading! If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.