1👍
✅
Here’s how you could accomplish this …
window.onload = function() {
// for demonstration purposes only
// you should be using the actual json data from the ajax response
var data = [{ "id": "1", "User_id": "Mahi_rocks007@gmail.com", "Name": "MahiMoj", "Attempt": "10", "Correct": "9", "Score": "9", "Accuracy": "9", "Percentage": "10", "Avg_Time": "10", "Percentile": "11", "Paper_id": "tbl11" }, { "id": "2", "User_id": "moj_moj@moj.com", "Name": "MOj", "Attempt": "56", "Correct": "656", "Score": "56", "Accuracy": "56", "Percentage": "12", "Avg_Time": "1", "Percentile": "12", "Paper_id": "tbl11" }, { "id": "3", "User_id": "moja_moja@g.com", "Name": "MamaniMOj", "Attempt": "56", "Correct": "45", "Score": "22", "Accuracy": "45", "Percentage": "21", "Avg_Time": "58", "Percentile": "100", "Paper_id": "tbl11" }, { "id": "4", "User_id": "dadu_dadu@gmail.com", "Name": "Dadu", "Attempt": "54", "Correct": "23", "Score": "23", "Accuracy": "52", "Percentage": "56", "Avg_Time": "28", "Percentile": "21", "Paper_id": "tbl11" }, { "id": "5", "User_id": "kalu_Klliya@gmai.com", "Name": "KaluKaliya", "Attempt": "85", "Correct": "56", "Score": "55", "Accuracy": "52", "Percentage": "25", "Avg_Time": "25", "Percentile": "25", "Paper_id": "tbl11" }, { "id": "6", "User_id": "Olaa_olla@gmail.com", "Name": "OllaGamna", "Attempt": "65", "Correct": "65", "Score": "45", "Accuracy": "55", "Percentage": "55", "Avg_Time": "55", "Percentile": "56", "Paper_id": "tbl11" }, { "id": "7", "User_id": "jembo_jembo@jembo.com", "Name": "JemboJames", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "54", "Percentage": "21", "Avg_Time": "32", "Percentile": "32", "Paper_id": "tbl11" }, { "id": "8", "User_id": "Rambo.Rambo@gmail.com", "Name": "RamboRavan", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "100", "Percentage": "100", "Avg_Time": "100", "Percentile": "100", "Paper_id": "tbl11" }, { "id": "9", "User_id": "Sakti@sakti.com", "Name": "SaktiSakti", "Attempt": "65", "Correct": "65", "Score": "65", "Accuracy": "65", "Percentage": "65", "Avg_Time": "65", "Percentile": "65", "Paper_id": "tbl11" }, { "id": "10", "User_id": "Shekhavat@sakti.com", "Name": "ShekhavatSakhti", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "54", "Percentage": "54", "Avg_Time": "54", "Percentile": "54", "Paper_id": "tbl11" }];
var name = data.map(e => {
return e.Name;
});
var attempt = data.map(e => {
return e.Attempt;
});
var correct = data.map(e => {
return e.Correct;
});
var score = data.map(e => {
return e.Score;
});
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: name,
datasets: [{
label: 'Attempt',
data: attempt,
backgroundColor: 'rgba(220, 20, 60, 0.5)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
label: 'Correct',
data: correct,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: 'Score',
data: score,
backgroundColor: 'rgba(255, 206, 86, 0.6)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
barPercentage: 0.75
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
<script src="https://code.jquery.com/jquery-3.0.0.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
also, here’s a demo on JSBin
Source:stackexchange.com