[Chartjs]-How to make chart with chartjs.?

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

Leave a comment