CODEWITHSUNDEEP
javascriptgraphmomentjschart.jschart.js2
Damkulul
Damkulul

Reputation: 1476

change date on x-axis dynamically

I have a chart, my x-axis is a timeline I need my timeline to change dynamically according to my data. for example: if the dates range (in my data) is big I need my axis to show months if the range is small then days. Ill try to make it clearer : I have a range of dates : '09/07/2016' - '09/02/2016' - my axis needs to show my data according to days. but: if my range is : '09/07/2016' - '09/02/2017' then my axis needs to show months or quarters because the gap is bigger between these 2 dates. Is it possible and how?

Upvotes: 4

Views: 6384

Answers (2)

tfont
tfont

Reputation: 11233

What you are looking for is this:

chart.options.scales.xAxes[0].time.unit = 'hour';
chart.update();

Presenting that you want data for just a day (24 hours) so go by hours as given in this above example.

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

Upvotes: 1

jordanwillis
jordanwillis

Reputation: 10705

Per the chart.js API, the Time Scale is what you will want to use. However, the scale will not automatically adjust the display format based upon the magnitude of the span of dates in your dataset.

You will have to implement your own javascript function that will change the scale options for what you want based upon the selected data. This might sound challenging, but if you think about it its really not.

In fact, since you will be providing your users with a way to filter data, you will already have to implement a similar function that will change the underlying data in the chart (after a user sets a filter) and then re-render the chart (achieved by using the .update() prototype method).

In this same function, implement your logic to determine the appropriate time scale display format (based upon the span of your data) and just update the chart scale options as well (before you call .update()). Here is an example below.

Assuming you have some sort of date range select box in your HTML with a class of .date-filter...

// initial chart definition
var chart = new Chart($('#myChart'), {
  type: 'line',
  data: {
    labels: [/* chart labels */],
    datasets: [{
      data: { /* chart data */},
    }]
  },
  options: { /* options...including time scale options */}
});

// change handler on the date filter drop down which changes the chart data and time scale options
$( ".date-filter" ).change(function() {
  var selectedRange = $(this).val();
  var parsedStartDate = // use selectedRange to parse start date
  var parsedEndDate = // use selectedRange to parse end date
  var dayMagnitude = // use moment.js to calculate difference in start/end in days

  if (daysMagnitude < 30) {
    // configure time scale displayFormat in terms of days
  } else if (daysMagnitude < 90) {
    // configure time scale displayFormat in terms of months
  } else if (daysMagnitude < 180) {
    // configure time scale displayFormat in terms of quarters
  } 
  // ...

  // update the underlying chart data by accessing the underlying dataset that you are modifying
  chart.data.datasets[0].data = // new data object based on the filter criteria

  // update the time scale options
  chart.options.scales.yAxes = // updated time scale options

  // re-render your chart
  chart.update();
});

Upvotes: 1

Related Questions