Chartjs-So, I'm fetching my data from phpMyAdmin MySQL to the chart.js, but I need it with AJAX, but how AJAX works with Chart.js?

You can do something like

$.ajax({
    url: "/your/url/to/ajax.php",
    method: "POST",
    data: { id: 1 },
    success: function(response) {
        var label_array = [];
        var data_array= [];

        for(var i in response) {
            label_array.push(response[i].Date);
            data_array.push(response[i].value);
        }
        <Chart.js code>
    } // End Success
})  // End Ajax

What you need to do is make the code which generates this data accessible by URL – this is sometimes called creating an endpoint. Usually a lot of these bundled together is called an Application Programming Interface (API). It’s a way to get an application to show, update, delete, or create data based on the urls you’re requesting and their parameters.

In this case you’d be creating an endpoint like https://yourhost.tld/energy.php perhaps. When you request energy.php, it runs and fetches the data you’re getting from $energy_set and returns it as an HTTP response. That can look something like this:

<?php

header('Content-Type: application/json');

$data = [];

while($energy = mysqli_fetch_assoc($energy_set)) {
  $data[] = $energy['energyPercent'];
}

echo json_encode($data);

return;

That’s about as barebones as you can get – if you have a lot of endpoints you might want to consider a little framework like Lumen to help you organize your code and make it safer.

So, once you’ve done that you can start fetching that data from the browser. This can be done a number of ways, but at its simplest will look something like this:

// Using the fetch API - you can use jQuery.ajax instead, for example
fetch('https://yourhost.tld/energy.php')
  .then(function(response) {
    // Remove the chart data
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });

    // Add your response data back into the chart
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(response);
    });
  });

This is really naive – you’d probably want to break the emptying and adding of data out into functions as shown in the documentation. When you know you need to rebuild your chart, you simply call chart.update() after modifying its data. This is outlined here: http://www.chartjs.org/docs/latest/developers/updates.html

As such your final code might function similar to this:

fetch('https://yourhost.tld/energy.php')
  .then(function(response) {
    removeData(chart);

    addData(chart, 'Harvested', response);

    chart.update();
  });

You could also make a habit of returning all chart data in the response, so you can have a generic chart handler:

<?php

header('Content-Type: application/json');

$data = [];

while($energy = mysqli_fetch_assoc($energy_set)) {
  $data[] = $energy['energyPercent'];
}

echo json_encode([
  'label' => 'Harvested',
  'data'  => $data
]);

return;

Then in your JavaScript…

fetch('https://yourhost.tld/energy.php')
  .then(function(response) {
    removeData(chart);

    addData(chart, response.label, response.data);

    chart.update();
  });

If anything’s unclear, feel free to ask questions. This convention is simple once you get the hang of it, but seems difficult before you’ve done it.

I’d also add that while this code is probably close to working, it’s not ‘best practice’; it’s more so intended to illustrate how this works with as little code as possible. It’s perfectly fine to use code like this in a prototype or hobby project, but I would look into things like SQL injection and data sanitization before building a bunch of endpoints which use mysqli_fetch_assoc. Take a look at PHP The Right Way if you’re interested.