Encrypting and Decrypting Data in PHP for Secure ECharts Visualizations

In web applications, statistical charts are often needed to display data and trends. Using PHP APIs and ECharts makes it easy to implement chart functionality. However, sometimes sensitive data must be encrypted to ensure security, so encryption and decryption are required. This article introduces how to use PHP APIs and ECharts to encrypt and decrypt chart data, providing concrete code examples.

1. Encrypt Data

In PHP you can use the openssl_encrypt function to encrypt sensitive data. The function takes four parameters: the encryption algorithm, the key, the plaintext, and encryption options.

Below is a simple encryption function example:

function encrypt($plaintext, $encryption_key) {
  $cipher = "AES-128-CBC";
  $ivlen = openssl_cipher_iv_length($cipher);
  $iv = openssl_random_pseudo_bytes($ivlen);
  $ciphertext_raw = openssl_encrypt($plaintext, $cipher, $encryption_key, $options=OPENSSL_RAW_DATA, $iv);
  $hmac = hash_hmac('sha256', $ciphertext_raw, $encryption_key, $as_binary=true);
  return base64_encode($iv.$hmac.$ciphertext_raw);
}

When calling this function, pass the plaintext and the encryption key, for example:

$encryption_key = "my_secret_key";
$plaintext = "sensitive_data";
$ciphertext = encrypt($plaintext, $encryption_key);

After encryption, store $ciphertext in a database or send it to the client for later use.

2. Decrypt Data

You can use the openssl_decrypt function to decrypt the encrypted data. This function also takes four parameters: the decryption algorithm, the key, the ciphertext, and decryption options.

Below is a simple decryption function example:

function decrypt($ciphertext, $encryption_key) {
  $c = base64_decode($ciphertext);
  $cipher = "AES-128-CBC";
  $ivlen = openssl_cipher_iv_length($cipher);
  $iv = substr($c, 0, $ivlen);
  $hmac = substr($c, $ivlen, $sha2len=32);
  $ciphertext_raw = substr($c, $ivlen+$sha2len);
  $calcmac = hash_hmac('sha256', $ciphertext_raw, $encryption_key, $as_binary=true);
  if (!hash_equals($hmac, $calcmac)) { return null; }
  $plaintext = openssl_decrypt($ciphertext_raw, $cipher, $encryption_key, $options=OPENSSL_RAW_DATA, $iv);
  return $plaintext;
}

When calling this function, pass the ciphertext and the decryption key, for example:

$encryption_key = "my_secret_key";
$plaintext = decrypt($ciphertext, $encryption_key);

The variable $plaintext contains the original sensitive data. If the key is incorrect or the data has been tampered with, the function returns null.

3. Use ECharts to Display Statistical Charts

ECharts is an open‑source JavaScript visualization library that makes it easy to create interactive charts.

Here is a simple example that shows how to use ECharts to render a basic bar chart:

<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
  title: { text: 'My Chart' },
  tooltip: {},
  xAxis: { data: ['A','B','C','D','E'] },
  yAxis: {},
  series: [{ name: 'Data', type: 'bar', data: [5,20,36,10,10] }]
};
myChart.setOption(option);
</script>
<div id="chart" style="height: 400px;"></div>

4. Use Encrypted Data for ECharts

To feed encrypted data into ECharts, the ciphertext must be sent to the client. Below is a simple PHP‑JavaScript example that demonstrates this:

<?php
$encryption_key = "my_secret_key";
$plaintext = "sensitive_data";
$ciphertext = encrypt($plaintext, $encryption_key);
?>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var url = "data.php?ciphertext=
";
myChart.showLoading();
$.getJSON(url, function(data) {
  myChart.hideLoading();
  myChart.setOption({
    title: { text: 'My Chart' },
    tooltip: {},
    xAxis: { data: data.labels },
    yAxis: {},
    series: [{ name: 'Data', type: 'bar', data: data.values }]
  });
});
</script>
<div id="chart" style="height: 400px;"></div>

The above code expects a data.php file that decrypts the ciphertext and returns JSON data for the chart:

<?php
$encryption_key = "my_secret_key";
$ciphertext = $_GET["ciphertext"];
$plaintext = decrypt($ciphertext, $encryption_key);
$data = array(
  "labels" => array("A","B","C","D","E"),
  "values" => array(5,20,36,10,10)
);
echo json_encode($data);
?>

This script decrypts the received ciphertext, prepares the data in JSON format, and sends it to the front‑end where ECharts renders the chart. Although the example uses hard‑coded data, it can be easily extended to fetch real data from a database.

By combining encryption/decryption with ECharts, you can protect sensitive information while still delivering attractive and interactive statistical visualizations.

PHP Practical Development Fast‑Track

Scan the QR code to receive free learning materials