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

Home

Backend Development

PHP Tutorial

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

王林

Dec 17, 2023 am 08:50 AM

echartsphp interfaceReal-time statistics chart

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 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!

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

What data can be stored in a PHP session?May 02, 2025 am 12:17 AM

PHPsessionscanstorestrings,numbers,arrays,andobjects.1.Strings:textdatalikeusernames.2.Numbers:integersorfloatsforcounters.3.Arrays:listslikeshoppingcarts.4.Objects:complexstructuresthatareserialized.

How do you start a PHP session?May 02, 2025 am 12:16 AM

TostartaPHPsession,usesession_start()atthescript'sbeginning.1)Placeitbeforeanyoutputtosetthesessioncookie.2)Usesessionsforuserdatalikeloginstatusorshoppingcarts.3)RegeneratesessionIDstopreventfixationattacks.4)Considerusingadatabaseforsessionstoragei

What is session regeneration, and how does it improve security?May 02, 2025 am 12:15 AM

Session regeneration refers to generating a new session ID and invalidating the old ID when the user performs sensitive operations in case of session fixed attacks. The implementation steps include: 1. Detect sensitive operations, 2. Generate new session ID, 3. Destroy old session ID, 4. Update user-side session information.

What are some performance considerations when using PHP sessions?May 02, 2025 am 12:11 AM

PHP sessions have a significant impact on application performance. Optimization methods include: 1. Use a database to store session data to improve response speed; 2. Reduce the use of session data and only store necessary information; 3. Use a non-blocking session processor to improve concurrency capabilities; 4. Adjust the session expiration time to balance user experience and server burden; 5. Use persistent sessions to reduce the number of data read and write times.

How do PHP sessions differ from cookies?May 02, 2025 am 12:03 AM

PHPsessionsareserver-side,whilecookiesareclient-side.1)Sessionsstoredataontheserver,aremoresecure,andhandlelargerdata.2)Cookiesstoredataontheclient,arelesssecure,andlimitedinsize.Usesessionsforsensitivedataandcookiesfornon-sensitive,client-sidedata.

How does PHP identify a user's session?May 01, 2025 am 12:23 AM

PHPidentifiesauser'ssessionusingsessioncookiesandsessionIDs.1)Whensession_start()iscalled,PHPgeneratesauniquesessionIDstoredinacookienamedPHPSESSIDontheuser'sbrowser.2)ThisIDallowsPHPtoretrievesessiondatafromtheserver.

What are some best practices for securing PHP sessions?May 01, 2025 am 12:22 AM

The security of PHP sessions can be achieved through the following measures: 1. Use session_regenerate_id() to regenerate the session ID when the user logs in or is an important operation. 2. Encrypt the transmission session ID through the HTTPS protocol. 3. Use session_save_path() to specify the secure directory to store session data and set permissions correctly.

Where are PHP session files stored by default?May 01, 2025 am 12:15 AM

PHPsessionfilesarestoredinthedirectoryspecifiedbysession.save_path,typically/tmponUnix-likesystemsorC:\Windows\TemponWindows.Tocustomizethis:1)Usesession_save_path()tosetacustomdirectory,ensuringit'swritable;2)Verifythecustomdirectoryexistsandiswrita

See all articles