FusionCharts v3 Documentation

You are viewing documentation for an older version. For current documentation - click here.

FusionCharts PHP Class API > Creating Scatter - Bubble Chart

Now, let's create a simple scatter chart that will visually display the Server Performance with reference to Server-Load against Response Time. Server Load and Response Time will be plotted against X-axis and Y-axis respectively.
The sample data that we intend to plot can be tabularized as under:

Server1		Server2
Server Load(TPS)	Response Time(Sec)	Server Load(TPS)	Response Time(Sec)
21	2.4	23	1.4
32	3.5	29	1.5
43	2.5	33	1.5
48	4.1	41	1.1

Let's see how to use FusionCharts PHP Class to plot this data into a Scatter chart:

<?php
           # Include FusionCharts PHP Class
           include("../Class/FusionCharts_Gen.php");
          # Create Scatter chart Object 
           $FC = new FusionCharts("Scatter","300","250");
  
           # set the relative path of the SWF file
           $FC->setSwfPath("../FusionCharts/");
          # Define chart attributes
           $strParam="caption=Server Performance;yAxisName=Response Time (sec);xAxisName=Server Load (TPS)";
  
           # Set chart attributes
           $FC->setChartParams($strParam);
  
           # Add Category, 1st parameter take label and 2nd parameter takes x axis value 
           # as parameter list 
           $FC->addCategory("10","x=10;showVerticalLine=1");
           $FC->addCategory("20","x=20;showVerticalLine=1");
           $FC->addCategory("30","x=30;showVerticalLine=1");
           $FC->addCategory("40","x=40;showVerticalLine=1");
           $FC->addCategory("50","x=50");
  
           # Add a new dataset 
           $FC->addDataSet("Server 1","anchorRadius=6");
           # Add chart data for the above dataset
           # where 1st parameter for X axis value
           # 2nd parameter take Y axis as parameter list
           # e.g. y=27
           $FC->addChartData("21","y=2.4");
           $FC->addChartData("32","y=3.5");
           $FC->addChartData("43","y=2.5");
           $FC->addChartData("48","y=4.1");
  
           # Add another dataset
           $FC->addDataSet("Server 2","anchorRadius=6");
           # Add chart data for the above dataset
           # where 1st parameter for X axis value
           # 2nd parameter take Y axis as parameter list
           # e.g. y=30
           $FC->addChartData("23","y=1.4");
           $FC->addChartData("29","y=1.5");
           $FC->addChartData("33","y=1.5");
           $FC->addChartData("41","y=1.1");
  
        ?>
  <html>
     <head>
        <title>Scatter Chart : FusionCharts PHP Class</title>
        <script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
     </head>
     <body>
         <?php
              # Render Chart 
              $FC->renderChart();
          ?>
     </body>
 </html>

Let's analyze the steps involved in the above code:

We include FusionCharts_Gen.php in the program. This file contains FusionCharts PHP Class codes.
```
include('../Class/FusionCharts_Gen.php');
```

We create a Scatter chart object and set relative path to the chart SWF file.

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

We store all desired chart attributes in the $strParam variable and set chart attributes using setChartParams() function.
```
$FC->setChartParams($strParam);
```

Now, we add X Axis categories using addCategory() function. The first parameter takes label and the second parameter takes x axis value and option to show a vertical line along with this category.

$FC->addCategory("10","x=10;showVerticalLine=1");
$FC->addCategory("20","x=20;showVerticalLine=1");
$FC->addCategory("30","x=30;showVerticalLine=1");
$FC->addCategory("40","x=40;showVerticalLine=1");
$FC->addCategory("50","x=50");

Thereafter, we add a dataset and provide chart data with addChartData() function. Please note that for Scatter chart the first parameter would take x value and the second parameter takes y value of a dataplot as an attribute. We also can pass other dataplot attributes in the second parameter. The attributes must be delimiter separated.
```
$FC->addDataSet("Server 1","anchorRadius=6");
$FC->addChartData("21","y=2.4");
$FC->addChartData("32","y=3.5");
$FC->addChartData("43","y=2.5");
$FC->addChartData("48","y=4.1");         
```

Now, we create another dataset and provide chart data with addChartData() function.

$FC->addDataSet("Server 2","anchorRadius=6");
$FC->addChartData("23","y=1.4");
$FC->addChartData("29","y=1.5");
$FC->addChartData("33","y=1.5");
$FC->addChartData("41","y=1.1");

Finally, we include FusionCharts.js - FusionCharts JavaScript Embedding Class and
Display the chart using renderChart() function.
```
$FC->renderChart();
```

Here is the Scatter chart that our FusionCharts PHP Class renders:

Please go through FusionCharts PHP Class API Reference section to know more about the functions used in the above code.

