|
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("../Class/FusionCharts_Gen.php");
$FC = new FusionCharts("Scatter","300","250");
$FC->setSwfPath("../FusionCharts/");
$strParam="caption=Server Performance;yAxisName=Response Time (sec);xAxisName=Server Load (TPS)";
$FC->setChartParams($strParam);
$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");
$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");
$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");
?>
<html>
<head>
<title>Scatter Chart : FusionCharts PHP Class</title>
<script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
</head>
<body>
<?php
$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 Nonth |
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("../Class/FusionCharts_Gen.php");
$FC = new FusionCharts("bubble","450","350");
$FC->setSwfPath("../FusionCharts/");
$strParam="caption=Monthly Sales;xAxisName=Number of Products;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0;formatNumberScale=1";
$FC->setChartParams($strParam);
$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");
$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");
$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");
?>
<html>
<head>
<title>Bubble Chart : Using FusionCharts PHP Class</title>
<script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
</head>
<body>
<?php
$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: |
 |