Home > Article > Backend Development > How to use the php interface and ECharts to generate dynamically updated real-time statistical charts

How to use the php interface and ECharts to generate dynamically updated real-time statistical charts

王林Original: 2023-12-17 08:50:381103browse

How to use the php interface and ECharts to generate dynamically updated real-time statistical charts requires specific code examples

With the continuous development of technology, data analysis and visualization have become modern One of the essential tools for businesses and institutions. As a popular JavaScript data visualization library, ECharts has become one of the preferred tools for data visualization. By combining the PHP interface with ECharts, you can achieve more flexible and dynamic data visualization effects.

This article will introduce how to use the PHP interface and ECharts to generate dynamically updated real-time statistical charts, and provide specific code examples to help readers understand related technologies and implementation methods.

1. Preparation

Before we start, we need to understand the following technologies and tools:

PHP: As a commonly used server-side programming language, PHP It can help us read and process data.
MySQL: As a commonly used relational database, MySQL can help us store and manage data.
ECharts: As a popular JavaScript data visualization library, ECharts can help us generate and display charts.
Apache server: As a common web server software, Apache can help us build a PHP environment and run code.

After preparing the above tools and technologies, we can start the specific implementation.

2. Implementation process

Next, we will introduce how to use the PHP interface and ECharts to generate dynamically updated real-time statistical charts, and provide specific code examples.

Create database

First, we need to create a database and create a table to store data. Here we create a database named "stats" and a table named "data" in it to store data.

The table structure is as follows:

CREATE TABLE `data` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `value` int(11) NOT NULL,
   `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Writing php interface

Next, we need to write a php interface to provide data to the front end. In this example, we will write an interface named "get_data.php" to obtain the last 10 pieces of data and return them to the front end in JSON format.

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 获取数据
$data = array();
$query = "SELECT * FROM data ORDER BY time DESC LIMIT 10";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
   while ($row = $result->fetch_assoc()) {
       $data[] = $row;
   }
}

// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();

?>

Writing a front-end page

Next, we need to write a front-end page to display data and generate charts. In this example, we will write a page named "index.html" to display the last 10 pieces of data and generate a line chart that updates in real time.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts实时统计图</title>
   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
   <div id="chart" style="width: 800px; height: 400px;"></div>
   <script>
       // 初始化图表
       var chart = echarts.init(document.getElementById('chart'));

       // 设置图表配置项
       var option = {
           title: {
               text: '实时统计图'
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   animation: false
               }
           },
           legend: {
                data:['实时数据']
           },
           xAxis: {
               type: 'time',
               splitLine: {
                   show: false
               }
           },
           yAxis: {
               type: 'value',
               splitLine: {
                   show: false
               }
           },
           series: [{
               name: '实时数据',
               type: 'line',
               showSymbol: false,
               hoverAnimation: false,
               data: []
           }]
       };
       chart.setOption(option);

       // 定时更新图表数据
       setInterval(function() {
           $.getJSON('get_data.php', function(data) {
               option.series[0].data = data.reverse();
               chart.setOption(option);
           });
       }, 1000);
   </script>
</body>
</html>

In this example, we use the ECharts JavaScript library and define a div named "chart" to display the line chart. We also define a timer to update the chart data every 1 second.

Insert test data

Finally, we need to insert some test data into the database to test whether the entire system is working properly. In this example, we will insert 100 randomly generated data into the "data" table.

You can use the following code to insert data in batches:

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 插入测试数据
for ($i = 1; $i <= 100; $i++) {
   $value = rand(1, 100);
   $time = date('Y-m-d H:i:s', strtotime('-' . $i . ' seconds'));
   $query = "INSERT INTO data (value, time) VALUES ('$value', '$time')";
   $result = $mysqli->query($query);
}

// 关闭数据库连接
$mysqli->close();

?>

3. Summary

Through the above implementation process, we can use the php interface and ECharts to generate dynamically updated real-time statistical charts . In practical applications, we can adjust and modify it according to specific needs to meet different data visualization needs.

In short, the combination of PHP interface and ECharts can help us achieve more flexible and dynamic data visualization, providing reliable tools and support for data analysis and decision-making.

The above is the detailed content of How to use the php interface and ECharts to generate dynamically updated real-time statistical charts. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript mysql json echarts html 接口数据库 apache 数据分析

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PHP and WebSocket: An optimized approach to instant messagingNext article：PHP and WebSocket: An optimized approach to instant messaging

See more

How to use the php interface and ECharts to generate dynamically updated real-time statistical charts

Related articles