Uncaught TypeError: Cannot read property 'x' of undefined Morris.js

Question

I'm going nuts and I can't figure out what is causing this error.

My Javascript:

<script>
$(document).ready(function() {


        var jqxhr = $.getJSON("rest/scriptruns/VeloxMorgana", function() {
            //VeloxMorgana.setData('[{"period":"2014-07-15","VeloxMorgana":1},{"period":"2014-07-16","VeloxMorgana":47}]');
        });

        jqxhr.complete(function() {
            if ($('#VeloxMorgana').length) {
                var week_data = jqxhr;
                var VeloxMorgana = Morris.Line({
                    element : 'VeloxMorgana',
                    data : week_data,
                    xkey : 'period',
                    ykeys : ['VeloxMorgana'],
                    labels : ['VeloxMorgana'],
                    events : ['2014-07-10', '2014-07-17']
                });
            }
        });

    });
</script>

My HTML

<!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget" id="wid-id-7" data-widget-editbutton="false">
            <!-- widget options:
            usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

            data-widget-colorbutton="false"
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true"
            data-widget-sortable="false"

            -->
            <header>
                <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                <h2>Time Graph</h2>

            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->

                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body no-padding">

                    <div id="VeloxMorgana" class="chart no-padding"></div>

                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>
        <!-- end widget -->

It loaded when I statically set the data, but when I use JSON it just freaks.

Here is the JSON it loads in when I call it using the ajax json feature and the load data (i've tried just putting it straight into the data from finishing the json request, same result).

[  
   {  
      "period":"2014-07-15",
      "VeloxMorgana":1
   },
   {  
      "period":"2014-07-16",
      "VeloxMorgana":47
   }
]

Answer 1

The jqxhr is just the promise object for your XHR request, it doesn't actually contain the data that was received.

Since you don't really deal with failure at all, I could recommend just using the success callback straight away:

$.getJSON("rest/scriptruns/VeloxMorgana", function(data) {
    if ($('#VeloxMorgana').length) {
        Morris.Line({
            element : 'VeloxMorgana',
            data : data,
            xkey : 'period',
            ykeys : ['VeloxMorgana'],
            labels : ['VeloxMorgana'],
            events : ['2014-07-10', '2014-07-17']
        });
    }
});

Also, the documentation states:

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods introduced in jQuery 1.5 are deprecated as of jQuery 1.8.