Issues Rendering Highcharts - Populating through PHP/MySQL

Question

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>

Your html tag might be missing because you probably need to put an additional enter after that line (to let it be part of the code). — EricG
– EricG, Commented Jul 13, 2012 at 12:24

EricG · Accepted Answer · 2012-07-13 14:43:04Z

1

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.

edited Jul 13, 2012 at 14:43

answered Jul 13, 2012 at 11:28

EricG

3,8491 gold badge25 silver badges35 bronze badges

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

5 Comments

DJ-DOO Over a year ago

To be honest EricG I was hoping I might have someone have a look over my code with fresh eyes, as I've been going square eyed for the last two days... I'm just wondering if my layout is ok etc...is it ok to have the js within the php file? etc

DJ-DOO Over a year ago

The one after cancelled, data or the closing brace?

DJ-DOO Over a year ago

Sorry, I can see why, I deleted it but when I upload it and re-run it, there is still no rendering. I have run it through, Google Chrome -> Developer Tools and it tells me I have an error @ xAxis: { categories: [<?php echo join($data1, ',') ?], }, It says undefined identifier??

DJ-DOO Over a year ago

I'm unable to comment code for some reason..apologies for the messy reply

EricG Over a year ago

No problem. You still have too much commas. Remove all commas before '}'

Mike Mackintosh · Accepted Answer · 2012-07-13 13:25:03Z

0

Take out the comma after the categories statement under xAxis.

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

Should be

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

answered Jul 13, 2012 at 13:25

Mike Mackintosh

14.3k7 gold badges64 silver badges87 bronze badges

4 Comments

Mina Gabriel Over a year ago

the comma is not the issue here is a working jsFiddle with comma after the object array

DJ-DOO Over a year ago

Hi...I've also done that, but with no difference..thank you though

Mike Mackintosh Over a year ago

Try: categories: ['<?php echo join($data1, "','") ?>']

DJ-DOO Over a year ago

Thank you..that contributed to solving the problem, both that and I removed the pointStart: 0 AND pointInterval, thank you very much

Paweł Fus · Accepted Answer · 2013-02-27 12:36:00Z

0

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.

answered Feb 27, 2013 at 12:36

Paweł Fus

45.1k3 gold badges65 silver badges79 bronze badges

Collectives™ on Stack Overflow

Issues Rendering Highcharts - Populating through PHP/MySQL

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related