$.getJSON is not getting the values to show as a line graph

See more:

Javascript

PHP

jQuery

JSON

I have two files

searh_journal.php

<script type="text/javascript">
function submitForm() {

    var form = document.myform;

    var dataString = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: 'journal_table/get_data_journ.php',
        data: dataString,
        success: function (data) {
            $('#container_journal').html(data);

            var options = {
                chart: {
                    renderTo: 'container_journal',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },

                xAxis: {
                    title: {
                        text: 'Year'
                    },
                    categories: []
                },

                yAxis: {
                    title: {
                        text: 'Number of Citations'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },

                series: [{
                    type: 'line',
                    color: '#0066FF',
                    name: 'Citations',
                    data: []
                }]
            }

            $.getJSON("journal_table/get_data_journ.php", function (data) {
                $.each(data, function (key, value) {
                    $.each(value, function (key, value) {
                        options.series[0].data = value;
                    });
                });

                chart = new Highcharts.Chart(options);
            });


        }
    });
    return false;
}
</script>

<div id="container_journal"></div>

get_data_journ.php

include '../connect.php';


$hello = $_POST['checkedname'];
foreach($hello as $key = > $values) {
    $result_journ = mysql_query("SELECT year, citations, jour_id FROM journ_graph WHERE jour_id = '$values'");

    $rows_journ = array();
    while ($r_journ = mysql_fetch_array($result_journ)) {
        $row_journ[0] = $r_journ[0];
        $row_journ[1] = $r_journ[1];
        array_push($rows_journ, $row_journ);
    }


    print json_encode($rows_journ, JSON_NUMERIC_CHECK);

}

<br />
The output is like this<br />
<br />
            | Journal Name | Edgefactor |<br />
    Checkbox| journal1     | 0.56       |<br />
    Checkbox| journal2     | 0.34       |<br />
    Checkbox| journal3     | 0.32       |<br />
    Checkbox| journal4     | 0.14       |<br />
    Checkbox| journal5     | 0.54       |<br />

Compare Journal button
Here if the user chooses two journals and he wants to compare two journals, he can click on the compare journal button, then the graph must be shown for that two journals.

Here the html part is working i mean the plain html json data is shown, but the graph is not showing, the problem is in the $.getJson() line I guess.