CODEWITHSUNDEEP
phpjavascriptmysqlhtmlhighcharts
DJ-DOO
DJ-DOO

Reputation: 4781

Issues Rendering Highcharts - Populating through PHP/MySQL

I'm hoping someone can help me here, I've been looking at highcharts as a way of graphing my dynamic data from my sql db....What I've come up with so far is below, it's strange, it seems correct, the data is correct, however, I can't get my chart to render, now I've tried viewing the chart through both Chrome and IE but with no results, can anyone see where I might've gone wrong, or where there is an error...my data is passing into the JS arrays, so there's an issue with the rendering end... Any help would be much appreciated. I have closed off my html tag, but for some reason it isn't displaying in this post...if anyone has any suggestions I would be happy to hear them!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<script src='highcharts.js' type='text/javascript'> </script>       
    <script src='exporting.js' type='text/javascript'> </script>    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>    

    </head>

<body>

    <?php
    include "connect_db.php";

    $SQL1 =     "SELECT review.reviewForum AS reviewForum, 
                COUNT(CASE WHEN mom.result = 'Approved' THEN 'yes' ELSE NULL END) AS Approved, 
                COUNT(CASE WHEN mom.result = 'NOT Approved' THEN 'yes' ELSE NULL END) AS Not_Approved, 
                COUNT(CASE WHEN mom.result = 'Cancelled' THEN 'yes' ELSE NULL END) AS Cancelled 
                FROM review INNER JOIN mom ON mom.reviewId = review.reviewId GROUP BY review.reviewForum";

    $result1 = mysql_query($SQL1);
    $data1 = array();
    while ($row = mysql_fetch_array($result1)) {
       $data1[] = $row['reviewForum'];
    }

    $result2 = mysql_query($SQL1);
    $data2 = array();
    while ($row = mysql_fetch_array($result2)) {
       $data2[] = $row['Approved'];
    }

    $result3 = mysql_query($SQL1);
    $data3 = array();
    while ($row = mysql_fetch_array($result3)) {
       $data3[] = $row['Not_Approved'];
    }

    $result4= mysql_query($SQL1);
    $data4 = array();
    while ($row = mysql_fetch_array($result4)) {
       $data4[] = $row['Cancelled'];
    }
    ?>

    <script type="text/javascript">
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
              chart: {
                 renderTo: 'container',
                 type: 'column'
              },

            title:  {
                        text: 'TC REVIEW RESULT STATS'
                    },

            xAxis:  {
                        categories: [<?php echo join($data1, ',') ?>],
                    },

            yAxis:  {
                        min:0
                    },

            legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 50,
                        y: 35,
                        floating: true,
                        shadow: true
                    },

            plotOptions: {
                            column: {
                                        pointPadding: 0.2,
                                        borderWidth: 0
                                    }
                        },

            series: [   {
                            name: 'Approved',
                            data: [<?php echo join($data2, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },

                        {

                            name: 'Unapproved',
                            data: [<?php echo join($data3, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },

                        {
                            name: 'Cancelled',
                            data: [<?php echo join($data4, ',') ?>],
                            pointStart: 0
                            //pointInterval
                        },
                    ]
        });
});
    </script>

    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>

Upvotes: 2

Views: 2505

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

I think thre real reason is here:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>    
<script src='highcharts.js' type='text/javascript'> </script>       
<script src='exporting.js' type='text/javascript'> </script>

First load jQuery, then Highcharts.

Upvotes: 0

EricG
EricG

Reputation: 3849

I suggest you start trying to render one without generated code. If that doesnt work, you might want to share that on jsfiddle and we can have a look :-). If it does work, you should compare it with the generated code.

    {
        name: 'Cancelled',
        data: [<?php echo join($data4, ',') ?>],
        pointStart: 0
        //pointInterval
    }, // This comma is a syntax error
]

Do you see that comma? You don't put commas before '}', because you have that in multiple places.

Upvotes: 1

Mike Mackintosh
Mike Mackintosh

Reputation: 14237

Take out the comma after the categories statement under xAxis.

 xAxis:  {
     categories: [<?php echo join($data1, ',') ?>],
 },

Should be

xAxis:  {
    categories: [<?php echo join($data1, ',') ?>]
},

Upvotes: 0

Related Questions