FusionCharts PHP Class API > Creating multiple charts in one page

While developing web pages or applications, we may need to display multiple charts on the same page. For example, reporting Weekly Sales Qunatity along with Revenue gives us a better insight. Let's see how we can accomplish this using FusionCharts PHP Class. The code below generates two Column 3D charts on the same page.

 

Before you go further with this page, we recommend you to please see the previous page "Creating First Chart " as we start off from concepts explained in that page.

 

<?php

  # Include FusionCharts PHP Class
  include('../Class/FusionCharts_Gen.php');


  //---------- Configuring First Chart ----------//
  # Create Column3D chart object
  $FC = new FusionCharts("Column3D","300","250");
  # set the relative path of the swf file
  $FC->setSWFPath("../FusionCharts/");

  # Store chart attributes in a variable
  $strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0";

  # Set chart attributes
  $FC->setChartParams($strParam);

  # Add chart values and category names for the First Chart
  $FC->addChartData("40800","name=Week 1");
  $FC->addChartData("31400","name=Week 2");
  $FC->addChartData("26700","name=Week 3");
  $FC->addChartData("54400","name=Week 4");
  //---------------------------------------------------------

  //---------- Configuring Second Chart ----------//
  # Create another Column3D chart object
  $FC2 = new FusionCharts("Column3D","300","250");
  # set the relative path of the swf file
  $FC2->setSWFPath("../FusionCharts/");

  # Store chart attributes in a variable
  $strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;decimalPrecision=0";

  # Set chart attributes
  $FC2->setChartParams($strParam);

  # Add chart values and category names for the second chart
  $FC2->addChartData("32","name=Week 1");
  $FC2->addChartData("35","name=Week 2");
  $FC2->addChartData("26","name=Week 3");
  $FC2->addChartData("44","name=Week 4");
  //--------------------------------------------------------

?>
<html>
  <head>
    <title>First Chart Using FusionCharts PHP Class</title>
    <script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
  </head>
  <body>

    <?
      # Render First Chart
      $FC->renderChart();

      # Render Second Chart
      $FC2->renderChart();

    ?>

  </body>
</html>
Let's go through the steps involved in this code:
  • Include FusionCharts_Gen.php.

  • Create object for the First Chart that shows weekly revenue report.

    $FC = new FusionCharts("Column3D","300","250");

  • Set relative path for the SWF file.

    $FC->setSWFPath("../FusionCharts/");

  • Set attributes for the first chart using setChartParams() function.

    $strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0";
    $FC->setChartParams($strParam);

  • Add data values for this chart.

    $FC->addChartData("40800","name=Week 1");
    $FC->addChartData("31400","name=Week 2");
    $FC->addChartData("26700","name=Week 3");
    $FC->addChartData("54400","name=Week 4");

  • Now, the same steps are repeated for the Second Chart, i.e., the 'units sold' chart. Create object for this chart.

    $FC2 = new FusionCharts("Column3D","300","250");

  • Set relative path for the SWF file.

    $FC2->setSWFPath("FusionCharts/");

  • Set attributes for the first chart using setChartParams() function.

    $strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;decimalPrecision=0";
    $FC2->setChartParams($strParam);

  • Add data values for the second chart.

    $FC2->addChartData("32","name=Week 1");
    $FC2->addChartData("35","name=Week 2");
    $FC2->addChartData("26","name=Week 3");
    $FC2->addChartData("44","name=Week 4");

  • Include FusionCharts.js.

  • Finally, render the 2 charts using renderChart() function.

    $FC->renderChart();
    $FC2->renderChart();
Please go through FusionCharts PHP Class API Reference section to know more about the functions used in the above code.
 
Here is the output. Both the charts have been rendered on same page.