score:35
You have to move your data within a dataset
. If you take a look at the usage manual, a datasets
array is used. The "hint" for datasets within the docs for time is also not that obvious (See headline).
See the snippet below:
I just copied the basic usage example and inserted the data from your first attempt (+ added few labels)
UPDATE 18.03.2020
I've updated the snippet to use Chart.js 2.8.0
and added following code, as suggested in the comment by @Erik
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
UPDATE 16.02.2021
As pointed out by @habib, the 2.9.4 version was throwing couple of errors. I guess that those were caused by missing dependency (moment.js). See:
Note: starting v2.8, Moment.js is an optional dependency for Chart.js and Chart.min.js. In order to use the time scale with Moment.js, you need to make sure Moment.js is fully loaded before requiring Chart.js. You can either use a shim
Therefore, I changed following things:
- Updated Chart.js to 2.9.4
- Added moment.js (2.29.1) as dependency
- Adjusted the time format to be ISO8601 compliant (As suggested by soiboi)
var ctx = document.getElementById("examChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
options: {
scales: {
xAxes: [{
type: 'time',
}]
}
},
data: {
labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
datasets: [{
label: 'Demo',
data: [{
t: '2015-03-15T13:03:00Z',
y: 12
},
{
t: '2015-03-25T13:02:00Z',
y: 21
},
{
t: '2015-04-25T14:12:00Z',
y: 32
}
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<div class="container">
<canvas id="examChart"></canvas>
</div>
score:0
My suggestion would be to add the moment.js library to your project and format your dates using moment. Also I'm not sure about using the "t" and "y" here. I'd add the time as labels and matched that with the x data:
var data = {
labels: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
datasets: [
{
data: [12,21,32],
}
]
};
var myBarChart = Chart.Line(canvas,{
data:data,
});
There is a fiddle example here.
score:1
when using time, you have to use UTC time, as your local time is added(australia +10 hours / 36000 secs) so every country has a different time zone. the key is to use moment.utc in any conversion of time 0 seconds = moment.utc('1970-01-01 00:00:00')
use moment.utc('1970-01-01').add(3600, 'seconds')
to add a value and then
from y-axis values or tool tip items, you have to reference
callback: value => {
date = moment.utc(value);
if(date.diff(moment.utc('1970-01-01 23:59:59'), 'minutes') === 0)
{
return null;
};
date.format('HH:mm:ss');
}
label: (item, data) => data.datasets[item.datasetIndex].label +" "+
moment.utc(data.datasets[item.datasetIndex].data[item.index]).format("HH:mm:ss")
score:9
Building on what @RamizWachtler has answered, you can add to the options section of the chart to scale the times out properly. I'll note that this doesn't seem to work with Charts.js 2.3. Added a working snippet that uses the latest Charts.js version as of April 2019.
Additionally I've changed the time formatting to be ISO8601 compliant.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'linear'
}]
}
}
});
Source - https://www.chartjs.org/docs/latest/axes/cartesian/time.html
var ctx = document.getElementById("examChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
datasets: [{
label: 'Demo',
data: [{
t: "2015-03-15T13:03:00Z",
y: 12
},
{
t: "2015-03-25T13:02:00Z",
y: 21
},
{
t: "2015-04-25T14:12:00Z",
y: 32
}
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'linear'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0-rc.1/Chart.bundle.js"></script>
<div class="container">
<canvas id="examChart"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart.js creating a line graph using dates
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Creating a real time line chart using chartjs and firebase realtime db
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- How to plot a single value with line in line chart graph using charts.js?
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- Display line chart with connected dots using chartJS
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Using Chart.js - Creating Legend for Doughnut Chart
- how to draw line graph with line animation from left to right using chartjs?
- Add data to line chart using chart.js
- Chart Js update legend boxes of graph with graph line style
- Change Axis Line color in Chart created using chart.js
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Displaying line chart for multiple months using chart.js
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- How to shade between 2 lines on a line graph using chart.js version2
- display vertical axis label in line chart using chart.js
- Populating Chart.Js line graph with multiple lines using data from a JSON Object
- No tooltips on Chart JS line graph
- Chart JS Line Graph multitooltipkey background color issue
- Adding data to line chart using addData() method in Chart.js
- How to create a bar and a line in a same graph using chart.js in React?
- Problem creating scatter graph using chart.js
- Line Chart using Chart js with time data
- How to add an end line to my graph using Chart.js?
- Why is my line chart using multiple lines to connect random points? (Chart.js)
More Query from same tag
- How to create a line chart indicating which month a user wrote more or less blogs?
- Chart Js doesn't update the values in the first load
- Move x-axis to pass through given y-axis value in chart.js
- Why is here a number?
- Chartjs: Double x axis not having the same gridline
- How do you remove the data value from the mouse-over result in radar chart?
- Chart JS add max value to legend
- Can't get event from chartjs-annotation-plugin on mouseenter
- Chart.js Doughnut Chart Rendering Wrong
- Trying to call API and plot a line chart but it does not show
- How do I invert an y-axis using chart.js (v2.0-dev)
- Rotate left legend chartjs
- add info for points in line chart (js)
- GeoChart with nodeJS
- How to make the last item on the chart js active?
- load a graph with chart.js and react
- Impossible to render multiple charts with chart.js
- Automatic label updates
- How to access Controller properties in Chart.js
- Chart.js dinamically populate data in Oracle Application Express
- Showing 'undefined%' in the graph if data does not exist
- Having problems displaying multiple charts on a page
- Bug in canvas class in chart js
- How to delete a chart (canvas) out of its scope?
- JavaScript implementation doesnt work (Chart.js)
- How do I increase the space between the Legend and the Chart when using angular-chart.js?
- How do I remove the ticks or inner circles of my polar area chart Chart.js
- Chart.js Cannot read property 'apply' of undefined
- Full width bars in Chart.js version 2.7.2
- chartjs line graph destroy function is not clearing the old chart instances