I have this Bar Chart with two data Sets. I'm trying to show the number of clicks for each application for Employees and Students.
Each bar represents an app. As you can see, for employees, I have app A,B,C,D, etc, and for students, I drew in app 1, 2, 3, 4, etc.
The array employee_app_names contains the label values for Employees. The array student_app_names contains the label values for Students.
How can I have multiple labels for multiple data sets in a bar graph so that the bar graph looks like the image I've attached?
Here's my Code:
eval("employee_app_names = [" + response.employee_app_names + "]");
eval("employee_app_clicks = [" + response.employee_app_clicks + "]");
eval("student_app_names = [" + response.student_app_names + "]");
eval("student_app_clicks = [" + response.student_app_clicks + "]");
var ctx = $("#" + reportName).get(0).getContext("2d");
ctx.canvas.width = 800;
ctx.canvas.height = 250;
var data = {
labels: employee_app_names, // THIS IS A,B,C,D,E,ETC
datasets: [{
data: employee_app_clicks,
label: "Employees/Aux",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(86, 88, 135,0.7)"
},
{
data: student_app_clicks,
label: "Students",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(117, 196, 124,0.7)"
}
]
}
myNewChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: response.title
},
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
}, "json");