since 2 hours I'm trying a simple thing: displaying data from database with Chart.js. I've checked like 4 tutorials, viewed 3 SO-Threads, but nothing is working as intented to. Don't know if its just a minor problem or what the problem is...

So what I'm trying is the following:

stats.php:

<script>
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>

<script>
$(document).ready(function(){
    $.ajax({
        url: "stats_api.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var chart = new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: data,
      datasets: [{
        label: "Anzahl Asservate",
        backgroundColor: [getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor()],
        data: [1,2,3,4,5,6,7,8,9,10],
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Kategorien-Verteilung der Asservate'
      }
    }
});
}
});
});
</script>

stats_api.php:

<?php

require 'databaseConnection.php';

$datumStart = "2010-12-19 08:38:32";
$datumEnde = "2019-12-19 08:38:32";

$v_rp_ass_kat = $database->query("
select s.* from (select @DatumStart:='$datumStart',@DatumEnde:='$datumEnde') parm , v_rp_ass_kat s;")->fetchAll();

$labels = [];

foreach($v_rp_ass_kat as $element){
    array_push($labels, $element[2]);
}

echo json_encode($labels);

The json_encode is returning this:

["Mobiltelefon","Smartphone","SIM-Karte","Tablet","Navigationsger\u00e4t","USB-Stick","Speicherkarte","PC","Notebook","Festplatte"]

With that, I'm getting the error saying data.labels.map is not a function.

I also tried it without the foreach in php, instead a json_encode of $v_rp_ass_kat and then do a

labels = [];
for(var i in data){
    labels.push(data[i].kategorie);
}

But this somehow splits the array into single letters, so instead of 10 labels with one word each, I get like 100 labels, one for every letter of the json array...

What do I do wrong?

since 2 hours I'm trying a simple thing: displaying data from database with Chart.js. I've checked like 4 tutorials, viewed 3 SO-Threads, but nothing is working as intented to. Don't know if its just a minor problem or what the problem is...

So what I'm trying is the following:

stats.php:

<script>
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>

<script>
$(document).ready(function(){
    $.ajax({
        url: "stats_api.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var chart = new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: data,
      datasets: [{
        label: "Anzahl Asservate",
        backgroundColor: [getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor()],
        data: [1,2,3,4,5,6,7,8,9,10],
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Kategorien-Verteilung der Asservate'
      }
    }
});
}
});
});
</script>

stats_api.php:

<?php

require 'databaseConnection.php';

$datumStart = "2010-12-19 08:38:32";
$datumEnde = "2019-12-19 08:38:32";

$v_rp_ass_kat = $database->query("
select s.* from (select @DatumStart:='$datumStart',@DatumEnde:='$datumEnde') parm , v_rp_ass_kat s;")->fetchAll();

$labels = [];

foreach($v_rp_ass_kat as $element){
    array_push($labels, $element[2]);
}

echo json_encode($labels);

The json_encode is returning this:

["Mobiltelefon","Smartphone","SIM-Karte","Tablet","Navigationsger\u00e4t","USB-Stick","Speicherkarte","PC","Notebook","Festplatte"]

With that, I'm getting the error saying data.labels.map is not a function.

I also tried it without the foreach in php, instead a json_encode of $v_rp_ass_kat and then do a

labels = [];
for(var i in data){
    labels.push(data[i].kategorie);
}

But this somehow splits the array into single letters, so instead of 10 labels with one word each, I get like 100 labels, one for every letter of the json array...

What do I do wrong?

• javascript
• php
• chart.js

• Can you create a fiddle somehow? – Guruprasad J Rao Commented Feb 12, 2018 at 7:48
• @GuruprasadRao hard to... how can I get the data from my database in the fiddle..? – nameless Commented Feb 12, 2018 at 7:50
• Just hardcode it as is.. – Guruprasad J Rao Commented Feb 12, 2018 at 7:50
• @GuruprasadRao trying to since 10 minutes, but can't get it working, getting an error from chart js saying something about offset, somethings missing.. – nameless Commented Feb 12, 2018 at 8:01
• Atleast some sample dummy fiddle will help us to get started with.. :( – Guruprasad J Rao Commented Feb 12, 2018 at 8:01

2 Answers 2

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/bf4v9272/5/

https://www.dyclassroom./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