Recommand · November 3, 2021 0

Scatter chart in chart.js

I am new to chart.js so bear with me as I am not familiar with the terminology.

I am trying to create charts using data from postgres on heroku. So I have data which I call using a .py file and run it into a html file, and I create charts using chart.js

While bar and line charts are easy enough to call in the html file as I can just run the SQL query in the py file, and output the variables to use in the html file, e.g.

SELECT dosage, efficacy
FROM med_table
rows = fetch(cursor)
dos = [row[0] for row in rows]
eff = [row[1] for row in rows]

then in the html file I can call {{dos|safe}} and {{eff|safe}} to access the data.

However, this doesn’t really work for scatter plots as they require the data in this format (code from w3schools):

var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:60, y:9}

and trying to format it into a dict in the py file doesn’t really work as it will just say x and y undefined since yeah, they really have not been defined. How can I do it in a way so that I can pass the data to the scatterplot in chart.js efficiently?