Now, let's create yet another chart called Bubble chart that will visually display the Revenue earned in two consecutive months (Previous Month and Current Month) for the No. of products. It will also depict Market share of the related No. of products.
The sample data that we intend to plot can be tabularized as under:

Previous Month			Current Month
No. of Products	Revenue	Market Share	No. of Products	Revenue	Market Share
20	72000	8	18	22000	3
43	42000	5	35	62000	5
70	90000	2	50	55000	10
90	75000	4	70	25000	3

Let's see how to use FusionCharts PHP Class to plot this data into a Bubble chart:

<?php
           # Include FusionCharts PHP Class
           include("../Class/FusionCharts_Gen.php");
           # Create Bubble chart Object 
             $FC = new FusionCharts("bubble","450","350");
           # set the relative path of the SWF file
             $FC->setSwfPath("../FusionCharts/");
           # Define chart attributes
             $strParam="caption=Monthly Sales;xAxisName=Number of Products;yAxisName=Revenue;
              numberPrefix=$;decimalPrecision=0;formatNumberScale=1";
             # Set chart attributes
             $FC->setChartParams($strParam);
             
             # Add Category, 1st parameter take label and 2nd parameter takes x axis value    
             # as parameter list    
             $FC->addCategory("0","x=0;showVerticalLine=1");
             $FC->addCategory("20","x=20;showVerticalLine=1");
             $FC->addCategory("40","x=40;showVerticalLine=1");
             $FC->addCategory("60","x=60;showVerticalLine=1");
             $FC->addCategory("80","x=80;showVerticalLine=1");
             $FC->addCategory("100","x=100;showVerticalLine=1");
          
             # Add a new dataset
             $FC->addDataSet("Previous Month");
             # Add chart data for the above dataset
             # where 1st parameter for X axis value
             # 2nd parameter take Y and Z axis as parameter list
             # e.g. y=12200;z=10
             $FC->addChartData("20","y=72000;z=8");
             $FC->addChartData("43","y=42000;z=5");
             $FC->addChartData("70","y=90000;z=2");
             $FC->addChartData("90","y=75000;z=4");
  
             # Add another dataset
             $FC->addDataSet("Current Month");
             # Add chart data for the above dataset
             # where 1st parameter for X axis value
             # 2nd parameter take Y and Z axis as parameter list
             # e.g. y=12200;z=10
             $FC->addChartData("18","y=22000;z=3");
             $FC->addChartData("35","y=62000;z=5");
             $FC->addChartData("50","y=55000;z=10");
             $FC->addChartData("70","y=25000;z=3");
        ?>
          <html>
             <head>
                <title>Bubble Chart : Using FusionCharts PHP Class</title>
                <script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
             </head>
             <body>
            <?php
                # Render Chart 
                $FC->renderChart();
            ?>
            </body>
        </html>

Let's analyze the steps involved in the above code:

We include FusionCharts_Gen.php.

include('../Class/FusionCharts_Gen.php');

Then, we create a Bubble chart object and set relative path to the chart SWF file.
```
$FC = new FusionCharts("bubble","450","350");
$FC->setSWFPath("../FusionCharts/");
```
We store all desired chart attributes in the $strParam variable and set chart attributes using setChartParams() function.
```
$FC->setChartParams($strParam);
```

Now, we add X Axis categories using addCategory() function. The first parameter takes label and the second parameter takes x axis value and option to show a vertical line along with this category.

$FC->addCategory("0","x=0;showVerticalLine=1","");
$FC->addCategory("20","x=20;showVerticalLine=1","");
$FC->addCategory("40","x=40;showVerticalLine=1","");
$FC->addCategory("60","x=60;showVerticalLine=1","");
$FC->addCategory("80","x=80;showVerticalLine=1","");
$FC->addCategory("100","x=100;showVerticalLine=1","");

Thereafter, we add a dataset and provide chart data with addChartData() function. Please note that for Bubble chart the first parameter would take x value and the second parameter takes y and z values of a dataplot as attribute list separated by delimiter. We also can pass other dataplot attributes in the second parameter. The attributes must be delimiter separated.
```
$FC->addDataSet("Previous Month");
$FC->addChartData("20","y=72000;z=8");
$FC->addChartData("43","y=42000;z=5");
$FC->addChartData("70","y=90000;z=2");
$FC->addChartData("90","y=75000;z=4");
```

Now, we add another dataset and use addChartData() function to add data to the dataset.

$FC->addDataSet("Current Month");
$FC-  >addChartData("18","y=22000;z=3");
$FC->addChartData("35","y=62000;z=5");
$FC->addChartData("50","y=55000;z=10");
$FC->addChartData("70","y=25000;z=3");

Finally, we include FusionCharts.js - FusionCharts JavaScript Embedding Class and
Display the chart using renderChart() function.
```
$FC->renderChart();
```

Here is the Bubble chart that our FusionCharts PHP Class renders: