Chart.js with data from database

Question

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?

@GuruprasadRao hard to... how can I get the data from my database in the fiddle..? — nameless
– nameless, 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
– nameless, Commented Feb 12, 2018 at 8:01
Atleast some sample dummy fiddle will help us to get started with.. :( — Guruprasad J Rao
– Guruprasad J Rao, Commented Feb 12, 2018 at 8:01

Community · Accepted Answer · 2020-06-20 09:12:55Z

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/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 12, 2018 at 10:24

Neeraj

1,0151 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eswaramoorthy Karthikeyan · Accepted Answer · 2018-02-12 08:14:19Z

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

answered Feb 12, 2018 at 8:14

Eswaramoorthy Karthikeyan

338 bronze badges

1 Comment

nameless Over a year ago

That actually was one of the tutorials I tried to work with, but which didn't work for me, as lines with the for....in.. did split into letters, not into the elements..

Collectives™ on Stack Overflow

Chart.js with data from database

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related