2

I want to create a line graph using the Highcharts library which shows 3 series in a single chart. I have visualization API, views, highcharts library etc. installed in my Drupal website.

I succeeded already in creating a chart which shows only 1 serie, but couldn't get it to work with 3 series yet.

The X-axis is taxonomy terms and Y-axis is the value of nodes on this term (relationship: Taxonomy terms on node).

The view I created has a filter and it filters the views with 3 content types I wanted. So I want to show these 3 content types as 3 different series (line charts), instead of just 1 line chart with everything together.

Here are some relevant details of the view I created:

enter image description here

This is the line chart I was able to create so far:

enter image description here

Here is what I want to achieve (using data that are different though):

enter image description here

How can I visualize my 3 series (for 3 different content types) in a chart similar to the above one?

Improve this question

2 Answers 2

Reset to default
1

After diving into deep on visualization with Drupal, Charts module gives us the opportunity to do this, either by using the Views integration of Charts (to create charts without coding PHP snippets), or by using the Charts API (used as a developer module that provides a unified API for the integration of various charting solutions into Drupal).

This is from the Readme.txt file, incuded with the Charts module:

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

Improve this answer
2
  • I found a problem with the chart add-on. If my first chart (a page for example) has values for x: A, C and D and then my add-on chart has values for B, C and D, the global chart doesn't show A, B, C, D but instead, it shows A, C and D (parent chart). This is because views doesn't treat "No results" has zero.
    – zephirus
    Commented Oct 27, 2015 at 17:08
  • About the prior comment from @zephirus : refer to my answer at drupal.stackexchange.com/questions/175174/… about how to address that problem.
    – Pierre.Vriens
    Commented Nov 12, 2015 at 14:11
1

Here are some additions to the previous (accepted) answer:

  • Even though the question is related to HighCharts as the charting library (one of the engine used by the Charts module to actually render charts), it should also work for anybody using the (interactive) Google Charts library instead. Either of both libraries have their advantages and disadvantages, simply pick the one that best fits your needs/requirements. And remember that at any time you should be able to switch between either library, though there should not be any significant difference between the rendered charts.

  • The content of the Readme.txt file quoted in the previous answer, is now also included in the Community Documentation about Charts, i.e. within Steps to create charts using the views UI. That community documentation also includes a subsection with Charts HowTos.

  • Whenever using the Views integration of the Charts module, keep this golden rule in mind: 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.

Disclosure: I'm a co-maintainer of the Charts module (+ author of its community documentation),
I hope this does not violate the site's policy on self-promotion.

Improve this answer
2
  • Thanks for your answer. The golden rule you wrote is very important. If you couldn't show your views as table then you couldn't show it as chart.
    – herci
    Commented Jul 26, 2015 at 9:59
  • Can't find any documentation on creating multi-series charts via API, i.e. what would be the structure of the render array (Drupal 8).
    – Meglio
    Commented Nov 12, 2017 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.