CODEWITHSUNDEEP
phpmysqlichart.js
sayousaad
sayousaad

Reputation: 23

Show statistics in my diagram (php mysqli)

I wanna make statistics for my website, So, I programmed the php code with the database

But I have problem the show it in my diagram

First I have in my database a table his name is (statistics)

It has 3 rows:

Id | St_date    | count 

1  | 2016-06-01 | 1 

2  | 2016-06-02 | 0 

3  | 2016-06-03 | 5 

...

9  | 2016-06-09 | 1

My diagram code is :

<script>
  var lineChartData = {
     labels : ["1","2","3","4","5"],
        datasets : [
            {
            fillColor : "rgba(252, 130, 19, 0.74)",
            strokeColor : "#FC8213",
            pointColor : "#FC8213",
            pointStrokeColor : "#fff",
            data : ["1","0","9","5","95"]
            },
        ]
            };
 new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
</script>

I tried to make this code :'( 

<?php
$date1 = date('m');
$date2 = date('Y');
$sql = "SELECT * FROM statistics WHERE MONTH(st_date) = $date1 and YEAR(st_date) = $date2 ";

$sql_sel = mysqli_query($conn,$sql);
while($rows = mysqli_fetch_assoc($sql_sel)){
    echo'
       <script>
        var lineChartData = {
        labels : ["'.$rows['st_date'].'"],
        datasets : [
                {
                fillColor : "rgba(252, 130, 19, 0.74)",
                strokeColor : "#FC8213",
                pointColor : "#FC8213",
                pointStrokeColor : "#fff",
                data : ['.$rows['count'].']
                },

            ]
        };
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);

  </script>';
         }
      ?>

But it shows me just 1 row. Any help?

Upvotes: 0

Views: 150

Answers (1)

JstnPwll
JstnPwll

Reputation: 8695

The problem is that you are creating chart javascript code for each individual row in your database. You should loop through the database results and build an array, then echo your javascript code:

$data = [];
$labels = [];
while($rows = mysqli_fetch_assoc($sql_sel)){
    $data[] = $rows['count'];
    $labels[] = '"'.$rows['st_date'].'"';
}
echo '
<script>
var lineChartData = {
labels : ['.implode(',',$labels).'],
datasets : [
        {
        fillColor : "rgba(252, 130, 19, 0.74)",
        strokeColor : "#FC8213",
        pointColor : "#FC8213",
        pointStrokeColor : "#fff",
        data : ['.implode(',',$data).']
        },
    ]
};
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
</script>';

Upvotes: 1

Related Questions