Having some trouble figuring out what i’ve done wrong. I created a Dataset class so i could just call const set = new Dataset(..) and then push these into the chart datasets as i went along.
If i add my data via the class then the drag of the graph data stops working, when dragging it will put the start of the data way off to the start of the chart. Yet the data is correctly displayed.
Best i can tell is that what is being passed into the onDrag callback should be an array of values, but when its not working it’s just a single value.
I’ve created a fiddle showing what it should do https://jsfiddle.net/e4ohu2f5/3/
and this is what it does https://jsfiddle.net/e4ohu2f5/2/ the class data is the “tuesday” slot.
I think the class is correct? Its the first time i’ve really done anything with javascript classes.
Any pointers would be good.
class Dataset {
constructor(xAxislabels, label) {
this.label = label;
this.xAxisLabels = xAxislabels;
this.data = Array(xAxislabels.length).fill([]);
this.fill = false;
this.backgroundColor = [
'rgba(153, 102, 255, 0.2)',
];
this.borderColor = [
'rgb(153, 102, 255)',
];
this.borderSkipped = false;
this.borderWidth = 1;
this.pointHitRadius = 25;
this.tension = 0.4;
this.dragData = true;
this.tooltip = {
callbacks: {
label: function(item) {
if (!item.parsed._custom) {
console.log("dynamic couldn't parse the item?");
return;
}
const date = DATE.fromSeconds(item.parsed._custom.barStart / 1000).toLocaleString();
const time_start = DATE.fromSeconds(item.parsed._custom.barStart / 1000).toLocaleString(
DATE.TIME_24_SIMPLE
);
const time_stop = DATE.fromSeconds(item.parsed._custom.barEnd / 1000).toLocaleString(
DATE.TIME_24_SIMPLE
);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`
}
}
};
}
// Setter
setData(xAxisLabel, data) {
const pos = this.xAxisLabels.indexOf(xAxisLabel);
console.log("pos: ", pos);
this.data[pos] = data;
}
}
let myData = new Dataset(["Sun 19th Feb 2023", "Mon 20th Feb 2023", "Tue 21st Feb 2023", "Wed 22nd Feb 2023", "Thu 23rd Feb 2023", "Fri 24th Feb 2023", "Sat 25th Feb 2023"], 'task_descript');
myData.setData('Tue 21st Feb 2023', ["10:30", "11:30"]);
const options = {
type: "bar",
data: {
labels: [
"Sun 19th Feb 2023",
"Mon 20th Feb 2023",
"Tue 21st Feb 2023",
"Wed 22nd Feb 2023",
"Thu 23rd Feb 2023",
"Fri 24th Feb 2023",
"Sat 25th Feb 2023"
],
datasets: [myData,
{
label: "",
data: [
["08:25", "08:39"],
["09:45", "09:55"],
[],
[],
[],
[],
[]
],
backgroundColor: ['rgba(153, 50, 255, 0.2)'],
borderColor: ['rgb(153, 102, 255)'],
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function(item) {
/* if (!item.parsed._custom) {
console.log("couldn't parse the item?");
return;
} */
const date = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString();
const time_start = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE.fromSeconds(
item.parsed._custom.barEnd / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
},
{
label: "",
data: [
["08:39", "08:59"],
["08:39", "09:00"]
],
backgroundColor: "blue",
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function(item) {
if (!item.parsed._custom) {
console.log("Tis couldn't parse the item?");
return;
}
const date = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString();
const time_start = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE.fromSeconds(
item.parsed._custom.barEnd / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
},
{
label: "",
data: [
["10:39", "15:59"],
["11:00", "11:30"]
],
borderSkipped: false,
backgroundColor: ['rgba(30, 130, 76, 0.2)'],
borderColor: ['red'],
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function(item) {
if (!item.parsed._custom) {
console.log("couldn't parse the item?");
return;
}
const date = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString();
const time_start = DATE.fromSeconds(
item.parsed._custom.barStart / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE.fromSeconds(
item.parsed._custom.barEnd / 1000
).toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
}
]
},
options: {
indexAxis: "y",
onHover: function(e) {
const point = e.chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false)
if (point.length) e.native.target.style.cursor = 'grab'
else e.native.target.style.cursor = 'default'
},
scales: {
y: {
stacked: true
},
x: {
parsing: false,
stacked: false,
position: "top",
type: "time",
time: {
unit: "hour"
},
min: "07:00",
max: "19:00"
}
},
plugins: {
legend: {
display: false
},
dragData: {
round: 1,
showTooltip: true,
onDragStart: function(e, element) {
// console.log(e);
// console.log("element: ", element);
},
onDrag: function(e, datasetIndex, index, value) {
e.target.style.cursor = "grabbing";
// prohibit values < 0
// if (value < 0) return false
console.log(value);
//console.log(e, datasetIndex, index, value);
},
onDragEnd: function(e, datasetIndex, index, value) {
e.target.style.cursor = "default";
// console.log(datasetIndex, index, value)
}
}
}
}
}
let ctx = document.getElementById("chartJSContainer").getContext("2d");
const myChart = new Chart(ctx, options);
console.log(myChart.config)```
