Freddy Freddy - 7 months ago 25
Javascript Question

Highchart's x-axis not displaying correct data

I have a table called

monthly flagged
with the following structure:

id
month
year
total_flagged


The way it works is that when a post is flagged, it will check the current month and year, if the year exists in the database, it will just
+1
to total flagged, else it will create a new row. For example, currently I have 1 row in my database:

id: 1
month: April
year: 2016
total_flagged: 28


If a user flags a post on May 1st, a new row will be be generated to
month: May
.

Now, I am trying to display this data on Highchart's. The y-xis shows number of flagged posts, while the x-axis shows the months. With one row in the table, the chart displays like this:

enter image description here

Which is ok. Although ideally I would like to have all the months at the bottom, but the months which exist in the table, only they will show data.

Nevertheless, the issue start's when more than one row exists in the table. If I have both data for April and May (2 rows in table), the chart appears like this:

enter image description here

The number
10
displayed on the x-axis is the
total_flagged
for month April.

Here is how I am storing data:

$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
$months[] = $get_data['month'];
$data[] = $get_data['total_flagged'];
}
mysqli_stmt_close($statement);


On my JavaScript for Highcharts:

xAxis: {
categories: [<?php echo json_encode($months); ?>]
},


And

series: [{
name: 'Flagged posts',
data: [<?php echo json_encode($data); ?>]
}


Edit:

Current PHP code:

<?php
$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
$months[] = $get_data['month'];
//$data[] = $get_data['total_flagged'];
$data[] = $get_data['total_flagged'][0];
}

mysqli_stmt_close($statement);
?>


JavaScript for Highcharts (In full):

<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Flagged Posts',
x: -20
},
xAxis: {
categories: <?php echo json_encode($months); ?>
},

yAxis: {
format: '',
},
yAxis: {
title: {
text: 'Number of flagged posts',
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Flagged posts',
data: <?php echo json_encode($data); ?>
}]
});
});
</script>


Current graph:

enter image description here

Answer

Storing data:

$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
    $months[]          = $get_data['month'];
    $data[]            = $get_data['total_flagged'];
}
mysqli_stmt_close($statement);

Categories and Series chart options:

xAxis: {
categories: <?php echo json_encode($months); ?>
}

series: [{
        name: 'Flagged posts',
        data: <?php echo json_encode($data); ?>
}