How to create a graph in PHP with quickcharts - php

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).