Dual Y Axes Charts

Sometimes you might need to show some multiple series of data on the same chart, but with very different scales. For example, you want to show the number of car sales with the total revenue.

Take a look at this example. You can't even see the second series because it's so small:

<?php

class SampleDashboard extends StandaloneDashboard { public function buildDashboard(){ $chart = new ChartComponent("my_first_chart"); $chart->setCaption("Car Sales figures"); $chart->setYAxis("Sales", array( "numberPrefix" => "$", "numberHumanize" => true )); $chart->setDimensions (4, 4); $chart->setLabels (["Jan", "Feb", "Mar"]); $chart->addSeries ("sales", "Sales", [1355340, 2214134, 1854313], array( "seriesDisplayType" => "column", "numberPrefix" => "$" )); $chart->addSeries ("car_quantity", "Quantity", [14, 19, 17], array( ));

$this->addComponent ($chart);

} }

$db = new SampleDashboard(); $db->renderStandalone();

However, we still want to see some correlation. For this we use RazorFlow's Dual Axis system.

You can create a dual axes chart by calling the addYAxis function on the chart component. Currently, only column, line and area charts can have dual axes. By default, the chart has a left axis, when the addYAxis is called it adds a right axis to the chart. The addYAxis function is similar to the setYAxis function with one exception. The addYAxis function has an extra parameter id associated with it. It looks like this,

    $chart->addYAxis("quantity", "Quantity", array(
    ));
  1. The first parameter is the id of the axis.
  2. The second parameter is the name of the Y Axis.
  3. The third optional parameter is an object containing Standard number formatting properties.

To tell a series to use the new axis instead of the primary axis, set the unique id of new axis for the yAxis parameter in the config options in the addSeries function.

    $chart->addSeries ("car_quantity", "Quantity", [14, 19, 17], array(
      "yAxis" => "quantity"
    ));

Complete example

<?php

class SampleDashboard extends StandaloneDashboard { public function buildDashboard(){ $chart = new ChartComponent("my_first_chart"); $chart->setCaption("Car Sales figures"); $chart->setYAxis("Sales", array( "numberPrefix" => "$", "numberHumanize" => true )); $chart->addYAxis("quantity", "Quantity", array( "numberPrefix" => "#" )); $chart->setDimensions (4, 4); $chart->setLabels (["Jan", "Feb", "Mar"]); $chart->addSeries ("sales", "Sales", [1355340, 2214134, 1854313], array( "seriesDisplayType" => "column", "numberPrefix" => "$" )); $chart->addSeries ("car_quantity", "Quantity", [14, 19, 17], array( "yAxis" => "quantity" ));

$this->addComponent ($chart);

} }

$db = new SampleDashboard(); $db->renderStandalone();