Home >Backend Development >PHP Tutorial >Create data visualization charts using PHP and FusionCharts
Create data visualization charts using PHP and FusionCharts
- PHPzOriginal
- 2023-05-11 09:40:35881browse
As modern business becomes increasingly digital, data processing and visualization are increasingly important. Many companies rely on data visualization to understand their business and make strategic decisions. In this article, we will discuss how to create data visualization charts using PHP and FusionCharts.
FusionCharts is a set of JavaScript libraries for creating beautiful, dynamic, and interactive charts. It supports many types of charts, including linear charts, pie charts, bar charts, scatter charts, and more. FusionCharts provides many features, such as dynamic updates and real-time reactions, to help users better understand the data.
In the example of this article, we will create a simple bar chart to display the sales data of companies A, B, C and D. We will use PHP to generate chart data and then use FusionCharts to visualize it.
Before we start, we need to install PHP and FusionCharts libraries and prepare our data. We can create a PHP file called data.php to generate our data. In this file, we will create an array to store sales data.
<?php
$sales = array(
array("name" => "Company A", "sales" => 25000),
array("name" => "Company B", "sales" => 35000),
array("name" => "Company C", "sales" => 45000),
array("name" => "Company D", "sales" => 55000)
);
echo json_encode($sales);
?>In this example, we create an array named $sales, which contains 4 arrays, each array represents a company and its sales. We use the json_encode() function to convert the data into JSON format for use in JavaScript.
Next, we need to prepare an HTML page to present the chart. We can create a file called index.html and include the FusionCharts library and our JavaScript code in it. We also need to create a blank div element within this page so that our chart can be drawn into it.
<!DOCTYPE html>
<html>
<head>
<title>FusionCharts Example</title>
<script src="fusioncharts.js"></script>
</head>
<body>
<div id="chart-container"></div>
<script>
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '100%',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales Data",
"xAxisName": "Company",
"yAxisName": "Sales",
"theme": "fusion"
},
"data": []
}
});
var dataSource = {
"chart": {},
"data": []
};
// AJAX request to get the data from data.php
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
dataSource.data = JSON.parse(this.responseText);
salesChart.setChartData(dataSource);
}
};
xhttp.open("GET", "data.php", true);
xhttp.send();
});
</script>
</body>
</html>In this example, we create a FusionCharts object named salesChart and set the chart type to column2d (column chart). We also set the chart's width, height, x and y axis names, and theme. We also created a JavaScript object called dataSource that contains the sales data we obtained from data.php.
In our JavaScript code, we use the XMLHttpRequest object to make an HTTP GET request to get data from data.php. Once we have the data, we set the data to the data property of the dataSource object and use the setChartData() method to apply the data to our chart.
Now, if we open the index.html file in a browser, we will see a nice bar chart showing the sales data for companies A, B, C, and D.
To summarize, we have learned how to use PHP and the FusionCharts library to create data visualization charts. By figuring out how to use these tools to create beautiful interactive charts, we can better understand our data and make better decisions.
The above is the detailed content of Create data visualization charts using PHP and FusionCharts. For more information, please follow other related articles on the PHP Chinese website!