getJSON function is not executing

Question

I am trying to call a simple data.json file, code is given below,

alert("outside");
    $(document).ready(function () {
        alert("inside");
        $("#myButton").click(function () {

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'spline'
                },
                series: [{}]
            };
        });


        $.getJSON('data.json', function (data) {
            alert("read");
            options.series[0].data = data;
            var chart = new Highcharts.Chart(options);
        });

    });

and below is my data.json content

[{"series_name":"Actual","period_name":"Q1 / 2013","period_final_value":"17"},
{"series_name":"Actual","period_name":"Q2 / 2013","period_final_value":"15"}]

I tried by inserting alerts as well, it seems getJSON doesn't read my json file. Since I am new to JSON, I might be wrong in calling function,any help will be greatly appreciated.I have also referred highcharts, my main aim is to plot the graph on highcharts by reading the value from json file.

Answer 1

As a first step, try this code to find out what the error is.

Also look in the networking tab of Chrome dev tools to find out what network activity is taking place.

$.getJSON("data.json", function() {

     alert("success");

})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });