score:1
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.
Source: stackoverflow.com
Related Query
- scattered graph with xAxes of date react-chratjs-2
- Graph streaming real-time data with react and chartjs
- load a graph with chart.js and react
- Chart.js - Plot line graph with X , Y coordinates
- Chart.js Bar graph with percentage values
- Using Charts.js with react
- Chartjs v2 xAxes label overlap with scaleLabel
- Line graph with linear timescale in Chart.js
- Chart.js with React
- Create a rounded bar graph with Angular and chartJS
- how to get React chartjs to resize back down with window
- Chart.js with dual axis on bar and line graph
- Chartjs line graph dataset with offset
- Chart.js - Plot line graph with X , Y coordinates and connected by line
- Maintain Y axis scale in graph with scroll in the X axis when the dataset grows bigger. Aspect-ratio problem
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- Charts.js graph with multiple Y Axes
- Creating a Normal Distribution graph with Chart.js
- Dynamically change type with react-chartjs-2 React
- how to use chart.js with react Hook?
- Update Chart JS with date range selector
- Deleting and recreating an element with React
- React chart : prevent chart's canvas scaling with height and width
- chartjs-plugin-zoom not working with my React project
- How to Create Chart.JS Bar Graph with Min, Max & Average
- Chart.js xAxes Date Labels are altered based on screen width
- Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph
- Draw asynchronous information on a graph with VueJS
- Laravel PDF generation with Graph and send it with Email
- how to draw line graph with line animation from left to right using chartjs?
More Query from same tag
- How to fix chart not starting at zero
- How to adjust the Js Chart's label?
- Uncaught ReferenceError: Chart is not defined
- generator-angular-fullstack cannot add angular-chart.js
- Grab array from div text to plot with ChartJS
- Fill between two lines Chartjs
- vb.net string to chartjs data field?
- Remove blank space in chart.js chart
- My canvas/graph jumps to left after creating the object
- How to use Angular-Charts JS?
- Vue2 trying to set chart title
- Chart.js: Create custom major ticks on log x-Axis?
- How to change text colour of specific labels of axis in Chart JS?
- Unable to make y-axis to begin at zero on Charts.js v2.1.4
- Load JSON to display data, using ng-repeat {ANGULAR.JS}
- Numeric X axis for linechart
- Javascript / JSON error: TypeError: myObj is undefined
- How to reduce the gap between bars on bar chart
- Chart JS dataset disabled by default
- ChartJs Force scatter plot to be square shaped
- Show/hide All nested data in ChartJS Pie chart when outer is shown/hidden
- Chart.js bubble chart pointStyle not working
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- vue js bar-chart gradient color not showing
- Is it possible to print a chart with vue-chartjs?
- Changing the Y axis unit in Chartjs
- Is it possible to use Chart.js in web2py?
- How to update data Chart in async way in Angular Chart.js?
- Multiple dynamic vertical lines on a chart with Chart.js
- Chart.js - how to disable everything on hover