2

I have time series data in a database that looks like this:

[
  {
    min: 100,
    max: 200,
    avg: 150,
    time: 12345678.. (unix timestamp)
  },
  {
    min: ..
    ...
  }, ...
]

I am able to draw a line chart using the avg value by pulling it from the database as data points such as:

[
  {
    t: 12345678... (unix timestamp)
    y: 150 (avg value)
  },...
]

What I am trying to achieve is drawing three lines for min, max and avg respectively with the same dataset as:

[
  {
    t: 12345678... (unix timestamp),
    y1: 150 (avg value),
    y2: 100 (min value),
    y3: 200 (max value)
  },...
]

I have tried looking at documentation and many questions here but did not find a lead. I can separate the datasets but normally I am processing a lot of data on the backend and wanted to see if this can be done without any further processing. Want to know if this is achievable or it's chart.js' limitation?

Adi.P
  • 370
  • 1
  • 12
  • Would it be like [this two-line chart](https://www.chartjs.org/samples/latest/scales/multiline-labels.html) but with an extra line? If not, could you post an sample Google image how it should look? – adelriosantiago Nov 10 '20 at 08:15
  • Yes @adelriosantiago exactly like that but by using a single dataset with multiple key values. – Adi.P Nov 10 '20 at 16:17

1 Answers1

1

You can't use multiple key values with Chart.JS because it is not meant to accept that data format however you can format incoming data to create a chart based on the two-line sample.

Here is the working demo: https://jsfiddle.net/adelriosantiago/esn2wjxv/27/ enter image description here

This is how data is prepared:

  1. Raw data in the wrong format is called rawData.
  2. The function getSingleProp transforms data (the second argument) so that only the property prop (the first argument) is extracted. This happens at the line:
data.map((i) => {
    return { y: i[prop], x: i.time }
})
  1. When calling Chart.JS we simply use getSingleProp("[the property we want]", rawData) as data resulting in the chart you are looking for.
adelriosantiago
  • 7,762
  • 7
  • 38
  • 71
  • Thanks. I am aware that I can do it this way. What I was looking for was to see if it was natively supported since the data I plot is in range from thousands to millions. But I guess this is the only way to go. – Adi.P Nov 11 '20 at 07:16
  • I see, bear in mind that data ranging from thousands to millions may not work nicely in Chart.JS, not even if data could be feed as you mentioned. Perhaps you should take a look at [Three.JS](https://threejs.org/) or WebGL in general. Both are for 3D graphics but you can ignore one axis. Graphics in any of these 2 frameworks use GPU. This would allow you to [render millions of objects](https://www.yuichiroharai.com/wgl/15_one_million_particles/). – adelriosantiago Nov 11 '20 at 07:25