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

Question

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

<? 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);

}

The output is like this

            | Journal Name | Edgefactor |
    Checkbox| journal1     | 0.56       |
    Checkbox| journal2     | 0.34       |
    Checkbox| journal3     | 0.32       |
    Checkbox| journal4     | 0.14       |
    Checkbox| journal5     | 0.54       |

                       Compare Journal button

Here if the user chooses two journals and he wants to compare two journals(Refer Picture), 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.

Answer 1

You need to add the appropriate elements of each row of the JSON array to the categories and data arrays in the options.

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