How to create a graph in PHP with quickcharts

Question

I have a dataset as follows,

Timestamp      Value    Importance
5/22/2022 4:19  3245    0.0234
5/22/2022 4:09  3246    0.0214
5/22/2022 4:09  3247    0.1234
5/22/2022 3:59  3248    0.0534
5/22/2022 3:59  3249    0.1234
5/22/2022 3:49  3250    0.0244
5/22/2022 3:49  3251    0.4234
5/22/2022 3:39  3252    0.0534
5/22/2022 3:39  3253    0.0234
5/22/2022 3:29  3254    0.4234
5/22/2022 3:29  3255    0.8234
5/22/2022 3:19  3256    0.1234
5/22/2022 3:19  3257    0.0534
5/22/2022 3:09  3258    0.0334
5/22/2022 3:09  3259    0.0234
5/22/2022 2:59  3260    0.0234

I need to show this in a line graph in my php file but I need to highlight point radius according to their importance value, further I need to neglect highlighting all the points which are less than 0.2. So I have searched and found below configuration class from https://quickchart.io/documentation/ but I could not achieve what I need exactly. This will highlight different datasets but not some points only in same dataset.

{
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'dataset - big points',
        data: [-15, -80, 79, -11, -5, 33, -57],
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        fill: false,
        borderDash: [5, 5],
        pointRadius: 15,
        pointHoverRadius: 10,
      },
      {
        label: 'dataset - individual point sizes',
        data: [-86, 59, -70, -40, 40, 33, 16],
        backgroundColor: 'rgb(54, 162, 235)',
        borderColor: 'rgb(54, 162, 235)',
        fill: false,
        borderDash: [5, 5],
        pointRadius: [2, 4, 6, 18, 0, 12, 20],
      },
      {
        label: 'dataset - large pointHoverRadius',
        data: [59, -65, -33, 0, -79, 95, -53],
        backgroundColor: 'rgb(75, 192, 192)',
        borderColor: 'rgb(75, 192, 192)',
        fill: false,
        pointHoverRadius: 30,
      },
      {
        label: 'dataset - large pointHitRadius',
        data: [73, 83, -19, 74, 16, -12, 8],
        backgroundColor: 'rgb(255, 205, 86)',
        borderColor: 'rgb(255, 205, 86)',
        fill: false,
        pointHitRadius: 20,
      },
    ],
  },
  options: {
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart - Different point sizes',
    },
  },
}

Can someone show me how to use above example with my dataset to achieve what I Need?

Answer 1

With Chart.js, you can use pointRadius as a scriptable option.

For example, you can set pointRadius dynamically based on the value:

        pointRadius: function (context) {
          const index = context.dataIndex;
          const value = context.dataset.data[index];
          if (value < 0.2) {
            return 0;
          }
          if (value > 0.5) {
            return 20;
          }
          return 10;
        }

Link to example in the QuickChart chart editor

In your case, use scriptable pointRadius to implement logic that returns a point size based on the value (e.g., by looking it up in a table of importance).