score:7
Accepted answer
You need to sort the values before you pass them to labels
/ data
.
Example:
let timeData ={
"2019-08-10T06:27": 12,
"2019-08-10T06:26": 10,
"2019-08-10T06:25": 8,
"2019-08-10T06:24": 2,
"2019-08-10T06:28": 1
};
let entries = Object.entries(timeData);
entries.sort((a,b) => {
let aDate = moment(a[0]);
let bDate = moment(b[0]);
return aDate.toDate() - bDate.toDate();
});
let labels = entries.map(e => e[0]);
let data = entries.map(e => e[1]);
console.log(labels);
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
See JSFiddle for a working example.
If you want a zero line when there is no data, you need to add the zeroes to the data
.
Example:
let timeData ={
"2019-08-10T06:27": 12,
"2019-08-10T06:26": 10,
"2019-08-10T06:25": 8,
"2019-08-10T06:24": 2,
"2019-08-10T06:28": 1
};
let labels = [];
let data = [];
let date = moment('2019-08-10T06:00');
let endDate = moment('2019-08-10T07:00');
do {
let dateStr = date.format("YYYY-MM-DDTHH:mm");
labels.push(dateStr);
if(timeData.hasOwnProperty(dateStr))
data.push(timeData[dateStr]);
else
data.push(0);
date.add(1, 'minute');
} while(date.isBefore(endDate));
console.log(labels);
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">
See JSFiddle with Zero Line for an example with zero line
Source: stackoverflow.com
Related Query
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS: Ignoring x values and putting point data on first available labels
- How to show data values in top of bar chart and line chart in chart.js 3
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- line chart with {x, y} point data displays only 2 values
- using array values in chart.js data and label field
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Data with pair X and Y values
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to commaize the data values provided to a chart in Chart.JS?
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart.js Bar Chart - grouping and mapping data
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Doughnut Chart not displaying data with Chart Js and Backbone js
- How can I have different values for the chart and the tooltip in chart.js?
- Charts js and laravel: Render chart after passing in json data
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to fetch all data from API files and assign their values to chart?
- How to write better code in es6 for formatting an object with array values
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- How to show the chartjs bar chart data values labels as text?
- Chart.js How to sum the values in a pie chart and display them in the header
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart
- Chart.js combined line and bar chart with differing data points
More Query from same tag
- Chart.js - Shift/Stagger labels horizontally (for x axis) instead of rotating
- How can I change color of only one column in Barchart using Chart.js
- Chart.js doughnut and pie chart at same canvas mixed
- Show gridlines over graph in chart.js, show bold x-axis label in chart.js, mixure of intersecting graph colors in chart.js
- Select missing dates from a table in MySQL
- Convert/transpose one array into another in JavaScript?
- chartJS doesn't show graphs on iphone/ipad
- JavaScript doughnut chart with centered hover label
- How to fill a graph by a color till a vertical line using chart.js
- Chart.js plotting two json datasets on a line chart
- Cannot read property 'reactiveProp' of undefined in vue-chartjs
- Alter angular js chart wrapper to support drawing custom lines
- Use JSON file with chart.js
- drawing bar chart with chart.js jQuery
- Increase space between legend and chart
- Custom tooltip callback on one dataset (chartjs v 2.5)
- chartjs - bar graphs size not increasing
- angular-chart not showing Pie Chart
- how can plot graph using json data
- Angular Chart color does not change
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- How to implement dynamic data on chartjs?
- Try to change style in current month in chartJS
- charts.js from session var, flicker effect
- show multiple responsive chart in the same page using chart.js
- Using chart.js for isotopic patterns
- chart.js reduce file size
- Chart.js 2 - how to show all tooltips always and stylize it
- Chart.js - Scale of secondary y-axis?
- Chart.js only draws when I go through debug on Chrome