There are many ways to present data to your readers. One example would be a table or a list. Sometimes you would rather prefer to enhance such data with a graphical 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. Let’s start!
Step #1. Install the Charts Module and Enable the Library
- Download the Charts module with the method you prefer:
- Click Extend.
- Enable in the Modules page the Charts module and its submodule Google Charts.
- Click Install:
- In your file manager, go to modules/contrib/charts/modules/charts_google. You will see the following folder structure:
- Use the Terminal of your computer and go to the charts_google folder. There you have to run the following command:
The use of Composer is mandatory for this step. If you are new to Composer, take a look at the Drupal 8 Composer and Configuration Management class from OSTraining.
You definitely will need Composer in the future, not just for this example. After that, your folder structure should look like this:
- Click Configuration > Content authoring > Charts default configuration.
- Select Google Charts as the default charting library.
- Click Save defaults:
Step #2. Create a Content Type
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 and create your content type:
- Add the required fields according to your data:
- At the end, you should have something like this:
- Now that you have your content type in place, proceed to create the nodes, i.e. each individual country in this case:
Step #3. Create the View
- 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.
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. 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!