Prompt Title: DB in HTML and JS

To create a pie chart on your website based on data stored in an SQL database, you can use a charting library like Chart.js, which allows you to easily create and customize different types of charts including pie charts.

Here's a basic example of how to use Chart.js with PHP to create a pie chart:

1. Connect to the database and retrieve the data you want to display in the pie chart:

phpCopy code
// Connect to the database
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name');

// Query the database to retrieve the data you want to display in the pie chart
$sql = "SELECT category, value FROM table_name";
$result = mysqli_query($conn, $sql);

// Fetch the data
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);

// Close the database connection
mysqli_close($conn);

2. Convert the data into a format that can be used by Chart.js. For a pie chart, you need an array of objects with two properties: "label" and "value".

phpCopy code
// Convert the data into a format that can be used by Chart.js
$chart_data = [];
foreach ($data as $row) {
  $chart_data[] = [
    'label' => $row['category'],
    'value' => $row['value']
  ];
}

// Convert the data into a JSON string
$chart_data_json = json_encode($chart_data);

3. Create an HTML canvas element where the pie chart will be displayed:

htmlCopy code
<canvas id="myChart"></canvas>

4. Include the Chart.js library and create a JavaScript script to generate the pie chart using the data you retrieved from the database:

htmlCopy code
<!-- Include the Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Create a JavaScript script to generate the pie chart -->
<script>
  var chart_data = <?php echo $chart_data_json; ?>;
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: chart_data.map(function(item) {
        return item.label;
      }),
      datasets: [{
        data: chart_data.map(function(item) {
          return item.value;
        }),
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      legend: {
        position: 'right'
      }
    }
  });
</script>

In this example, Chart.js is used to create a pie chart with the data you retrieved from the database, and the chart is displayed in an HTML canvas element with the ID "myChart". The chart is customized using various options provided