Implementing Data Visualization with PHP and Google Charts
This tutorial explains how to use PHP to fetch JSON data and integrate Google Charts, providing step‑by‑step code examples for preparing the environment, retrieving data, generating a pie chart with JavaScript, and displaying it within an HTML page.
1. Preparation
Before writing any code, install a PHP chart library. This guide recommends Google Charts, a powerful and easy‑to‑use library that supports many chart types and offers extensive customization options. Documentation and examples are available at https://developers.google.com/chart/.
2. Getting Data
To display a chart, you first need the data. In this example we assume a data.php file returns a JSON‑encoded string. The PHP file_get_contents function is used to read the file, and json_decode converts the JSON to an associative array.
// 获取数据
$data = file_get_contents('data.php');
$data = json_decode($data, true);3. Generating the Chart
After obtaining the data, Google Charts is used to generate the visualisation. First, include the Google Charts JavaScript library in the HTML.
<!-- 引入Google Charts的JavaScript库 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>Then create a JavaScript block that builds a DataTable, adds columns and rows, and wraps the chart in a ChartWrapper. The example creates a 3‑D pie chart.
// 创建一个DataTable对象
var dataTable = new google.visualization.DataTable();
// 添加表头
dataTable.addColumn('string', '名称');
dataTable.addColumn('number', '数值');
// 添加数据
dataTable.addRows([
['A', 10],
['B', 20],
['C', 30]
]);
// 创建一个ChartWrapper对象
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart', // 图表类型为饼图
dataTable: dataTable,
options: {
title: '数据图表展示', // 图表标题
is3D: true // 使用3D效果
},
containerId: 'chart' // 图表容器的ID
});
// 绘制图表
chartWrapper.draw();4. Displaying the Chart
Create an HTML container with a specific ID where the chart will be rendered.
<!-- 创建一个图表容器 -->
<div id="chart"></div>Combine all the pieces into a single PHP file that fetches the data, outputs the HTML structure, includes the Google Charts library, and runs the JavaScript to draw the chart.
<?php
// 获取数据
$data = file_get_contents('data.php');
$data = json_decode($data, true);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据图表展示</title>
</head>
<body>
<!-- 创建一个图表容器 -->
<div id="chart"></div>
<!-- 引入Google Charts的JavaScript库 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// 创建一个DataTable对象
var dataTable = new google.visualization.DataTable();
// 添加表头
dataTable.addColumn('string', '名称');
dataTable.addColumn('number', '数值');
// 添加数据
dataTable.addRows([
<?php foreach ($data as $item): ?>
['<?php echo $item['name']; ?>', <?php echo $item['value']; ?>],
<?php endforeach; ?>
]);
// 创建一个ChartWrapper对象
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataTable: dataTable,
options: {
title: '数据图表展示',
is3D: true
},
containerId: 'chart'
});
// 绘制图表
chartWrapper.draw();
}
</script>
</body>
</html>5. Conclusion
The article demonstrates how to implement a data‑visualisation feature using PHP to retrieve JSON data and Google Charts to render a chart. By following the steps—preparing the environment, fetching data, generating the chart with JavaScript, and embedding it in an HTML container—readers can quickly add interactive visualisations to their web applications.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.