javascript - Chartjs multiple barcharts corresponding to one label - Stack Overflow

admin管理员组

文章数量:1356582

I have a question regarding barcharts in Chartjs.

I want to display multiple barcharts for each label, but it has proven very hard for some reason.

I am building a chart to display the amount of repetitions and sets someone has done, as a function of the date.

So on the X-axis I have the dates - and on the Y-axis I have the amount of repetitions. If the person has done 3 sets that day, it should display 3 bars on that date, where the value (height of the bar) is the number of repetitions.

For testing purposes I have three dates and a few sets/reps for each date:

"2017-05-25" - Set 1: 7 reps "2017-05-30" - Set 1: 8 reps - Set 2: 9 reps - Set 3: 10 reps "2017-05-31" - Set 1: 3 reps - Set 2: 7 reps - Set 3: 12 reps - Set 4: 8 reps

This is my current chartData object.

var chartData = {
      labels: Object.keys(items.dates),
      datasets: [{
           label: "Reps",
           backgroundColor: "blue",
           data: [7]
      }, {
           label: "Reps",
           backgroundColor: "red",
           data: [8, 9, 10]
      }, {
           label: "Reps",
           backgroundColor: "green",
           data: [3, 7, 12, 8]
      }]
};

The dates are displayed correctly, but I can't seem to get the reps/sets right. I believe I somehow have to group them some other way around or something.

All help appreciated!

UPDATE Made a jsfiddle: /

As you can see, the sets fall into the wrong dates - in the first date: 2017-05-25, there is supposed to be only 1 set, but it shows 3 (7,8,3).

I have a question regarding barcharts in Chartjs.

I want to display multiple barcharts for each label, but it has proven very hard for some reason.

I am building a chart to display the amount of repetitions and sets someone has done, as a function of the date.

So on the X-axis I have the dates - and on the Y-axis I have the amount of repetitions. If the person has done 3 sets that day, it should display 3 bars on that date, where the value (height of the bar) is the number of repetitions.

For testing purposes I have three dates and a few sets/reps for each date:

"2017-05-25" - Set 1: 7 reps "2017-05-30" - Set 1: 8 reps - Set 2: 9 reps - Set 3: 10 reps "2017-05-31" - Set 1: 3 reps - Set 2: 7 reps - Set 3: 12 reps - Set 4: 8 reps

This is my current chartData object.

var chartData = {
      labels: Object.keys(items.dates),
      datasets: [{
           label: "Reps",
           backgroundColor: "blue",
           data: [7]
      }, {
           label: "Reps",
           backgroundColor: "red",
           data: [8, 9, 10]
      }, {
           label: "Reps",
           backgroundColor: "green",
           data: [3, 7, 12, 8]
      }]
};

The dates are displayed correctly, but I can't seem to get the reps/sets right. I believe I somehow have to group them some other way around or something.

All help appreciated!

UPDATE Made a jsfiddle: https://jsfiddle/ytkqwL9x/1/

As you can see, the sets fall into the wrong dates - in the first date: 2017-05-25, there is supposed to be only 1 set, but it shows 3 (7,8,3).

• javascript
• chart.js

Share Improve this question Follow edited May 31, 2017 at 15:43 Mathias Lund asked May 31, 2017 at 12:30 Mathias LundMathias Lund 77222 gold badges99 silver badges2424 bronze badges 2

• Sure! will do now, 2 sec – Mathias Lund Commented May 31, 2017 at 15:34
• Check updated question – Mathias Lund Commented May 31, 2017 at 15:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You need to arrange the data arrays of your datasets like this ...

var chartData = {
   labels: Object.keys(items.dates),
   datasets: [{
      label: "Reps",
      backgroundColor: "blue",
      data: [7, 8, 3]
   }, {
      label: "Reps",
      backgroundColor: "red",
      data: [0, 9, 7]
   }, {
      label: "Reps",
      backgroundColor: "green",
      data: [0, 10, 12]
   }]
};

note: if there is no data for a particular label (date) then you'd have to add a 0 for that

Here is the working example on jsFiddle

本文标签： javascriptChartjs multiple barcharts corresponding to one labelStack Overflow