Gravity forms result as Chart.js

One of the challenges I face is to create a Gravity forms which then the result can be shown as a chart using Chart.js. For this I used the solution below:

1- First created the form using Gravity forms within WordPress. For the update, I will try to implement any form. Then I need to send the result or any field to the result page.

2- For sending the data to the result page, I use the redirect function in Gravity forms and then pass the needed parameters in the URl to the result page.

3- In the result page, I need to read the values from the URL and render the chart using the Chart.js library in HTML. Here is the code

<!DOCTYPE html>
<html>
<head>
  <title>Input Table and Chart Example - Result</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h1>Result to be shown in chart</h1>

  <canvas id="chart"></canvas>

  <script>
    // Retrieve the query parameters from the URL
    const urlParams = new URLSearchParams(window.location.search);

    // Get the values from the query parameters
    const name1 = urlParams.get('name1');
    const age1 = parseInt(urlParams.get('age1'));
    const score1 = parseInt(urlParams.get('score1'));

    const name2 = urlParams.get('name2');
    const age2 = parseInt(urlParams.get('age2'));
    const score2 = parseInt(urlParams.get('score2'));

    // Create the chart data
    const chartData = {
      labels: [name1, name2],
      datasets: [
        {
          label: 'Scores',
          data: [score1, score2],
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],
          borderWidth: 1,
        },
      ],
    };

    // Render the chart
    const ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: chartData,
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: 200,
          },
        },
      },
    });
  </script>
</body>
</html>

Tagged: