HTML Java script MYSQL programmers dev....(elmo)

im trying to create another page that can relate to my bar chart. You can go through his code. It work for me

    <!DOCTYPE html>
    <html>
       <head>
          <?php
             session_start();


             ?>
          <meta charset="utf-8">
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
          <script src="http://code.highcharts.com/highcharts.js"></script>
          <script src="http://code.highcharts.com/modules/exporting.js"></script>
          <script>
             $('#calendar').datepicker({
             });

             !function ($) {
               $(document).on("click","ul.nav li.parent > a > span.icon", function(){
                 $(this).find('em:first').toggleClass("glyphicon-minus");
               });
               $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
             }(window.jQuery);

             $(window).on('resize', function () {
               if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
             })
             $(window).on('resize', function () {
               if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
             })
          </script>
          <style>
             .selection{
             border: 1px solid gray;
             border-radius: 10px;
             padding: 10px;
             text-decoration:none;
             float:left;
             margin:4px;
             text-align:center;
             display: block;
             color: green;
             }
             .page-header{
             text-align:center;
             text-decoration:hover;
             color: blue;
             font-size: 30px;
             }
          </style>
          <script>
             $(function () {

                 //on page load
                 getAjaxData(1);

                 //on changing select option
                 $('#dynamic_data').change(function(){
                   var val = $('#dynamic_data').val();
                   getAjaxData(val);
                 });

                 function getAjaxData(id){

                 //use getJSON to get the dynamic data via AJAX call
                 $.getJSON('datab1.php', {id: id}, function(chartData) {
                   $('#container').highcharts({
                     chart: {
                       type: 'column'
                     },
                     title: {
                       text: 'Analysis of Data Type in The World'
                     },
                     xAxis: {
                     categories: ['Population', 'Health', 'Agriculture', 'Development', 'Transport', 'Education', 'Social', 'Tourism', 'Finance','Business','Economy', 'Industry', 'Employment', 'Weather', 'Food', 'Energy', 'Infrastructure', 'Science&Technology', 'Government','Culture', 'Religion',
                     'Justice&Law', 'Country', 'Water Resource', 'Maritim', 'Military', 'International', 'Geography', 'Statistics', 'Others','Electronic','Biotechnology', 'Women', 'Gender', 'Cartography','Disability','Position','Marital','CDF','Research']

                     },
                     yAxis: {
                       min: 0,

                       title: {
                         text: 'Percentage (%)'
                       }
                     },
                     legend: {
                   enabled: false
                 },
                 tooltip: {
                   headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                   pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                     '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
                   footerFormat: '</table>',
                   shared: true,
                   useHTML: true
                 },
                 plotOptions: {
                   column: {
                     pointPadding: 0.2,
                     borderWidth: 0
                   }
                 },
                     series: chartData

                   });

                 });
               }
             });
          </script>
       </head>
       <body class="hold-transition skin-blue sidebar-mini">
          <div id="container" style="width: 100%; min-height: 500px; margin: 0 auto"></div>
       </body>
    </html>


And this the code for fetching data from mysql

    <?php
    require('dbcon.php');

    //select database


    //define array
    //we need two arrays - "male" and "female" so $arr and $arr1 respectively!
    $arr    = array();
    $result = array();

    //get the result from the table "highcharts_data"
    $sql = "select * from world";
    $q = mysqli_query($con, $sql) or die(mysqli_error());
    $j = 0;
    while ($row = mysqli_fetch_assoc($q)) {

        //highcharts needs name, but only once, so give a IF condition
        if ($j == 0) {
            $arr['name'] = 'Percentage';

            $j++;
        }
        //and the data for male and female is here
        $arr['data'][] = $row['datavalue'];


    }

    //after get the data for male and female, push both of them to an another array called result
    array_push($result, $arr); //1


    //now create the jvon result using "jvon_encode"
    print jvon_encode($result, JVON_NUMERIC_CHECK);

    mysqli_close($con);
    ?>