Create real-time data visualization charts using PHP and Highcharts

With the continuous development of Internet technology, data analysis and visualization have become an indispensable part of enterprise and personal applications. Among them, real-time data visualization shows its unparalleled importance. It allows users to see data changes in real time and make decisions quickly to achieve the best benefits.

In order to present real-time data visualization tables, we need a tool that can dynamically draw. Highcharts is a highly recommended such tool. At the same time, PHP is a very popular and easy-to-learn web programming language. Therefore, we can use PHP and Highcharts together to create a real-time data visualization chart.

First, we need to prepare the data. In real-time data visualization, data changes occur at any time. Therefore, we use a simulated data method here. We can write a PHP script to use a random number generator to continuously generate data. The following is the code to simulate data:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id
";
  echo "data: $msg
";
  echo "
";
  ob_flush();
  flush();
}

$i = 0;
while(true) {
    $data = rand(0, 100);
    sendMsg($i++, $data);
    sleep(1);
}
?>

In the above code, first we tell the browser that this is an event stream by setting the Content-Type to text/event-stream. Then before each time we send data, we will send an id to represent the id of the data sent this time to facilitate data exchange between the browser and the server. Finally, the data is sent through the sendMsg function, so that data can be continuously generated and sent to the browser.

Next, we need a way to obtain and parse this data in real time. Here we chose a JavaScript library: EventSource. It is a new API in H5, mainly used to build servers to push event streams to browsers. The following is the code for using EventSource:

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 在这里进行数据处理
  };
});

In the above code, we first create an EventSource object and specify the URL of the server it wants to connect to. Then set the onmessage event response function. When the server sends data, this function will be triggered and the data will be passed in as a parameter. Then we can perform data processing in the onmessage function, such as displaying the data.

Finally, we need to use Highcharts to visualize the data into charts. Highcharts is a JavaScript library for chart drawing that can generate various types of charts, such as linear charts, bar charts, pie charts, etc. The following is the code to visualize data into a line chart:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实时数据可视化'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数据'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: '数据',
    data: []
  }]
});

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 把数据转化成坐标
    var point = [new Date().getTime(), parseInt(data)];

    // 把坐标添加到图表中
    var series = chart.series[0];
    var shift = series.data.length > 20; // 确保图表上只有20个点
    series.addPoint(point, true, shift);
  };
});

In the above code, we first create an advanced chart object and add some basic settings, such as title, axis and data series. Then in the Document Ready event, we also created an EventSource object and set up the onmessage event response function to process the data sent by the server. We convert the data into coordinates and add the coordinates back to the line chart.

In this way, we can use PHP and Highcharts to create real-time data visualization charts. We use PHP to generate random data and send this data to the browser in real time. Then use the EventSource object in JavaScript to respond to this data, and visualize the data into a line chart through Highcharts. In this way, we can allow users to see changes in data in real time, thereby improving the efficiency of user-analyzable data.

The above is the detailed content of Create real-time data visualization charts using PHP and Highcharts. For more information, please follow other related articles on the PHP Chinese website!