You are viewing documentation for an older version. For current documentation - click here.
FusionCharts PHP Class API > Creating Combination Chart

Combination chart has two Y-axes. The Y-axis on the left hand side is called Primary Y-Axis and that on the right hand side is called Secondary Y-Axis. Combination charts are used when we intend to compare two different types of data on the same chart, e.g., if we want to plot Weekly Sales Revenue of two consecutive months and total units sold on the same chart, we have to use a Combination Chart. See the image below and note that the two Y-axes are representing different data units.

 
Let's add some more data to the existing Table for Multi-series chart. We would add a column that tabulates Total Quantity Sales.
 
Week
Current Month
Previous Month
 
 
Sales
Sales
Total Quantity
Week 1
$40800
$38300
 64
Week 2
$31400
$28400
 70
Week 3
$26700
$15700
 52
Week 4
$54400
$48100
 81
 
Before you go further with this page, we recommend you to please see the previous pages Creating First Chart & Creating Multi-series chart as we start off from concepts explained in that page.

Here is the code that builds up this Combination chart:

 
<?php
          # Include FusionCharts PHP Class
           include('../Class/FusionCharts_Gen.php');
          # Create Column 3D + Line Dual Y-Axis Combination Chart 
           $FC = new FusionCharts("MSColumn3DLineDY","350","300");        
           # Set the relative path of the SWF file
           $FC->setSWFPath("../FusionCharts/");  
           #  Store chart attributes in a variable 
           $strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;
           pYAxisName=Revenue;sYAxisName=Total Quantity;numberPrefix=$;sNumberSuffix= U";
           #  Set chart attributes
           $FC->setChartParams($strParam);          
           # Add  category names
           $FC->addCategory("Week 1");
           $FC->addCategory("Week 2");
           $FC->addCategory("Week 3");
           $FC->addCategory("Week 4");
          # Add a new dataset with dataset parameters 
           $FC->addDataset("This Month","showValues=0"); 
          # Add chart data for the above dataset
           $FC->addChartData("40800");
           $FC->addChartData("31400");
           $FC->addChartData("26700");
           $FC->addChartData("54400");
          # Add another dataset with dataset parameters 
           $FC->addDataset("Previous Month","showValues=0"); 
          # Add chart data for the second dataset
           $FC->addChartData("38300");
           $FC->addChartData("28400");
           $FC->addChartData("15700");
           $FC->addChartData("48100");
          # Add third dataset for the secondary axis
           $FC->addDataset("Total Quantity","parentYAxis=S"); 
          # Add  data values for the secondary axis 
           $FC->addChartData("64");
           $FC->addChartData("70");
           $FC->addChartData("52");
           $FC->addChartData("81");
      ?> 
   <html>
      <head>
         <title>First Chart Using FusionCharts PHP Class</title>
         <script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
      </head>
      <body>
            <?php
                 # Render Chart
                 $FC->renderChart();
             ?>
      </body>
 </html>

As you find in the above code, creating Combination charts is similar to creating Multi-Series charts. Here too, there are multiple datasets. Some datasets are specified for primary Y-Axis and some conform to the Secondary Y-Axis.  We need to specify which dataset belongs to which Y-Axis. Let's see how we did that in the following steps.

  • We include FusionCharts_Gen.php.

  • We create Multiseries Column 3D - Line Combination chart object and set relative path to SWF file.

    $FC = new FusionCharts("MSColumn3DLineDY","350","300"); 
    $FC->setSWFPath("../FusionCharts/");

  • We store chart attributes in $strParam variable :

    $strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;pYAxisName=Revenue;
sYAxisName=Total Quantity;numberPrefix=$;sNumberSuffix= U";

    Combination charts have 2 Y-axis -Parent (p) and Secondary (s). So we have specified names for both of them. Moreover, using sNumberSuffix, we set the number suffix for secondary Y Axis.

  • We set these chart attributes calling setChartParams()

    $FC->setChartParams($strParam);

  • Next, like in Multi-series charts we add categories :

    $FC->addCategory("Week 1");
    $FC->addCategory("Week 2");
    $FC->addCategory("Week 3");
    $FC->addCategory("Week 4");

  • We add the first dataset 'This Month' for primary Y-Axis. If we do not specify the Y-Axis the dataset adheres to, the chart automatically sets it to primary Y-Axis. 

    $FC->addDataset("This Month","showValues=0"); 
    $FC->addChartData("40800");
$FC->addChartData("31400");
    $FC->addChartData("26700");
    $FC->addChartData("54400");

  • Again, we add another dataset 'Previous Month' for primary Y-Axis and set its attributes and data values.

    $FC->addDataset("Previous Month","showValues=0"); 
    $FC->addChartData("38300");
    $FC->addChartData("28400");
    $FC->addChartData("15700");
    $FC->addChartData("48100");

  • Now, we add the third dataset, this one for Secondary Y-axis and its data values. Here, we specify the Y-Axis passing the dataset attribute parentYAxis=S. 

    $FC->addDataset("Total Quantity","parentYaxis=S"); 
    $FC->addChartData("64");
    $FC->addChartData("70");
    $FC->addChartData("52");
    $FC->addChartData("81");

  • Finally, we add FusionCharts.js and

  • Render the chart : 

    $FC->renderChart();
 
Please go through FusionCharts PHP Class API Reference section to know more about the functions used in the above code.

This code renders the Combination Chart that we needed.