Example 1: Creating opposite y-axis.

Last updated on
30 April 2025

Let's say you want to plot two variables. Since the values of the two variables vary in range and/or type, you want to create a secondary axis for the second variable.

First, you need to tell highchartTable which table column needs to have a vertical (aka y) axis on the opposite, i.e. right-hand, side.
To make the second variable go on the opposite axis, include in your settings array:

  'yaxis-2-opposite' => TRUE,

An example of a complete settings array is shown on the previous page.

Second, you need to tell highchartTable which column is y-axis number 1. To do so, your table header cell for y-axis number 1 must have the following property: data-graph-yaxis="1"

Like so:

  <table class="my-table">
    <thead>
      <tr>
        <th data-graph-yaxis="1">Variable 1</th>
        <th>Variable 2</th>
      </tr>
    </thead>
    <tbody>
      ...
    </tbody>
  </table>

Views-generated tables

What follows is just one way of altering a views table to include the above property.
If your table is generated by a view, you need to theme the views output.

In your themes template folder, copy views-view-table.tpl.php from the views module.
Make an extra copy and rename it to match the machine name of the view and it's display,
for example, views-view-table--my-view--my-display.tpl.php.

The table header is generated like so

  <thead>
    <tr>
      <?php foreach ($header as $field => $label): ?>
        <th <?php if ($header_classes[$field]) { print 'class="'. $header_classes[$field] . '" '; } ?>>
          <?php print $label; ?>
        </th>
      <?php endforeach; ?>
    </tr>
  </thead>

Let's say that your first variable has a label called 'Variable 1'. Add the following change to the table header.

  <thead>
    <tr>
      <?php foreach ($header as $field => $label): ?>
        <th <?php if ('Variable 1' == $label) { print 'data-graph-yaxis="1"'; }; if ($header_classes[$field]) { print 'class="'. $header_classes[$field] . '" '; } ?>>
          <?php print $label; ?>
        </th>
      <?php endforeach; ?>
    </tr>
  </thead>

Help improve this page

Page status: Not set

You can: