JpGraph

Introduction

The purpose of this HowTo us to show how one can have one set of data displayed with two different scales that are still synchronized meaning that the tick marks are at identical positions.

One classic example of when this can be useful is to show temperature in both Celcius and Fahrenheit. Figure 1 below illustartes what we would like to accomplish.

Figure 1. Using two different scales to show the same set of data.

Creating two scales

Normally the autoscaling puts tick marks at "nice" positions that for example are multiples of 5,2,10 and so on. This would mean that it seems like the graph in Figure 1 with tick positions at 59 F and 68 F can not be autoscaled.

The simplest method of creating two scales as in the example above is to add a secondary Y-axis, add the same plot to that axis. This would then mean that the two axes would be identical. The magic now happens in the last step when we add a format callback method to the second Y-axis. This format callback will be applied to each label. All we have to do now is create a callback function that does the proper scale conversion.

This way also means that we have too chose one of the scales as the "master" which will be autoscaled with tick positoins at "nice" intervals.

Caveat

For the second scale one can add the same plot or one could create a new plot from the same data set. If the data set to be plotted is very large it can be advantagous to creta a new plot and set the line weight to 0 (zero). This way the line will not actually be plotted and that plto time is eliminated.

Examples

The script to create the graph in Figure 1 is given below.

<?php
include ("../jpgraph.php");
include ("../jpgraph_line.php");

// Callback function
function toFahrenheit($aVal) {
    return round(($aVal*9/5)+32,2);
}

$datay =array(2,3,8,19,7,17,6,22);

// Create the graph. 
$graph = new Graph(400,280);

// Slightly bigger margins than default to make room for titles
$graph->SetMargin(50,60,40,45);
$graph->SetMarginColor('white');

// Setup the scales for X,Y and Y2 axis
$graph->SetScale("intlin"); // X and Y axis
$graph->SetY2Scale("lin"); // Y2 axis

// Overall graph title
$graph->title->Set('Synchronized Y & Y2 scales');
$graph->title->SetFont(FF_ARIAL,FS_BOLD,12);

// Title for X-axis
$graph->xaxis->title->Set('Measurement');
$graph->xaxis->title->SetMargin(5);
$graph->xaxis->title->SetFont(FF_ARIAL,FS_NORMAL,11);

// Create the primary Y plot
$lplot = new LinePlot($datay);
$graph->yaxis->title->Set('Celcius (C)');
$graph->yaxis->title->SetMargin(5);
$graph->yaxis->title->SetFont(FF_ARIAL,FS_NORMAL,11);
// ... and add the plot to the Y-axis
$graph->Add($lplot);

// Create secondary Y2 scale 
$l2plot = new LinePlot($datay);
$l2plot->SetWeight(0); // Optimize
$graph->y2axis->title->Set('Fahrenheit (F)');
$graph->y2axis->title->SetMargin(5); // Some extra margin to clear labels
$graph->y2axis->title->SetFont(FF_ARIAL,FS_NORMAL,11);
$graph->y2axis->SetLabelFormatCallback('toFahrenheit');
$graph->y2axis->SetColor('navy');

// ... and add the plot to the Y2-axis
$graph->AddY2($l2plot);

$graph->Stroke();
?>

The same principle will of course also work with oethr plot variants, for example BarPlots. By making the first plot an instance of BarPlot the graph in Figure 2 can be created.

Figure 2. Using barplot with two different scales.

Note

Both these examples will be included in the Example directory for releases starting at 1.21