Hello,
I’m using the code below to create a Horizontal bar chart in Chart js. I’ve create a structure then added it to the ReportData array and use it for the chart data. However, my chart renders blank with no data in it.
Can someone please help in understanding why my chart is not rending the archivedMsg and DisplayNames value in the X and Y axis in the chart?
I can see the labels in the legend with the appropriate colors but nothing in the chart itself.
Any assistance will be greatly appreciated.
const ArchivedData = ;
const lbl_arcvhiveDate = ;
const lbl_srvrName = ;
const lbl_dbName = ;
const lbl_displayName=;
const lbl_msgNum = ;
const reportData =;
const displayLabel = ;
const displayBGColor = ;
const displayBorderColor = ;
const colors = [‘255, 99, 132’, ‘54, 162, 235’, ‘255, 206, 86’, ‘231, 233, 237’, ‘75, 192, 192’, ‘151, 187, 205’, ‘220, 220, 220’, ‘247, 70, 74’, ‘70, 191, 189’, ‘253, 180, 92’, ‘148, 159, 177’, ‘77, 83, 96’];
// Input your csv file path.
const CSVFile = ‘CSV\DailyResults.csv’
//console.log(CSVFile);
// parse file from CSV to JSON
d3.csv(CSVFile).then(function(datapoints){
// iterate through the values of the field
for (i=0; i < datapoints.length; i++){
if(datapoints[i].ArchivedDate != ‘’ || datapoints[i].TotalMessages != ‘’ ){
lbl_arcvhiveDate.push(datapoints[i].ArchivedDate)
lbl_srvrName.push(datapoints[i].ServerName)
lbl_dbName.push(datapoints[i].DBName)
lbl_displayName.push(datapoints[i].DisplayName)
lbl_msgNum.push(datapoints[i].TotalMessages)
}
}
const formatSum = new Intl.NumberFormat('en-US');
let shortName = ''
function removeJNfromName(checkName){
if(checkName.startsWith('JN_')){
shortName = checkName.replace('JN_', '')
}else{
shortName = checkName
}
return shortName
}
const formattedDisplayName = [];
lbl_displayName.forEach((nameitem)=>{
formattedDisplayName.push(removeJNfromName(nameitem))
});
let totalArchivesArray = lbl_arcvhiveDate.map((day, index) => {
let dayObject = {};
dayObject.date = day;
dayObject.srvName = lbl_srvrName[index];
dayObject.dbName = lbl_dbName[index];
dayObject.displayName = formattedDisplayName[index];
dayObject.archiveMsg = lbl_msgNum[index];
return dayObject;
})
totalArchivesArray.sort(function (b, a) {
return a.archiveMsg - b.archiveMsg
});
totalArchivesArray.map((datapoint, i) => {
reportData.push({
label: totalArchivesArray[i].displayName,
backgroundColor: ‘rgba(’ + colors[i % colors.length] + ‘, 0.4)’,
borderColor: ‘rgb(’ + colors[i % colors.length] + ‘)’,
borderWidth: 1,
categoryPercentage: 1,
hoverBackgroundColor:‘rgba(180, 180, 180, 0.5)’,
hoverBorderColor: ‘rgba(0, 0, 0, 1)’,
data: datapoint
})
})
const xlabelsDisplay = lbl_arcvhiveDate.length - 2
// config
const config = {
type: ‘bar’,
data:{
datasets: reportData
},
options: {
indexAxis: ‘y’,
parsing: {
xAxisKey: ‘archiveMsg’,
yAxisKey: ‘displayName’
},
responsive: true,
borderRadius: 10,
minBarLength: 3,
layout:{
padding:{
right: 100,
//top: 50,
},
},
scales: {
x: {
title: {
display: true,
text: ‘Journaled Messages’
},
grid: {
display: false,
},
ticks:{
scaleBeginAtZero: true,
fontStyle: ‘bold’,
maxTicksLimit: lbl_arcvhiveDate.length - xlabelsDisplay
},
},
y: {
title: {
display: true,
text: 'Journal Name'
},
grid: {
display: false
},
ticks:{
scaleBeginAtZero: true
},
grace: 5
},
},
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
