HighCharts data defined in a HTML Table using PHP MySQL - php

Question

I'm using HighCharts to display a chart that is pulling data on HTML Table and my table is populated by PHP. Somehow it displaying the Title of the Chart which is Announcement Likes Chart but the Bar Chart is not included in it. Any answer with or without explanation is highly appreciated :)
<table class="table table-striped table-hover ">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">Announcement Table</h1>
</div>
<div id="tablecon" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Likes</th>
</tr>
</thead>
<tbody class="table table-bordered table-hover ">
<?php
//set up mysql connection
mysql_connect("localhost", "brmhelpd_root", "siopao04") or die(mysql_error());
//select database
mysql_select_db("brmhelpd_brm") or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT type,title,likes FROM newsfeed ORDER BY created_at ASC';
//execute the query using mysql_query
$result = mysql_query($query);
if($result === FALSE) {
die(mysql_error()); // TODO: better error handling
}
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo ' <tr> ';
echo ' <td> ';
echo $row['type'];
echo ' </td> ';
echo ' <td> ';
echo $row['title'];
echo ' </td> ';
echo ' <td> ';
echo $row['likes'];
echo ' </td> ';
echo ' </tr> ';
}
?>
</tbody>
</table>
</div>
</div>
</table>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="login-folder/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="login-folder/assets/js/custom.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#datatable').DataTable( {
"lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]]
});
} );
</script>
<script>
$(function () {
$('#tablecon').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Announcement Likes Chart'
},
yAxis: {
allowDecimals: true,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
});
</script>

Answer 1

I'm giving up to this problem. I'll populate my table with ajax better thanks for Sebastian Bochan suggestion.