Steps to create charts using the views UI

Last updated on
11 March 2021

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

This documentation needs work. See "Help improve this page" in the sidebar.

Configure the default settings

The charts module provides a configuration page at admin/config/content/charts, which can be used to set site-wide defaults, for example to set the default color scheme.

Creating Charts using the Views UI

Create a new view

Visit admin/structure/views/add and select the display format of "Unformatted List" or "Table" for the new page or block. AT THIS STEP, DO NOT SELECT "CHART," as that will cause a validation error because your data field has not been set.

(Optional) Enable aggregation on the view

Depending on what you want to chart, you may need to enable aggregation on the view. Under the right column of the settings, there is a section for "Use aggregation." If you need aggregated values, enable this setting.

Add a label field

When creating a view using fields, the label of the entity being queried is provided by default (e.g. "Title" (content) or "Name" (taxonomy term)). However, if you do not want the default entity label as your Charts label field, add a new "Label" field. Under the "Fields" section, add a field you would like to be used as labels along one axis of the chart (or slices of the pie). If aggregating, set the "Aggregation type" setting to "Group results together."

Add data field(s)

Now a second field which will be used to determine the data values. Usually this will be an ID field, such as NID or CID. The label you give this field will be used in the chart's legend to represent this series. After adding the
field, set the "Aggregation type" for this field to "Count". Do this again for each different quantity you would like to chart. Note that some charts (e.g. Pie) only support a single data column.

Configure the chart display

Chart created with Vieuws UI with an exposed date filter
Click on the "Settings" link in the Format section to configure the chart.

Select your chart type.

Some options may not be available to all chart types and will be adjusted based on the type selected.

Preview the view

To ensure that live preview is available (that is to not encounter something like 'preview doesn't work' ...), make sure that the fix as in #2050871-1: Make the Views preview work is enabled, e.g. by using the most recent 7.x-2.x-dev version.

If that fix is not enabled, the best possible workaround for a preview of the view, is to open a saved version of the view in a different browser window. That should show the impact of your changes.

Save the view

Obvious, but just make sure to not forget to do so ...

Bonus tip

You may find it easier to start with a "Table" display and convert it to a chart display after setting up the data. It can be easier to visualize what the result of the chart will be if it's been laid out in a table first.

Creating Multiple Series and Combo Charts in the UI

When using Views to build your charts, you may find it difficult to retrieve more than a single set of data generated by a COUNT() query. For example if you wanted to retrieve the age of all your site users, but display "Male" and "Female" values in a column chart at the same time, constructing the underlying table of data is quite difficult.

To solve this problem, you can combine multiple charts on top of each other. The "parent" chart provides the global information, such as the height, width, title, and other properties. Charts that are "children" provide only data and (optionally) a secondary axis. After you've assembled the first series of data in your chart according to the instructions in the Creating Charts using the Views UI section, add a new display to the same view of the type "Chart Add-on". The "Chart Add-on" type is added the same way you would add a new Page or Block display, from the "+ Add" menu at the top of the view configuration.

After this new display has been added, find the setting for "Combine with parent chart" and change this value to point at the parent chart you have already assembled. Then adjust the settings for the child chart to pull in different data (often by overriding the filter settings). Now you can go back to your parent display, and see that the results from the child chart have been merged into the results from the parent chart. You can even use this approach to combine different types of charts, such as a line chart over the top of a column chart. Note that not all chart types can be combined together and invalid combinations may cause your chart to throw errors.

Use sub-charts to create dual-Y-axis charts

The charts module supports dual-Y-axis through the "sub-chart" feature. An image search results in plenty of usage examples of dual-Y-axis charts.

Following these steps to create such charts:

  1. Make a chart on the first property you would like to graph, using line, point, or column charts using Views.
  2. On the same view, add a new display of the type "sub-chart" (EDIT: probably merged into "Chart add on" display and 2nd setting for Y-axis?).
  3. On this new display, in the middle column there are two options that are important: set the "Combine with parent chart" option to the first display you configured. And then right below that option, change the "Axis settings" from "Use primary Y-axis" to "Create secondary axis".
  4. Change the options on this second display to make whatever differences you like. You can even combine line charts with column and point charts! You can add as many "sub-charts" as you want, but Charts module only supports 2 Y-axes.

Help improve this page

Page status: Needs work

You can: