Trying to generate "Quadrants" chart from gallery page
Jacek-ghub opened this issue · 2 comments
I was trying to generate that chart on my hosted box, but somehow couldn't make the quadrants to show.
I changed the code to point to QuickChart.io server and got mixed results. When using v2 or v4 those quadrants were missing, and dots had wrong colors (both border and bgnd color). However, when using v3, it produced the same chart as on it is on QuickChart.io example page (where that version is explicitly specified).
Kind of minor thing, or maybe by design, with v3 the options/title/text was missing. Also, you may note that "Multicolor Data" label has different color on QC.io and hosted charts.
The only difference was swapping the url from QC.io to my local box (same Python code; chart data from the QC example page - not modified, except the additional Title option; running project downloaded last week from Github in Docker).
QC.io / v3:
QC.io / v2/4:
Local hosted / v3/4:
Hi @Jacek-ghub,
This chart relies on the Chart.js Annotations plugin, which is not yet supported in Chart.js v3+ on the self-hosted version (as noted in the readme, but easy to miss).
Hi @typpo,
Thank you. Yes, I missed that part. I guess, when I initially read it, I didn't know anything about those plugins / restrictions.
Later, I relied on docs page that has no mention about self-hosted restrictions. Further adding to my confusion was annotations issue which was working for v2.
I wanted to use those annotations for a monthly blood pressure chart. It is not a big deal, as for that one, I can point to QC server (the worst case 2*31 * 3 data points, so it will work).
Update:
I tried to create a blood pressure chart based on AHA Journals article (Table 6. Categories of BP in Adults).
If anyone would be interested, here is the chart:
And here is the chart data (requires 'version': '3'):
{
'type': 'scatter',
'data': {
'datasets': [
{
'label': 'Morning',
'data': [
{ 'x': 72, 'y': 106, },
{ 'x': 75, 'y': 116, },
{ 'x': 76, 'y': 128, },
{ 'x': 76, 'y': 121, },
{ 'x': 71, 'y': 107, },
{ 'x': 75, 'y': 117, },
{ 'x': 75, 'y': 114, },
{ 'x': 73, 'y': 116, },
{ 'x': 76, 'y': 113, },
{ 'x': 78, 'y': 117, },
],
'backgroundColor': 'black',
},
{
'label': 'Evening',
'data': [
{ 'x': 70, 'y': 113, },
{ 'x': 74, 'y': 118, },
{ 'x': 78, 'y': 115, },
{ 'x': 74, 'y': 124, },
{ 'x': 78, 'y': 116, },
{ 'x': 76, 'y': 117, },
{ 'x': 74, 'y': 120, },
{ 'x': 74, 'y': 114, },
{ 'x': 73, 'y': 120, },
{ 'x': 82, 'y': 127, },
],
'backgroundColor': 'green',
},
{
'label': 'Mid day',
'data': [
{ 'x': 78, 'y': 127, },
{ 'x': 78, 'y': 121, },
{ 'x': 80, 'y': 135, },
{ 'x': 75, 'y': 119, },
{ 'x': 76, 'y': 118, },
{ 'x': 72, 'y': 122, },
{ 'x': 79, 'y': 146, },
{ 'x': 79, 'y': 139, },
{ 'x': 80, 'y': 131, },
{ 'x': 74, 'y': 125, },
],
'backgroundColor': 'magenta',
},
],
},
'options': {
'scales': {
'x': {
'min': 55,
'max': 100,
'grid': {
'drawBorder': False,
},
},
'y': {
'min': 80,
'max': 160,
'grid': {
'drawBorder': False,
},
},
},
'plugins': {
'annotation': {
'annotations': [
# row 5
# stage 2
{
'type': 'box',
'xMin': 55,
'xMax': 90,
'yMin': 140,
'yMax': 170,
'backgroundColor': 'rgba(255, 20, 20, 0.45)',
'borderColor': 'transparent',
},
# row 4
# stage 1
{
'type': 'box',
'xMin': 55,
'xMax': 90,
'yMin': 130,
'yMax': 140,
'backgroundColor': 'rgba(255, 60, 0, 0.35)',
'borderColor': 'transparent',
},
# row 3
# elevated
{
'type': 'box',
'xMin': 55,
'xMax': 80,
'yMin': 120,
'yMax': 130,
'backgroundColor': 'rgba(200, 200, 50, 0.25)',
'borderColor': 'transparent',
},
{
'type': 'label',
'xValue': 60,
'yValue': 125,
'content': ['Elevated'],
},
# row 2
# normal
{
'type': 'box',
'xMin': 55,
'xMax': 80,
'yMin': 90,
'yMax': 120,
'backgroundColor': 'rgba(43, 255, 50, 0.25)',
'borderColor': 'transparent',
},
# row 1
# low
{
'type': 'box',
'xMin': 55,
'xMax': 60,
'yMin': 80,
'yMax': 90,
'backgroundColor': 'rgba(99, 132, 255, 0.25)',
'borderColor': 'transparent',
},
{
'type': 'label',
'xValue': 57,
'yValue': 85,
'content': ['Low'],
},
# normal
{
'type': 'box',
'xMin': 60,
'xMax': 80,
'yMin': 80,
'yMax': 90,
'backgroundColor': 'rgba(43, 255, 50, 0.25)',
'borderColor': 'transparent',
},
{
'type': 'label',
'xValue': 70,
'yValue': 85,
'content': ['Normal'],
},
# stage 1
{
'type': 'box',
'xMin': 80,
'xMax': 90,
'yMin': 80,
'yMax': 130,
'backgroundColor': 'rgba(255, 60, 0, 0.35)',
'borderColor': 'transparent',
},
{
'type': 'label',
'xValue': 85,
'yValue': 85,
'content': ['Stage 1'],
},
# stage 2
{
'type': 'box',
'xMin': 90,
'xMax': 110,
'yMin': 80,
'yMax': 170,
'backgroundColor': 'rgba(255, 20, 20, 0.45)',
'borderColor': 'transparent',
},
{
'type': 'label',
'xValue': 95,
'yValue': 85,
'content': ['Stage 2'],
},
],
},
},
'elements': {
'point': {
'radius': 2,
}
},
# title doesn't show up
'title': {
'display': True,
'text': 'Blood Pressure January',
},
},
}