High Charts - Populating Data From Array

Question

I was wondering if anyone could see why my code for high charts isn't working? I have been trying to fix it for ages and I cant get it to work. I looked at this question Populate JSON object to highchart bar chart for help but cant get my code to work.

    <?php 
    include('../connection.php');
    $selectCategory = "SELECT CategoryName, COUNT( fkDiaryCategory ) as count
    FROM    `tbldiary`, tbldiarycategories where pkCategory=fkDiaryCategory group by fkDiaryCategory";

    $catResult = mysqli_query($conn,$selectCategory);

    $tableRows = array();
    $i=0;
    while($dataRow = mysqli_fetch_array($catResult, MYSQLI_ASSOC)){
    $tableRows[$i]['CategoryName']=$dataRow['CategoryName'];
    $tableRows[$i]['count']=$dataRow['count'];
    $i++;
     };
     $data = (json_encode($tableRows));
     ?> 
    <script>

    var data = '<?php echo $data ?>';
    console.log(data);
    $(function() {
        // Populate series
        var processed_json = new Array();
        for (i = 0; i < data.length; i++) {
            processed_json.push([parseInt(data[i].count),data[i].CategoryName]);
        }

    $( document ).ready(function() {
        // draw chart
        var options={
            chart: {

               renderTo: 'container',                   
                type: "column"
            },
            title: {
                text: "Diary Entries by Category"
            },
            xAxis: {
                categories: data.CategoryName,
                title: {
                    text: "CategoryName"
                }
            },
            yAxis: {
              min:0,
                title: {
                    text: "Total"
                }
            },
            series: data
        };

        var chart = new Highcharts.Chart(options);
        });
    });
</script>
  <div id="container" style="height: 300px"></div>
</body>
</html>

my lecturer helped with the while loop populating the processed_json array, and Im not 100% sure if this is needed but I left it in just incase. Thanks in advance!

Edited to add:

The data I am putting in looks like this when you do console.log [{"CategoryName":"Home life worries","count":"2"},{"CategoryName":"Social life worries","count":"2"},{"CategoryName":"Exam stress","count":"1"},{"CategoryName":"University life stress","count":"1"},{"CategoryName":"Work stress","count":"1"}]

Answer 1

If your data is as you posted in comments, then you are parsing data for series and not series itself. If you set name for each point, then setting category type for xAxis will force chart to use points' names as categories.

Example: http://jsfiddle.net/7nLz2b8d/1/

var data = [{
  "CategoryName": "Home life worries",
  "count": "2"
}, {
  "CategoryName": "Social life worries",
  "count": "2"
}, {
  "CategoryName": "Exam stress",
  "count": "1"
}, {
  "CategoryName": "University life stress",
  "count": "1"
}, {
  "CategoryName": "Work stress",
  "count": "1"
}];

$(function() {
  // Populate series
  var processed_json = [],
      len = data.length;

  for (i = 0; i < len; i++) {
    processed_json.push([data[i].CategoryName, parseInt(data[i].count)]);
  }

  $(document).ready(function() {
    // draw chart
    var options = {
      chart: {
        renderTo: 'container',
        type: "column"
      },
      title: {
        text: "Diary Entries by Category"
      },
      xAxis: {
        type: 'category',
        title: {
          text: "CategoryName"
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: "Total"
        }
      },
      series: [{
        data: processed_json
      }]
    };

    var chart = new Highcharts.Chart(options);

  });
});

Answer 2

Here is the sample code
And hole example

 $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });