I am trying to plot some data as a scatter plot using Chart.js. I tryed almost everything on the internet and I am still getting the x-axis as shown in the screenshot below. The date format is an interger and I need it a date.
EDIT:
I also find out, when I omit the square brackets for the axis properties, which is teh way described in the documentations, I am getting an error (Uncaught Error: This method is not implemented: Check that a complete date adapter is provided. ). When I used the square brackets for the axis, the properties are not recognised.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The result I am getting is:
You can use a callback function to alter how the data on the axis is displayed.
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
callback: function(value, index, values){
// do something with value
return value;
}
}
}],
},
};
I found out, where the problem was:
I needed to reference an adaptor for the moment like this and remove the the square brackets for the properties of the axis as shown in the documetnation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.2"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: {ticks: {min: 0}},
xAxes: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
},
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
Related
I have 2 set of datasets I want to display in single line chart for last 7 days, and if possible only show single Y axis with max value from all data sets. I try to use time as xAxes but it is not showing up.
here is my code https://jsfiddle.net/e6trkxL0/
You have to place the labels for datapoints.
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
labels: [],
datasets: [{
label: 'Dataset 1',
data: [1, 4, 66, 7, 12, 3, 8],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [31, 14, 6, 71, 1, 35, 9],
borderColor: '#880000',
backgroundColor: '#880000',
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
xAxes: [{
type: "time",
// this is not doing much
// time: {
// min: start,
// max: end,
// unit: "day"
//}
}]
}
}
});
chart.render();
for (let i = 0; i < 7; i++) {
var labelDate = start;
labelDate.setDate(start.getDate() + 1);
chart.data.labels.push(labelDate.toLocaleString())
}
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>
2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide
For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.
To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-14-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
min: start,
max: end,
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
I'm upgrading from Chart.js 2 to 3 and encountering problems with my time chart.
Here's the fiddle: https://jsfiddle.net/58L42w3u/
(I obviously have to put some code in here too:)
var ctx = document.getElementById('myChart').getContext('2d');
var data = [{"x":"2021-06-01","t":null,"o":null}/* more in JsFiddle */];
var chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
backgroundColor: 'rgba(50,38,113,0.4)',
barPercentage: 1.0,
categoryPercentage: 1.0,
data: data,
label: 'Total',
parsing: {
yAxisKey: 't',
},
},
{
backgroundColor: 'rgba(59,191,69,0.4)',
barPercentage: 1.0,
categoryPercentage: 1.0,
data: data,
label: 'Occupied',
parsing: {
yAxisKey: 'o',
},
},
]
},
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
bounds: 'data',
stacked: true,
ticks: {
autoSkip: false,
},
time: {
displayFormats: {
month: 'MMM YY',
},
unit: 'month'
},
type: 'timeseries'
},
y: {
beginAtZero: true,
},
},
}
});
As you can see, the data holds every day from 2021-06-01 to 2021-10-30.
Currently, the x-axis grid lines are displayed in the center of a month and the x-axis labels at the start of a month. I'd like the exact opposite:
The grid line should be before every first of a month and the labels between those lines. I just cannot find a way to manage that.
Are you looking for offset: false?
options: {
scales: {
x: {
grid: {
offset: false
}
}
}
}
false should be the default value according to the docs, but maybe type: 'timeseries' changes this.
Example:
I'm trying to plot a line graph with Chart.js that shows trends from a series of lap times.
This is my (example) Data:
const datetime = ["2021-02-08 15:01:50", "2021-02-08 16:01:50", "2021-02-08 17:01:50"];
const position = ["8", "8", "7"];
const laptime = ["1:32.599", "1:32.300", "1:31.000"];
And here is my chart.js Code:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: datetime, // list of races,
datasets: [{
label: "Lap Time",
fill: false,
data: times,
},{
label: "Position",
fill: false,
data: position ,
}]
},
options: {
scales: {
xAxes: [{
display: true,
type: 'time',
time: {
unit: 'hour',
round: 'hour',
unitStepSize: 1
}
}],
yAxes: [{
display: true,
type: 'time',
time: {
parser: 'm:s.SSS',
unit: 'seconds',
unitStepSize: 1,
displayFormats: {
'seconds': 'm.s'
}
},
ticks: {
min: '1:0.0',
max: '2:0.0'
}
}]
}
}
});
I want to have two Datasets every Hour one representing the Lap Time and the other the Position
This is the code I'm using to display the chart
<canvas id="myChart"></canvas>
<script>
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
},{
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart');
console.log(data1);
var chart = new Chart(ctx, {
type: 'line',
data: data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
</script>
I've tried pasting a typical chart.js example from their website and the chart is displayed just fine. I have also tried using a string in the x-axis but that doesn't seem to work as well
Can't figure out why this is happening, any help would be greatly appreciated.
As palaѕн commented, you don't correctly retrieve the 2D-Context. This should look as follows.
var ctx = document.getElementById('myChart').getContext('2d');
Further the data object needs to be defined in a different way.
data: {
datasets: [{
data: data1
}]
},
Please have a look at your amended code below.
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
}, {
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: data1
}]
},
data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>
I am fairly new to javascript world, so bear with me if there is an obvious solution to this, but I'm struggling to graph the dates (X-points) on the X axis of the chartjs graph. I get some weird times there that you can check on jsfiddle. What am I doing wrong?
var ctx = document.getElementById("myChart");
var data = {
datasets: [{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 11,
y: 2000000.00
},
{
x: 2017 - 04 - 12,
y: 1000000.00
},
{
x: 2017 - 04 - 13,
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 12,
y: 472943.00
},
{
x: 2017 - 04 - 13,
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
unit: 'day',
time: {
displayFormats: {
day: 'D MMM YYYY'
},
}
}]
}
}
});
My code is available on http://jsfiddle.net/py1bpf02/3/
In your datasets, dates should be strings. What you did is math, not dates. 2017-04-11 = 2002.
var ctx = document.getElementById("myChart");
var data = {
datasets: [
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-11",
y: 2000000.00
},
{
x: "2017-04-12",
y: 1000000.00
},
{
x: "2017-04-13",
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-12",
y: 472943.00
},
{
x: "2017-04-13",
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'D MMM'
},
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>