How to Create Drupal Charts With Views

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:

click install for Drupal charts

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: {codecitation}composer require –prefer-dist google/charts:45{/codecitation}
  • 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:

05 select google charts


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:

add required fields

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

08 final result

  • 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.

09 create countries


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:

10 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:

add and configure fields

click apply

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

in the format section 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.

play with configuration options


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.

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!

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lacinna

Very nice tutorial. I have a question. How to alternate the color??? And also why the background color is white instant of transparent that we see in the default configuration?? thank you

Tapasya Singh

Hii .. In my folder structure vendor, composer & Google folders are missing what to do ?

aramirez

Everything good but the composer.json and composer.lock are not in the folder you talk about
modules\contrib\charts\modules\charts_google

So the composer install, does nothing

Rick Pine

Will it work using a Embed display instead of a Block?

flyz

how to enable animation? great tutorial btw

Alex

Hello! There’s a whole [url=https://www.drupal.org/project/visualn]new project[/url] about data visualization. Here you use a block to publish charts and a view as data source. VisualN module is more profound: it lets inserting interactive visualizations “like an image” into nodes and blocks. Besides, it lets you uploading a file with data, for example, Excel, and visualises it. And finally, a lot of settings for a plugin that generates visualizations are presented in a UI. By now, the project is opened for community. General concept supposes development of JS-based plugins that are plug&play through the module. By now basic plugins can draw linecharts, leaflet maps, image galleries.
So you got the trend 😉

Nam Mengsrorn

I got an error with drupal 8.7.1. Which version of drupal are you using?

Michael Friend

The view block appears in the preview of  the view but doesn’t appear on the page when viewing. Any ideas of what may be preventing the views block from appearing in Drupal 8?

suresh

Hi how can i give different colors for each bar based on value using this module

imrodmartin

Hi Suresh,

please see Jorge’s comment above dated 02 March 2018.

thanks

Akshay Nanasaheb Wayse

Hello,
I am following your complete process still it is not plotting chart.
Can you help me?

17
0
Would love your thoughts, please comment.x
()
x