Chart.js point format data for a scatter plot

Question

Chart.js scatter chart only accepts data in a point format (x, y). Im a trying to fill the data points with infomration about medications from a file called meds.json More specifically, the x would be the month of last fill date of the medication and the y would be the dose.

How can I grab all this data from the meds.json file and insert it to the data to create the points for my scatter plot? If I try to grab all dates and store them in an array, and all the dose values in another array, how can I use that populate the point data using those arrays?

Here's how to make a scatter plot using Chart.js, I am trying to populate the x,y points under data 'data':

// charts.js
var scatterChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: [{
                    // x = month, y = dose
                    // fill these in for all meds in the json file
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }]
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'top'
                }]
            }
        }
    });
}

meds.json

[
  {
    "name": "Simvastatin",
    "dose": 10,
    "dose unit": "mg",
    "freq": "qd",
    "route": "PO",
    "last fill date": "2/15/2020",
    "coverage": "100%",
    "anticipated remaining fills": 2
  },
  {
    "name": "Lisinopril",
    "dose": 5,
    "dose unit": "mg",
    "freq": "qd",
    "route": "PO",
    "last fill date": "2/15/2020",
    "coverage": "100%",
    "anticipated remaining fills": 2
  }  

    ...... The list goes on

]

Hemant Parashar · Accepted Answer · 2020-06-17 19:18:58Z

1

You should actually use a line chart for this which would be much more appropriate and exactly show the trend & relationship between month and the dosage.

But since you asked for scatter chart...you can do it like this :

const data = [{
    "name": "Simvastatin",
    "dose": 10,
    "dose unit": "mg",
    "freq": "qd",
    "route": "PO",
    "last fill date": "2/15/2020",
    "coverage": "100%",
    "anticipated remaining fills": 2
  },
  {
    "name": "Lisinopril",
    "dose": 5,
    "dose unit": "mg",
    "freq": "qd",
    "route": "PO",
    "last fill date": "2/15/2020",
    "coverage": "100%",
    "anticipated remaining fills": 2
  }
]

const transformedData = data.map(obj=>{
  return {
    x:new Date(obj["last fill date"]).getMonth() + 1,
    y:obj.dose,
  }
})

console.log(transformedData)

and then use as

var scatterChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: transformedData
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'top'
                }]
            }
        }
    });
}

Hope this helps !

edited Jun 17, 2020 at 19:18

answered Jun 17, 2020 at 19:06

Hemant Parashar

3,7842 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user12324017 Over a year ago

Can you explain what the + 1 after .getMonth() does?

Hemant Parashar Over a year ago

@user12324017 so the getMonth method is 0 based meaning Jan is 0, Feb is 1 and so on. So to handle that offset we add 1.

user12324017 Over a year ago

I see, that makes sense. Thank you!

Hemant Parashar Over a year ago

Glad it helped :)

Collectives™ on Stack Overflow

Chart.js point format data for a scatter plot

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related