HighCharts data defined in a HTML Table using PHP MySQL

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>

Please avoid using the deprecated mysql functions and move to either mysqli or PDO — DirtyBit
– DirtyBit, Commented Oct 4, 2015 at 6:35
ok thanks for the info but i dont have much time to change my codes the deadline is very near sad — Meyka Jograt
– Meyka Jograt, Commented Oct 4, 2015 at 6:39
okayy. so did you try it with the dummy data first as given in the link you provided? — DirtyBit
– DirtyBit, Commented Oct 4, 2015 at 6:41
Hah, just what I thought! Let me see if I can get that up and running ;-) — DirtyBit
– DirtyBit, Commented Oct 4, 2015 at 6:45
Why you cannot return a JSON in your php and then load that by $.ajax() ? Seems that is simpler and you avoid parsing of table. — Sebastian Bochan
– Sebastian Bochan, Commented Oct 5, 2015 at 12:22

Community · Accepted Answer · 2017-05-23 12:06:38Z

1

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 5, 2015 at 12:50

Meyka Jograt

3142 gold badges4 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

HighCharts data defined in a HTML Table using PHP MySQL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related