score:1

Accepted answer

you should define your x-axis as a time cartesian axis and provide the data as individual points, where each element has a t and an y property (also take a look at this answer). using array.map(), this can be done as follows:

data['julian dates']
  .map((d, i) => ({ t: julianinttodate(d), y: data['ndvi values'][i] }))

note that i use the julianinttodate function provided by stephane boisseau in this answer to convert the julian dates into regular dates.

please take a look at the runnable code below and see how it works. while this is plain javascript, it should be easy to make it also work with react-chartjs-2.

const data = {
  'ndvi values': [0.1158, 0.1975, 0.1913, 0.2137, 0.1603, 0.13, 0.246, 0.249, 0.1955, 0.124, 0.1854, 0.2721, 0.2095, 0.1357, 0.2444],
  'julian dates': [2458208.0, 2458386.0, 2458476.0, 2458566.0, 2458653.0, 2458746.0, 2458836.0, 2458921.0, 2459026.0, 2459111.0, 2458391.0, 2458476.0, 2458566.0, 2458746.0, 2458836.0]
};

// convert a julian number to a gregorian date (s.boisseau / bubblingapp.com / 2014)
function julianinttodate(n) {   
    var a = n + 32044;
    var b = math.floor(((4*a) + 3)/146097);
    var c = a - math.floor((146097*b)/4);
    var d = math.floor(((4*c) + 3)/1461);
    var e = c - math.floor((1461 * d)/4);
    var f = math.floor(((5*e) + 2)/153);

    var d = e + 1 - math.floor(((153*f) + 2)/5);
    var m = f + 3 - 12 - math.round(f/10);
    var y = (100*b) + d - 4800 + math.floor(f/10);
    return new date(y,m,d);
}

new chart('mychart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'ndvi values',
      data: data['julian dates'].map((d, i) => ({ t: julianinttodate(d), y: data['ndvi values'][i] })),
      bordercolor: 'blue',
    }]
  },
  options: {
    scales: {
      yaxes: [{
        ticks: {
          beginatzero: true
        }
      }],
      xaxes: [{
        type: 'time',
        time: {
          unit: 'month',
          displayformats: {
            month: 'yyyy/m'
          },
          tooltipformat: 'yyyy/m/d'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.min.js"></script>
<canvas id="mychart" height="90"></canvas>

score:0

try this library: chart.scatter/

it is an add-on to chart.js that may help you.


Related Query