oviliukaslt
oviliukaslt

Reputation: 51

Nothing displayed in Highchart Column

I'm trying to display average grades for each individual assignment but I'm getting no luck displaying it within a Highchart Column. It displays just the legend and "where the graph should be".

I have my div <div id="container"></div> as well as the necessary SQL code:

$row=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                    from score s
                                        INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                        INNER JOIN module m ON r.module_id = m.module_id
                                    WHERE r.module_id = 7
                                    GROUP BY r.due_date asc;");
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Revenue vs. Overhead',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Amount'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: []
        }

        $.getJSON("avg_grades.json", function(json) {
            options.xAxis.categories = json[0]['Assignments'];
            options.series[0] = json[1];
            chart = new Highcharts.Chart(options);
        });
    });
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<?php
$db=new PDO('mysql:dbname=attendance_database;host=localhost;','user','password');
$row=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");
$row2=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");
$row3=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");

$row->execute();
###############################
$json_data=array();
$json_data['name'] = 'Assignments';
foreach($row as $rec)
{
    $json_data['value'][]=$rec['Assignment'];
}
##########################
$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=$rec2['Grade'];
}

$result = array();
array_push($result,$json_data);
array_push($result,$json_data2);

$fp = fopen("avg_grades.json", "w");
fwrite($fp, json_encode($result));
fclose($fp);

echo json_encode($result);
?>

Expected outcome

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Find Hidden Data',
            'Google Hacking',
            'Caine Testing',
            'Penetration Testing',
            'FA 2'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Grades %'
        }
    },
    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: [{
        name: 'Avg Grade',
        data: [99, 70,80, 47.5, 70, 40]

    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


Actual outcome

Actual outcome

Upvotes: 2

Views: 55

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Actual problem is in php $json_data2;

Instead of

$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=$rec2['Grade'];
}

it should be

$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=intval($rec2['Grade']); /*intval()*/
}

This will result in correct JSON string with array of numbers instead of array of string

final output [{"name":"Assignments","value":["Find Hidden Data","Google Hacking","Caine Testing","Penetration Testing","FA 2"]},{"name":"Grade","value":[99,70,80,47.5,70,40]}]

In your current JSON string, this is demonstration to show when array of string ["99", "70","80", "47.5", "70", "40"] is converted to array of numbers [99, 70,80, 47.5, 70, 40] then only chart works as desired

var data = [{
  "name": "Assignments",
  "value": ["Find Hidden Data", "Google Hacking", "Caine Testing", "Penetration Testing", "FA 2"]
}, {
  "name": "Grade",
  "value": ["99", "70", "80", "47.5", "70", "40"]
}]
/*problem is here in second object value having array of string*/
var categories, datasN
for (var i = 0; i < data.length; i++) {
  if (data[i].name == "Assignments") {
    categories = data[i].value
  }
  if (data[i].name == "Grade") {
    datasN = data[i].value.map(Number) /*converting string array to number array*/
   
  }
}

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: categories,
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Grades %'
    }
  },
  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: [{
    name: 'Avg Grade',
    data: datasN

  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Hope this gives you enough explanation

Upvotes: 1

Related Questions