Hi Folks,

I've recently started using High Charts to chart dynamic data from my database. I was on last week with an issue in relation to my column charts not rendering. I managed to figure that out with the assistance of other forum users. I now have a new problem, I am trying to display reasons for cancellation of a meeting in a pie chart form but I'm unable to figure out what the issue is, well I know what the issue is, but I don't know how to fix it...I'll post what I've done so far below, first I've posted my php, which includes the MySql query...

        <?php
        //===============================================
        //  PHP FOR PIE CHART REASONS FOR CANCELLATION
        //===============================================

        $SQL3 = "SELECT reasonForCancellation, COUNT( * ) AS reason_count FROM mom WHERE result =  'cancelled' GROUP BY reasonForCancellation";

        $result9 = mysql_query($SQL3);
        $data9 = array();
        while ($row = mysql_fetch_array($result9)) {
           $data9[] = $row['reasonForCancellation'];
        }

        $result10 = mysql_query($SQL3);
        $data10 = array();
        while ($row = mysql_fetch_array($result10)) {
           $data10[] = $row['reason_count'];
        }
        ?>





    <!--
            ============================================
              JS FOR PIE CHART REASON FOR CANCELLATION
            ============================================
        --> 

        <script type="text/javascript">

        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph3',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'REASONS FOR CANCELLATION'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'cancellations',
                        data: [
                                ['<?php echo join($data9, "','") ?>',  <?php echo join(',', $data10);  ?>],

                              ]
                    }]
                });
            });

        });

        </script>

Above is the JS part, I have reviewed the code on Highcharts and jsFiddle, I had thought that like the categories on the column chart, I would only have to enter the data array once...When I had just one value as in one reason for cancellation, the chart worked fine, however, after I entered in a second value to the database, the chart no longer displayed. I've attached a capture of what the sql query outputs.

If anyone out there could give me a dig out on this I would greatly appreciate it.

Regards,
Gary

['<?php echo join($data9, "','") ?>', <?php echo join(',', $data10); ?>],

The first one has single quotes around the join, the second does not.

Hi pritaeas...

The reason I have done this is the first join is a string, as in the reason for cancellation, is this incorrect? I have tried removing the quotes, adding them to the second join, but there isn't any change except when I remove them altogether even the title doesn't display.

I know you came to my aid before and I thank you for it, if you could help me out one more time I'd appreciate it, I have come this far and managed to get the column charts working so I just need to get these up and running and I'll be happy..

Can you show me what data is generated ?

Are you trying to do this (with legend) ?

data: [
    ['Firefox',   45.0],
    ['IE',       26.8],
    ['Safari',    8.5],
    ['Opera',     6.2],
    ['Others',   0.7]
]

(Taken from the 3rd pie demo on their website)

Change your loops to this:

$result9 = mysql_query($SQL3);
$data9 = array();
while ($row = mysql_fetch_array($result9)) {
   $data9[] = array($row['reasonForCancellation'], $row['reason_count']);
}
$data9 = json_encode($data9); // then you can echo this as data

Sure I'll just echo the data, take a capture and upload it..

So this is what is displayed, I'm just echoing the data below the chart

This is the data through the inspect element in Chrome...

Was just updating my answer.... see above.

apologies for jumping the gun!!

..echoing $data9 results in the attached capture...

Try the merged loop I showed, instead of the loop for data9 and data10.

apologies pritaeas I uploaded the wrong capture...here is the output of the merged loop..

I tried passing $data9 like below .

data: [
                                ['<?php echo join($data9, ",") ?>']

                              ]

But I'm still not having any joy, any thoughts?

data: <?php echo $data9; ?>

Should be enough. Check the output, and you will see what's wrong.

Definitely making progress anyway!

The chart display is unusual though..I made the change as you suggested

series: [{
            type: 'pie',
            name: 'cancellations',
            data:  <?php echo $data9; ?>
        }]

The graph output is incorrect which you can see here
Capture41

I've also inspected the output through the code which you can see here

Capture51

I can see that the issue is the numerical data is also being passed in as a string for some reason, I imagine that has something to do with the json encode? I'm not at all familiar with json..

Isn't the pie designed to show 100% total ? The examples all appear to add up to 100.

Do you have your page online somewhere to inspect?

Yeah the pie chart is designed to display 100%, it should display with 50%/50%, but instead it's showing 9%/9%....would the numerical data being passed as a string i.e. "1" instead of 1 not be the problem?

I'm afraid it's not up online, I am a college student on my placement and I'm working on an internal web based tool...

Can you put your generated output in jsFiddle, so we can see/change it there?

I'm sorry for coming across as a little stupid, but I'm not quite sure how I could do that if it's connected to a database stored on an internal server..I'm not very knowledgeable on Highcharts or JsFiddle..I've posted my entire graph page code below if that's any good?? If not, just tell me what I need to do and I'll sort it...

Thank you so much for your help...

<!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="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <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> 
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel = "stylesheet" type = "text/css" href = "css/dbCSS.css" />
    <link rel = "stylesheet" type = "text/css" href = "css/DBstylesheet.css" />
    </head>
    <body>
        <?php
        include "connect_db.php";
        include "newheaderDB.php";

        //=================================================
        //    PHP FOR COLUMN CHART TC REVIEW RESULT STATS
        //=================================================

        $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'];
        }

        //===============================================
        //  PHP FOR COLUMN CHART TC REVIEW DOCUMENT TYPE
        //===============================================

        $SQL2 =     "SELECT review.docType AS docType, 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.docType";

        $result5 = mysql_query($SQL2);
        $data5 = array();
        while ($row = mysql_fetch_array($result5)) {
           $data5[] = $row['docType'];
        }

        $result6 = mysql_query($SQL2);
        $data6 = array();
        while ($row = mysql_fetch_array($result6)) {
           $data6[] = $row['Approved'];
        }

        $result7 = mysql_query($SQL2);
        $data7 = array();
        while ($row = mysql_fetch_array($result7)) {
           $data7[] = $row['Not_Approved'];
        }

        $result8= mysql_query($SQL2);
        $data8 = array();
        while ($row = mysql_fetch_array($result8)) {
           $data8[] = $row['Cancelled'];
        }

        //===============================================
        //  PHP FOR PIE CHART REASONS FOR CANCELLATION
        //===============================================

        $SQL3 = "SELECT reasonForCancellation, COUNT( * ) AS reason_count FROM mom WHERE result =  'cancelled' GROUP BY reasonForCancellation";

        $result9 = mysql_query($SQL3);
        $data9 = array();
        while ($row = mysql_fetch_array($result9)) {
           $data9[] = array($row['reasonForCancellation'], $row['reason_count']);
        }

        $data9 = json_encode($data9);
