I am attempting to mimic a gannt chart format using ChartJS 2.9's floating bar feature. So far I have managed to do something similar with a line chart and some creative bending of ChartJS but there were serious flaws with it and it was not functioning like I needed it to.
Here is what I have right now that works, which is just using a simple dataset with integers:
var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-1-6", "y": "2021-2-16"},{"x": "2021-1-31", "y": "2021-5-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-1-7"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var data = {
type: 'horizontalBar',
data: {
labels: empNames,
datasets: [{
label: 'data',
data: [
[-3, 0],
[1, 4]
],
backgroundColor: 'lightblue'
}, {
label: 'data',
data: [
[1, 3],
[6, 8]
],
backgroundColor: 'lightblue'
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
};
var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>Well, true to fashion, I somehow fixed my initial issue. Now I can't get the x axes values for format. Here is the code I have now below. I believe, based on the ChartJS docs, that I have the time object set up correctly and I included all of the displayFormat options.
Have spent a good deal of time writing this question looking for something I may have missed data-wise as to why the labels won't format.
var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-01-06", "y": "2021-02-16"},{"x": "2021-01-31", "y": "2021-05-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-01-07"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);
var dataSets = [];
for (var i1 = 0; i1 < dateData.length; i1++) {
dataSets.push({
label: 'data',
data: [
[moment(dateData[i1].x, 'YYYY-MM-DD'), moment(dateData[i1].y, 'YYYY-MM-DD')],
[moment(dateData[i1 + 1].x, 'YYYY-MM-DD'), moment(dateData[i1 + 1].y, 'YYYY-MM-DD')]
],
backgroundColor: 'lightblue'
});
i1++
}
var data = {
type: 'horizontalBar',
data: {
labels: empNames,
datasets: dataSets
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
},
scales:{
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
millisecond: 'MMM YY',
second: 'MMM YY',
minute: 'MMM YY',
hour: 'MMM YY',
day: 'MMM YY',
week: 'MMM YY',
month: 'MMM YY',
quarter: 'MMM YY',
year: 'MMM YY'
}
},
ticks: {
min: moment('2020-09-01', 'YYYY-MM-DD'),
max: moment('2021-07-01', 'YYYY-MM-DD'),
},
}],
}
}
};
var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>I am probably over looking something but can't figure out what it is.
