[Chartjs]-Chart.js with data from database

by

5👍

✅

I reckon, you’re getting the response as a string and passing it to the labels property, while it expects an array of strings. (same mistake in your fiddle as well)

To convert that response string to an array, you can use JSON.parse()

...
data: {
      labels: JSON.parse(data),
      ...

also, you should use the chart.js version 2.x, as you’re using it’s syntax.

Working fiddle – https://jsfiddle.net/bf4v9272/5/

0👍

https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-bar-graph-using-data-from-mysql-table-and-php

$(document).ready(function(){
$.ajax({
    url: "http://localhost/chartjs/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var player = [];
        var score = [];

        for(var i in data) {
            player.push("Player " + data[i].playerid);
            score.push(data[i].score);
        }

        var chartdata = {
            labels: player,
            datasets : [
                {
                    label: 'Player Score',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: score
                }
            ]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata
        });
    },
    error: function(data) {
        console.log(data);
    }
});

});

i hope you will Get

Leave a comment