On this page
Example 1: Creating opposite y-axis.
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
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion