4

I need to create multiple line charts in the same chart. I have a year column, a product column, and a consumer column. I can plot product and year or consumer and year, but when I use all three columns I get a chart that puts both product and consumer data on the same line.

I am using the Charts module, with the Highcharts library as its charting engine and its views integration.

How can I get a product and consumer line to appear on the same graph? I was hoping for the chart to look like Preview 6 here: https://www.drupal.org/node/2426177#preview6

Here is what my chart looks like.

Data:

data

Products:

productOptions

productChart

Consumer:

consumerOptions

consumerChart

Both:

bothOptions

bothChart

2

The way to get this to work (to put those charts together), is to work with what's called "parent charts" and "child charts", as explained within Steps to create charts using the views UI. More specifically what's detailed within the paragraph "Creating Multiple Series and Combo Charts in the UI". Here is a quote from it:

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

Refer to "Combination chart without aggregation" for an online demo of such chart. Here is a quote from it:

The chart below (created using the "charts" module) shows a combination chart about all nodes of content type "Article", which has these fields with these "machine names" (+ values):

  • "field_optionlist" (with some select list values, such as the "year")
  • "field_free_format_text" (assumed to contain some numeric values), with Y-axis left, is used in the parent chart.
  • "field_free_format_nr" (assumed to contain some numeric values), with Y-axis right, is used in the child chart.

This online demo consists of a combination of 2 "Area charts". If you only change the "settings" for each of the 2 charts to "Line chart" (within "format" of each view), you'd get a similar set of combined charts but shown as line charts instead. Here is the view (in views export format) that created that chart (using "Line chart" as the format for both charts):

$view = new view();
$view->name = 'combination_chart_without_using_aggregation';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Combination chart without using aggregation';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Combination chart without aggregation';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '10';
$handler->display->display_options['style_plugin'] = 'chart';
$handler->display->display_options['style_options']['type'] = 'line';
$handler->display->display_options['style_options']['label_field'] = 'body';
$handler->display->display_options['style_options']['data_fields'] = array(
  'field_free_format_text' => 'field_free_format_text',
  'body' => 0,
);
$handler->display->display_options['style_options']['field_colors'] = array(
  'body' => '#2f7ed8',
  'field_free_format_text' => '#233a99',
);
/* Header: Global: Text area */
$handler->display->display_options['header']['area']['id'] = 'area';
$handler->display->display_options['header']['area']['table'] = 'views';
$handler->display->display_options['header']['area']['field'] = 'area';
$handler->display->display_options['header']['area']['content'] = 'The chart below (created using the "charts" module) shows a combination chart about all nodes of content type "Article", which has these fields with these "machine names" (+ values):

- "field_optionlist" (with some select list values, such as the "year")
- "field_free_format_text" (assumed to contain some numeric values), with Y-axis left, is used in the parent chart.
- "field_free_format_nr" (assumed to contain some numeric values), with Y-axis right, is used in the child chart.';
$handler->display->display_options['header']['area']['format'] = 'filtered_html';
/* Field: Content: Free Format Text */
$handler->display->display_options['fields']['field_free_format_text']['id'] = 'field_free_format_text';
$handler->display->display_options['fields']['field_free_format_text']['table'] = 'field_data_field_free_format_text';
$handler->display->display_options['fields']['field_free_format_text']['field'] = 'field_free_format_text';
$handler->display->display_options['fields']['field_free_format_text']['label'] = 'Products';
/* Field: Content: OptionList */
$handler->display->display_options['fields']['field_optionlist']['id'] = 'field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['table'] = 'field_data_field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['field'] = 'field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['label'] = 'Year';
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'article' => 'article',
);
/* Filter criterion: Content: OptionList (field_optionlist) */
$handler->display->display_options['filters']['field_optionlist_value']['id'] = 'field_optionlist_value';
$handler->display->display_options['filters']['field_optionlist_value']['table'] = 'field_data_field_optionlist';
$handler->display->display_options['filters']['field_optionlist_value']['field'] = 'field_optionlist_value';
$handler->display->display_options['filters']['field_optionlist_value']['value'] = array(
  13 => '13',
  14 => '14',
  15 => '15',
);

/* Display: Chart */
$handler = $view->new_display('page', 'Chart', 'page');
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'chart';
$handler->display->display_options['style_options']['type'] = 'line';
$handler->display->display_options['style_options']['xaxis_title'] = 'Year';
$handler->display->display_options['style_options']['yaxis_title'] = 'Nr of Products';
$handler->display->display_options['style_options']['label_field'] = 'field_optionlist';
$handler->display->display_options['style_options']['data_fields'] = array(
  'field_free_format_text' => 'field_free_format_text',
  'field_optionlist' => 0,
);
$handler->display->display_options['style_options']['field_colors'] = array(
  'field_free_format_text' => '#7b0d49',
  'field_optionlist' => '#8bbc21',
);
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['path'] = 'combinatuion_chart_with_no_aggregation';

/* Display: Chart add-on */
$handler = $view->new_display('chart', 'Chart add-on', 'chart_1');
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'chart_extension';
$handler->display->display_options['style_options']['type'] = 'line';
$handler->display->display_options['style_options']['label_field'] = 'field_optionlist';
$handler->display->display_options['style_options']['data_fields'] = array(
  'field_free_format_nr' => 'field_free_format_nr',
  'field_optionlist' => 0,
);
$handler->display->display_options['style_options']['field_colors'] = array(
  'field_optionlist' => '#2f7ed8',
  'field_free_format_nr' => '#006d1a',
);
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['defaults']['fields'] = FALSE;
/* Field: Content: OptionList */
$handler->display->display_options['fields']['field_optionlist']['id'] = 'field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['table'] = 'field_data_field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['field'] = 'field_optionlist';
$handler->display->display_options['fields']['field_optionlist']['label'] = 'Year';
/* Field: Content: Free Format Nr */
$handler->display->display_options['fields']['field_free_format_nr']['id'] = 'field_free_format_nr';
$handler->display->display_options['fields']['field_free_format_nr']['table'] = 'field_data_field_free_format_nr';
$handler->display->display_options['fields']['field_free_format_nr']['field'] = 'field_free_format_nr';
$handler->display->display_options['fields']['field_free_format_nr']['label'] = 'Enduser Price';
$handler->display->display_options['fields']['field_free_format_nr']['settings'] = array(
  'thousand_separator' => '',
  'prefix_suffix' => 1,
);
$handler->display->display_options['parent_display'] = 'page';
$handler->display->display_options['inherit_yaxis'] = '0';
  • That worked Pierre. I added a Chart add-on and now I see both charts in the parent display. Thanks. – splunge Mar 22 '16 at 14:08
  • There is one problem here. When trying to do an area chart there doesn't seem to be a way to make a chart come to the front--no way to change the order. So one of my area charts remains in the background behind the other three charts. – splunge Mar 22 '16 at 17:26
  • Solution to the problem (or should I say "Answer to the question"?) changes the problem (or should I say "changes the Question"?) ... ie 3 or more charts and area instead of line charts. Anyway I updated my answer, and also tuned the online demo. As you can see in the demo now, for 2 area charts it works as it should (I think). Can you check the results you get with only (to test) 2 such charts? Other thought: can you (temporary) adapt your colors to ensure you have "contrasting" colors (as in the demo now)? Also: are you using a left and a right axis (as in the demo sample)? – Pierre.Vriens Mar 22 '16 at 18:12
  • Thanks Pierre. I think the problem was the difference in the colors and the fact that the lowest value area is covered by three other layers of colors making it hard to see. Would you know if these charts can create multiple area charts without overlays? In other words I am looking for something like this canvasjs.com/wp-content/uploads/2013/04/… as opposed to this canvasjs.com/wp-content/uploads/2013/04/…. Another issue: mousing over the lines in each chart gives pop up info but not when charts are combined. – splunge Mar 23 '16 at 16:43
  • I ran out of time fixing the links. This is the type of area chart I would like (canvasjs.com/wp-content/uploads/2013/04/…) as opposed to (canvasjs.com/wp-content/uploads/2013/04/…) – splunge Mar 23 '16 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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