/*
        $result10 = mysql_query($SQL3);
        $data10 = array();
        while ($row = mysql_fetch_array($result10)) {
           $data10[] = $row['reason_count'];
        }
    */  

        //===============================================
        //  PHP FOR PIE CHART REASONS FOR RE-REVIEW
        //===============================================

        $SQL4 = "SELECT reasonForReReview, COUNT( * ) AS reason_count FROM mom WHERE result =  'Not Approved' GROUP BY reasonForReReview";

        $result11 = mysql_query($SQL4);
        $data11 = array();
        while ($row = mysql_fetch_array($result11)) {
           $data11[] = $row['reasonForReReview'];
        }

        $result12 = mysql_query($SQL4);
        $data12 = array();
        while ($row = mysql_fetch_array($result12)) {
           $data12[] = $row['reason_count'];
        }
        ?>

        <!--
            ============================================
             JS FOR COLUMN CHART TC REVIEW RESULT STATS
            ============================================
        -->     
        <script type="text/javascript">
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                  chart: {
                     renderTo: 'graph1',
                     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);  ?>]
                            },
                            {
                                name: 'Unapproved',
                                data: [<?php echo join(',', $data3);  ?>]
                            },
                            {
                                name: 'Cancelled',
                                data: [<?php echo join(',', $data4);  ?>]
                            }
                        ]
            });
    });
        </script>

        <!--
            ============================================
             JS FOR COLUMN CHART DOCUMENT TYPE
            ============================================
        -->

        <script type="text/javascript">
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                  chart: {
                     renderTo: 'graph2',
                     type: 'column'
                  },
                title:  {
                            text: 'TC REVIEW DOCUMENT TYPE'
                        },
                xAxis:  {
                            categories: ['<?php echo join($data5, "','") ?>'] 
                        },
                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(',', $data6);  ?>]

                            },
                            {
                                name: 'Unapproved',
                                data: [<?php echo join(',', $data7);  ?>]
                            },
                            {
                                name: 'Cancelled',
                                data: [<?php echo join(',', $data8);  ?>]
                            }
                        ]
            });
    });
        </script>    

        <!--
            ============================================
              JS FOR PIE CHART REASON FOR CANCELLATION
            ============================================
        --> 

        <script type="text/javascript">

        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph3',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'REASONS FOR CANCELLATION'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'cancellations',
                        data:  <?php echo $data9; ?>
                    }]
                });
            });
        });
        </script>

        <!--
            ============================================
              JS FOR PIE CHART REASON FOR RE-REVEIW
            ============================================
        --> 

        <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph4',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'REASONS FOR RE-REVIEW'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 're-review',
                        data: [
                                ['<?php echo join($data11, "','") ?>',  <?php echo join(',', $data12);  ?>]

                              ]
                    }]
                });
            });

        });

        </script>
        <div id = "graph1" class = "graphs"></div>        
        <div id = "graph2" class = "graphs"></div>
        <div id = "graph3" class = "graphs"></div>
        <div id = "graph4" class = "graphs"></div>
    </div>
    </div>   
    </body>
</html>
<?php include "absFooterDB.php" ?>

Well, what I meant was, show the output the above code generates. I am not interested in the PHP code, but the HTML code it generates, and the data for the charts (since I do not have your tables). So open this page in your browser, view source, and paste that.

Apologies...here is the source code..

<!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="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <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> 
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel = "stylesheet" type = "text/css" href = "css/dbCSS.css" />
    <link rel = "stylesheet" type = "text/css" href = "css/DBstylesheet.css" />
        </head>
    <body>  

<!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>
    <title>TC Tool</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en" />

    <!-- CSS Links -->
    <link rel = "shortcut icon" href = "images/favicon.ico" />
    <link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css" /> 
    <link rel = "stylesheet" type = "text/css" href = "css/footerstyle.css" />
    <link rel = "stylesheet" type = "text/css" href = "css/tcal.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/sifrebaseelayout.css" />

    <!-- JavaScript Links -->
    <script type='text/javascript' src='javascript/tcal.js'></script>     
    <script type="text/javascript" src="sifr/sifr.js"></script>
    <script type="text/javascript" src="sifr/sifr-config.js"></script>
    <script type='text/javascript' src='javascript/helpLink.js'></script>
</head>

<!-- Setting up header with drop down menu's --> 
<body>

<div id = 'toolContainer'>
    <div id = "toolHeader">
        <div id = "toolHeaderContent">
            <!-- Display Ericsson image and link to homepage -->
            <a id = "eFooterLogo" href = "http://eselivm2v279l.lmera.ericsson.se/tctool/Index.php" title = "Back to Main Page">
                <img src = "images/elogo.png" alt = "Ericsson">
            </a>

            <!-- Using the eH1Sifr class and carousel to give TC Tool a gradient effect -->      
            <h1 class = "eH1Sifr" style = 'width:440px;'>Welcome to the TC Tool</h1>
            <div id="tcHeaderHelp">      
                <ul>
                    <li>
                        <a id='tcHeaderHelpLink' href="#" onclick='javascript:helpLink(); return false;'>Help</a>
                    </li>
                    <li>
                        <a href = "logout.php" title = "Log Out" id ='tcHeaderLoginLink' >Log Out</a>
                    </li>
                </ul>    
            </div>   
        </div>
    </div>
</div>

