javascript - Chart JS - set start of week for x axis time series - Stack Overflow

admin管理员组

文章数量:1345017

Using ChartJS 2.4, I am querying for a set of records between two dates:

      startDate: '2016-11-05T18:06:17.762Z'
      endDate: '2016-12-05T18:06:17.762Z'

Given the scale config, I want to start the week on the user's selected date range...

 isoWeekday: true,
 type: 'time',
 unitStepSize: 1,
 time: {
   displayFormats: {
     'week': 'MMM DD'
   },
   unit: 'week',
 },

This gets me a truncated graph:

So if no records are returned for the start date, 11/5, I manually insert data at the beginning of the array with a 0 value just to ensure that beginning date the user is expecting is displayed:

  if (scope.chart_data.labels.indexOf('11/5') == -1) {
    scope.chart_data.labels.unshift('11/5');
    scope.chart_data.datasets[0].data.unshift(0);
  }

Except doing this awkardly extends the graph out by a week with no data... and doesn't start the week on 11/5:

How can I start the chart on 11/5, or whichever week I want, and have the unit: week config increment from there?

If I remove unit: week and use unitStepSize: 7 to manually set the step size, it does what I want at the beginning, but for some reason mushes in the last label:

Using min max in the time object,

   max: scope.end_display, // 12/05/2016
   min: scope.start_display // 11/05/2016

I get:

Why won't it start the line chart on the 11/5?

Labels:

["11/05/2016", "11/06/2016", "11/07/2016", "11/08/2016", "11/09/2016", "11/13/2016", "11/15/2016", "11/16/2016", "11/17/2016", "11/20/2016", "11/27/2016", "11/28/2016", "11/29/2016", "12/01/2016", "12/04/2016"]

Data:

[0, 3, 2, 1, 1, 7, 3, 2, 26, 2, 6, 3, 1, 1, 1]

Using ChartJS 2.4, I am querying for a set of records between two dates:

      startDate: '2016-11-05T18:06:17.762Z'
      endDate: '2016-12-05T18:06:17.762Z'

Given the scale config, I want to start the week on the user's selected date range...

 isoWeekday: true,
 type: 'time',
 unitStepSize: 1,
 time: {
   displayFormats: {
     'week': 'MMM DD'
   },
   unit: 'week',
 },

This gets me a truncated graph:

So if no records are returned for the start date, 11/5, I manually insert data at the beginning of the array with a 0 value just to ensure that beginning date the user is expecting is displayed:

  if (scope.chart_data.labels.indexOf('11/5') == -1) {
    scope.chart_data.labels.unshift('11/5');
    scope.chart_data.datasets[0].data.unshift(0);
  }

Except doing this awkardly extends the graph out by a week with no data... and doesn't start the week on 11/5:

How can I start the chart on 11/5, or whichever week I want, and have the unit: week config increment from there?

If I remove unit: week and use unitStepSize: 7 to manually set the step size, it does what I want at the beginning, but for some reason mushes in the last label:

Using min max in the time object,

   max: scope.end_display, // 12/05/2016
   min: scope.start_display // 11/05/2016

I get:

Why won't it start the line chart on the 11/5?

Labels:

["11/05/2016", "11/06/2016", "11/07/2016", "11/08/2016", "11/09/2016", "11/13/2016", "11/15/2016", "11/16/2016", "11/17/2016", "11/20/2016", "11/27/2016", "11/28/2016", "11/29/2016", "12/01/2016", "12/04/2016"]

Data:

[0, 3, 2, 1, 1, 7, 3, 2, 26, 2, 6, 3, 1, 1, 1]

• javascript
• angularjs
• charts
• time-series
• chart.js

Share Improve this question Follow edited Dec 16, 2016 at 16:15 user3871 asked Dec 16, 2016 at 9:20 user3871user3871 12.7k3636 gold badges140140 silver badges282282 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I realize I'm super late on this, but maybe you should try setting the distribution option to series. See the documentation here:

Scale Distribution

The distribution property controls the data distribution along the scale:

'linear': data are spread according to their time (distances can vary)
'series': data are spread at the same distance from each other

This should fix that weird formatting that you have where the spacing is all mucked up.

You should modify axis settings to set max and min value (start-end date range probably). An example (NB! Use your own required formats):

time: {
  unit: 'month',
  displayFormats: {
     month: 'MM'
  },
  max: moment(data.end_date).format('MM'),
  min: monent(data.start_date).format('MM')
}

You can add isoWeekday: true into time config

https://www.chartjs/docs/latest/axes/cartesian/time.html

本文标签： javascriptChart JSset start of week for x axis time seriesStack Overflow