Issues Rendering Highcharts - Populating through PHP/MySQL

Question

DJ-DOO 0 Newbie Poster

12 Years Ago

Hi!

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!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></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>
</html>

I'm really hoping that someone can point out something that I am doing wrong as I'm going crazy looking at this...I'm assuming this can be done as per the FAQ section on Highcharts http://highslide.com/forum/viewtopic.php?f=10&t=8649

Gary

javascript mysql php

2 Contributors
7 Replies
439 Views
1 Hour Discussion Span
Latest Post 12 Years Ago Latest Post by pritaeas

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

echo join($data1, ',')

Should be:

echo join(',', $data1);

As a sidenote, you can get excellent support on the HighChart's forum.

Edited 12 Years Ago by pritaeas

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

Do you have this somewhere online for viewing ? If I can see your whole source, with the data, then perhaps I can find the issue.

Where does pointInterval come from. It is weird you have it there with no value after it. Shouldn't that be in the plotOptions instead, along with pointStart ?

Edited 12 Years Ago by pritaeas

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

DJ-DOO 0 Newbie Poster · Answer 1 · 2012-07-13T13:56:27+00:00

echo join(',', $data1);

Hi pritaeas,
I edited my code, but unfortunately it doesn't make any difference..

eg

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

Would you have any other ideas? I've been on highcharts forums and I'm only getting input from one user and he doesn't seem to be able to figure it out...

DJ-DOO 0 Newbie Poster · Answer 2 · 2012-07-13T14:06:55+00:00

Hi,

I posted my full code above, here it is again with the changes you suggested...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></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>
</html>

My file is a php file, I've have the html in the php file and the js...all enclosed within tags...

Could that cause me an error?

Thanks for your assistance

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 3 · 2012-07-13T14:14:15+00:00

You may have missed my update, pointStart and pointInterval (this one is missing a value) are in the wrong place. They should be in plotOptions but I think you can safely remove them.

Also, I advise to put the jQuery script before the HighCharts one.

DJ-DOO 0 Newbie Poster · Answer 4 · 2012-07-13T14:22:50+00:00

BINGO!!!

I also made a change to the categories in order to encapsulate them within strings...

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

Is this ok??

Thank you very very much for your help..

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2012-07-13T14:32:02+00:00

It is correct, but perhaps this is easier:

categories: <?php echo json_encode($data1); ?>

Make sure you'll add your solution to your HighCharts thread too ;)