Loading
Different Ways of Loading Data in PHP
FusionCharts PHP Wrapper can be downloaded from here.
The FusionCharts PHP wrapper lets you load data for a chart using:
In this section, you will be shown how the FusionCharts PHP wrapper uses each of these methods to generate charts.
There are two more ways for loading data - using the JSON URL and using the XML URL. These methods, however, are similar to using static strings. The only difference is that the data is loaded from a separate .json or .xml file. The URLs of the file is then passed as the value for the data source parameter of the constructor. In case of JSON data, jsonurl is passed as the value for the data format parameter; for XML data, it is xmlurl.
Loading Data from a Static JSON String
An area chart, the data for which is loaded from a static JSON string, is shown below:
FusionCharts will load here..
The data structure needed to render the above chart is given below:
<?php
/*
Include the `fusioncharts.php` file that contains functions to embed the charts.
*/
include("includes/fusioncharts.php");
?>
<html>
<head>
<title>FusionCharts XT - Simple Area 2D Chart with JSON Data</title>
<!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
<script src="fusioncharts/fusioncharts.js"></script>
</head>
<body>
<?php
/*
Create a `area2DChart` chart object using the FusionCharts PHP class constructor. Syntax for the constructor is `FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "data format", "data source")`. To load data from a JSON string, `json` is passed as the value for the data format parameter of the constructor. The actual JSON data for the chart is passed as a string to the constructor.
*/
$area2DChart = new FusionCharts("Area2D", "myFirstChart" , 600, 300, "chart-1", "json",
'{
"chart": {
"caption": "Sales of Liquor",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Sales (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"plotBorderAlpha": "10",
"usePlotGradientColor": "0",
"plotFillAlpha": "50",
"showXAxisLine": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "1",
"showAlternateHGridColor": "0",
"captionFontSize": " 14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
" toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [{
"label": " Mon",
" value": "4123"
}, {
"label": "Tue",
"value": " 4633"
}, {
"label": "Wed",
"value": "5507"
}, {
"label": "Thu",
"value": "4910"
}, {
"label": "Fri",
"value": "5529"
}, {
"label": "Sat",
"value": "5803"
}, {
"label": "Sun",
"value": "6202"
}]
}'
);
// Render the chart
$area2DChart->render();
?>
<div id="chart-1">Fusion Charts will render here</div>
</body>
</html>To know more about the attributes you can configure for the area chart, visit this page.
Loading Data from a Static XML String
A line chart, the data for which is loaded from a static XML string, is shown below:
FusionCharts will load here..
The data structure needed to render the above chart is given below:
<?php
/*
Include the `fusioncharts.php` file that contains functions to embed the charts.
*/
include("includes/fusioncharts.php");
?>
<html>
<head>
<title>FusionCharts XT - Simple Line Chart with XML Data</title>
<!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
<script src="fusioncharts/fusioncharts.js"></script>
</head>
<body>
<?php
/*
Create a `lineChart` chart object using the FusionCharts PHP class constructor. Syntax for the constructor is `FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "data format", "data source")`. To load data from an XML string, `xml` is passed as the value for the data format parameter of the constructor. The actual XML data for the chart is passed as a string to the constructor.
*/
$lineChart = new FusionCharts("line", "myFirstChart" , 600, 300, "chart-1", "xml",
'<chart caption="Total footfall in Bakersfield Central" subcaption="Last week" xaxisname="Day" yaxisname="No. of Visitors" linethickness="2" palettecolors="#0075c2" basefontcolor="#333333" basefont="Helvetica Neue,Arial" captionfontsize="14" subcaptionfontsize="14" subcaptionfontbold="0" showborder="0" bgcolor="#ffffff" showshadow="0" canvasbgcolor="#ffffff" canvasborderalpha="0" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlinedashed="1" divlinedashlen="1" divlinegaplen="1" showxaxisline="1" xaxislinethickness="1" xaxislinecolor="#999999" showalternatehgridcolor="0">
<set label="Mon" value="15123" />
<set label="Tue" value="14233" />
<set label="Wed" value="23507" />
<set label="Thu" value="9110" />
<set label="Fri" value="15529" />
<set label="Sat" value="20803" />
<set label="Sun" value="19202" />
</chart>'
);
// Render the chart
$lineChart->render();
?>
<div id="chart-1">Fusion Charts will render here</div>
</body>
</html>To know more about the attributes you can configure for the line chart, visit this page
Loading Data from a JSON String Generated from an Associative Array
A pie 2D chart, the data for which is loaded from an associative array, is shown below:
FusionCharts will load here..
The data structure needed to render the above chart is given below:
<?php
/*
Include the `fusioncharts.php` file that contains functions to embed the charts.
*/
include("includes/fusioncharts.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>FusionCharts XT - Pie 2D Chart</title>
<!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
<script src="fusioncharts/fusioncharts.js"></script>
</head>
<body>
<?php
/* `$arrData` is the associative array that is initialized to store the chart attributes. */
$arrData = array(
"chart" => array(
"caption" => "Split of Visitors by Age Group",
"subCaption" => "Last year",
"paletteColors" => "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor" => "#ffffff",
"showBorder" => "0",
"use3DLighting" => "0",
"showShadow" => "0",
"enableSmartLabels" => "0",
"startingAngle" => "0",
"showPercentValues" => "1",
"showPercentInTooltip" => "0",
"decimals" => "1",
"captionFontSize" => "14",
"subcaptionFontSize" => "14",
"subcaptionFontBold" => "0",
"toolTipColor" => "#ffffff",
"toolTipBorderThickness" => "0",
"toolTipBgColor" => "#000000",
"toolTipBgAlpha" => "80",
"toolTipBorderRadius" => "2",
"toolTipPadding" => "5",
"showHoverEffect" => "1",
"showLegend" => "1",
"legendBgColor" => "#ffffff",
"legendBorderAlpha" => "0",
"legendShadow" => "0",
"legendItemFontSize" => "10",
"legendItemFontColor" => "#666666",
"useDataPlotColorForLabels" => "1"
)
);
/*
The data to be plotted on the chart is stored in the `$actualData` array in the key-value form.
*/
$actualData = array(
"Teenage" => 1250400,
"Adult" => 1463300,
"Mid-age" => 1050700,
"Senior" => 491000
);
/*
Convert the data in the `$actualData` array into a format that can be consumed by FusionCharts. The data for the chart should be in an array wherein each element of the array is a JSON object having the "label" and “value” as keys.
*/
$arrData['data'] = array();
// Iterate through the data in `$actualData` and insert in to the `$arrData` array.
foreach ($actualData as $key => $value) {
array_push($arrData['data'],
array(
'label' => $key,
'value' => $value
)
);
}
/*
JSON Encode the data to retrieve the string containing the JSON representation of the data in the array.
*/
$jsonEncodedData = json_encode($arrData);
/*
Create an object for the pie chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. Because we are using JSON data to render the chart, the data format will be `json`. The variable `$jsonEncodeData` holds all the JSON data for the chart, and will be passed as the value for the data source parameter of the constructor.
*/
$pieChart = new FusionCharts("pie2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);
// Render the chart
$pieChart->render();
?>
<div id="chart-1">Fusion Charts will render here</div>
</body>
</html>To know more about the attributes you can configure for the pie 2D chart, visit this page.
Loading Data from an XML String Generated from an Associative Array
A bar 2D chart, the data for which is generated from an associative array, is shown below:
FusionCharts will load here..
The data structure needed to render the above chart is given below:
<?php
/*
Include the `fusioncharts.php` file that contains functions to embed the charts.
*/
include("includes/fusioncharts.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>FusionCharts XT - Bar 2D Chart</title>
<!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. -->
<script src="fusioncharts/fusioncharts.js"></script>
</head>
<body>
<?php
/*
Set up templates for the XML data. To create an XML string, using templates is an easier option that manual string concatenation.
*/
$chartXMLTemplate = <<< CHART
<chart __attributes__>__set__</chart>
CHART;
$attributeTemplate = <<<ATTRIBUTE
__key__="__value__"
ATTRIBUTE;
$setXMLTemplate = <<<SET
<set label="__label__" value="__value__" />
SET;
/* `$arrData` is the associative array that is initialized to store the chart attributes. */
$arrData = array(
"chart" => array(
"caption" => "Top 5 Stores by Sales",
"subcaption" => "Last month",
"yaxisname" => "Sales (In USD)",
"numberprefix" => "$",
"palettecolors" => "#0075c2",
"bgcolor" => "#ffffff",
"showborder" => "0",
"showcanvasborder" => "0",
"useplotgradientcolor" => "0",
"plotborderalpha" => "10",
"placevaluesinside" => "1",
"valuefontcolor" => "#ffffff",
"showaxislines" => "1",
"axislinealpha" => "25",
"divlinealpha" => "10",
"aligncaptionwithcanvas" => "0",
"showalternatevgridcolor" => "0",
"captionfontsize" => "14",
"subcaptionfontsize" => "14",
"subcaptionfontbold" => "0",
"tooltipcolor" => "#ffffff",
"tooltipborderthickness" => "0",
"tooltipbgcolor" => "#000000",
"tooltipbgalpha" => "80",
"tooltipborderradius" => "2",
"tooltippadding" => "5"
)
);
// The data to be plotted on the chart is stored in the `$arrData` array.
$arrData['data'] = array(
"Bakersfield Central" => 880000,
"Garden Groove harbour" => 730000,
"Los Angeles Topanga" => 590000,
"Compton-Rancho Dom" => 520000,
"Daly City Serramonte" => 330000
);
/*
To convert the chart attributes array, `$arrData`, to XML, we will use the templates instead of manipulating the strings. Individual attribute strings will be stored in the array; they will then be combined into one string using the `implode` method.
*/
$chartAttributeList = array();
// Iterate over each chart attribute and convert it into an attribute string
foreach ($arrData['chart'] as $key => $value) {
$tempAttributeTemplate = $attributeTemplate;
$tempAttributeTemplate = str_replace('__key__', $key, $tempAttributeTemplate);
$tempAttributeTemplate = str_replace('__value__', $value, $tempAttributeTemplate);
array_push($chartAttributeList, $tempAttributeTemplate);
}
// Join the array using a single space as the delimiter.
$chartAttributeString = implode(' ', $chartAttributeList);
/* We again use the template to convert the chart data into the XML format. */
$setList = array();
// Iterate over each data and convert it into XML set
foreach ($arrData['data'] as $key => $value) {
$tempSetXMLTemplate = $setXMLTemplate;
$tempSetXMLTemplate = str_replace('__label__', $key, $tempSetXMLTemplate);
$tempSetXMLTemplate = str_replace('__value__', $value, $tempSetXMLTemplate);
array_push($setList, $tempSetXMLTemplate);
}
$setString = implode('', $setList);
$chartXML = $chartXMLTemplate;
// Replace the chart attributes
$chartXML = str_replace('__attributes__', $chartAttributeString, $chartXML);
// Replace the data sets
$chartXML = str_replace('__set__', $setString, $chartXML);
/*
Create an object for the bar chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. The constructor is used to initialize the chart type, chart id, width, height, the div id of the chart container, the data format, and the data source. Because we are using XML data to render the chart, the data format will be `xml`. The variable `$chartXML` holds all the XML data for the chart, and will be passed as the value for the data source parameter of the constructor.
*/
$barChart = new FusionCharts("bar2D", "myFirstChart" , 600, 300, "chart-1", "xml", $chartXML);
// Render the chart
$barChart->render();
?>
<div id="chart-1"><!-- Fusion Charts will render here--></div>
</body>
</html>To know more about the attributes you can configure for the bar 2D chart, visit this page.
Important Tips for Developers
Given below are a few tips that, although applicable while coding for the entire product, need to be paid attention to here:
- The structure in which chart data is specified, based on whether you are rendering a single-series chart or a multi-series chart. The table below shows the difference:
Single-series Chart |
|
{
"chart": {},
"data": [
{
"value": "Data value and label for data plot 1"
},
{
"value": "Data value and label for data plot 2"
},
{
"value": "Data value and label for data plot ..."
},
{
"value": "Data value and label for data plot n"
}
]
}
For an example, click here (For XML - check the data under the XML tab). |
Multi-series Chart |
|
{
"chart": {},
"categories": [
{
"category": [
{
"label": "Label for category 1 "
},
{
"label": "Label for category 2 "
},
{
"label": "Label for category ... "
},
{
"label": "Label for category n "
}
]
}
],
"dataset": [
{
"data": [
{
"value": "Value for category 1 series 1"
},
{
"value": "Value for category 2 series 1"
},
{
"value": "Value for category ... series 1"
},
{
"value": "Value for category n series 1"
}
]
},
{
"data": [
{
"value": "Value for category 1 series 2"
},
{
"value": "Value for category 2 series 2"
},
{
"value": "Value for category ... series 2"
},
{
"value": "Value for category n series 2"
}
]
},
{
"data": [
{
"value": "Value for category 1 series ..."
},
{
"value": "Value for category 2 series ..."
},
{
"value": "Value for category ... series ..."
},
{
"value": "Value for category n series ..."
}
]
},
{
"data": [
{
"value": "Value for category 1 series n"
},
{
"value": "Value for category 2 series n"
},
{
"value": "Value for category ... series n"
},
{
"value": "Value for category n series n"
}
]
}
]
}
For an example, click here (For XML - check the data under the XML tab). |
-
Make sure that the XML strings are escaped properly, especially for instances where the data for the chart is enclosed in quotation marks. Also make sure that the entire string is enclosed in single quotes, while the attributes and corresponding values are enclosed in double quotes. Doing otherwise will break the code.
-
The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.