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.

enter image description here

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");

0 Answers