<div id = "toolContentWrapper" > 
<div id = "toolContent" >
<body>  

        <!--
            ============================================
             JS FOR COLUMN CHART TC REVIEW RESULT STATS
            ============================================
        -->     

        <script type="text/javascript">
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                  chart: {
                     renderTo: 'graph1',
                     type: 'column'
                  },
                title:  {
                            text: 'TC REVIEW RESULT STATS'
                        },
                xAxis:  {
                            categories: ['TC CNOSS','TC Navigator','TC OSS RC','TC PF','TC PM','TC WRAN'] 
                        },
                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: [1,0,3,1,0,0]
                            },
                            {
                                name: 'Unapproved',
                                data: [0,1,0,0,1,1]
                            },
                            {
                                name: 'Cancelled',
                                data: [1,0,1,0,0,0]
                            }
                        ]
            });
    });
        </script>

        <!--
            ============================================
             JS FOR COLUMN CHART DOCUMENT TYPE
            ============================================
        -->

        <script type="text/javascript">
        $(document).ready(function() {
            var chart = new Highcharts.Chart({
                  chart: {
                     renderTo: 'graph2',
                     type: 'column'
                  },
                title:  {
                            text: 'TC REVIEW DOCUMENT TYPE'
                        },
                xAxis:  {
                            categories: ['Combined IS/IP','CPI','IP','IS','Pre prestudy','Technical Report','TERE'] 
                        },
                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: [1,1,0,0,2,0,1]
                            },
                            {
                                name: 'Unapproved',
                                data: [0,0,1,1,0,1,0]
                            },
                            {
                                name: 'Cancelled',
                                data: [0,0,1,1,0,0,0]
                            }
                        ]
            });
    });
        </script>    

        <!--
            ============================================
              JS FOR PIE CHART REASON FOR CANCELLATION
            ============================================
        --> 

        <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph3',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'REASONS FOR CANCELLATION'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'cancellations',
                        data:  [["Insufficient Participants","1"],["Missed Impacts Issue","1"]]                 }]
                });
            });
        });

        </script>

        <!--
            ============================================
              JS FOR PIE CHART REASON FOR RE-REVEIW
            ============================================
        --> 

        <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph4',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'REASONS FOR RE-REVIEW'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 're-review',
                        data: [
                                ['Insufficient Participants','Other',  2,1]
                              ]
                    }]
                });
            });
        });
        </script>

        <div id = "graph1" class = "graphs"></div>        
        <div id = "graph2" class = "graphs"></div>
        <div id = "graph3" class = "graphs"></div>
        <div id = "graph4" class = "graphs"></div>
    </div>
    </div>   
    </body>
</html>

<link rel="stylesheet" type="text/css" href="css/footerstyle.css" />
<div id = "eFoot" class = "eInnerWrapper eGB" >
<div class = "eWrapContainer eGB">
    <div id = "eFootLeft">
        <p id = "eFootLogoContainer">
            <a id = "eFooterLogo" href = "Index.php" title = "Ericsson Home">
                <img src = "images/elogo.png" alt = "Ericsson">
            </a>
        </p>
    </div>

<div id = "eFootRightT">
    <div class  = "eFootGroup">
        <h3>Suggestions</h3>
        <ul>
            <li>
                <a title = "Suggestions" href="JavaScript:newPopup('http://eselivm2v279l.lmera.ericsson.se/tctool/suggestions.php');">Have a suggestion? Contact us</a>
            </li>        
        </ul>
    </div>
    <div id = "eFootRightB"></div>
    </div>
</div>
</div>

<script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

Apart from the fact that you may be right that "1" should be 1, your generated html is invalid. It contains two doctypes, two heads, body in the wrong placed, and body and html unclosed tags. You may want to fix that too, as it can cause unexpected behaviour. To fix the "1", change the loop to this:

while ($row = mysql_fetch_array($result9)) {
    $data9[] = array($row['reasonForCancellation'], (int)$row['reason_count']);
}

The issues with the invalid html is I'm including header and footers that had been written by a member of staff, they need to be edited, I'll need to get to that later...

As regards to the string "1" to int 1..that's worked a treat...

Capture30

I just need to work on the the styling of the charts now, (fonts etc..)

Again, thank you so much for your help, it really is appreciated...I never thought of type casting!!

Again, that you very much!

Regards,
Gary

Just another hint, more of your loops do the same thing and can be merged into one.

Done ;)

thank you very much :)

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.