CODEWITHSUNDEEP
javascriptphpjquerycodeignitermorris.js
Jguy
Jguy

Reputation: 580

Javascript TypeError with Morris charts

I have a website with Bootstrap, Codeigniter, and trying to use Morris charts to display some dynamic information about registrations (if you've used IPB's Admin Interface, new account registrations past 7 days is what I'm going for).

I have the following snippets of code:

header.php

<!-- Morris Charts CSS -->
<link href="<?php echo base_url('assets/css/morris.css'); ?>" rel="stylesheet">

<!-- jQuery -->
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>

<!-- Morris Charts JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>

Relevant section of my index.php

<div class="panel panel-default">
 <div class="panel-heading">
  <i class="fa fa-bar-chart-o fa-fw"></i> Account Registrations Past 7 days
 </div>
 <!-- /.panel-heading -->
 <div class="panel-body">
  <div id="acctregs" style="height: 300px;"></div>
 </div>
 <!-- /.panel-body -->
</div>
<script>
 var acctregs = new Morris.Line({
 // ID of the element in which to draw the chart.
 element: 'acctregs',
 // Chart data records -- each entry in this array corresponds to a point on
 // the chart.
 data:
 <?php echo json_encode($acct_regs); ?>,
 // The name of the data record attribute that contains x-values.
 xkey: 'date',
 // A list of names of data record attributes that contain y-values.
 ykeys: ['value'],
 // Labels for the ykeys -- will be displayed when you hover over the
 // chart.
 labels: ['Value']
 });
</script>

As well, result of echo json_encode($acct_regs);:

{"2015-01-18":0,"2015-01-17":1,"2015-01-16":2,"2015-01-15":3,"2015-01-14":4,"2015-01-13":5}

I've tried with and without the 'var acctregs = ' snippet with no change. I'm receiving an error in my browser console: "TypeError: this.data[0] is undefined morris.min.js:6" and as of so far, am very stumped as to why it doesn't work. The jquery I have is 1.9.1.

Any assistance as to what I might be missing would be welcome. Thank you.

EDIT 2015-01-19: I moved the block containing the Morris.Line information from the index.php to the footer.php file, both before the last tag and after it with no change, it still gives same error. Thanks again for any thoughts/help.

Upvotes: 4

Views: 1982

Answers (1)

chiliNUT
chiliNUT

Reputation: 19573

So, your main issue is that your data is not in the correct format for morris. Morris wants an array of points, that is, a simple object containing an x-y coordinate pair. E.g., the point 1,2 might look like {x:1, y:2}. So, your data of date/value pairs, should look something like this:

var acct_regs = [
    {date:"2015-01-18", y:0},
    {date:"2015-01-17", y:1},
    {date:"2015-01-16", y:2},
    {date:"2015-01-15", y:3},
    {date:"2015-01-14", y:4},
    {date:"2015-01-13", y:5}
    ];

Beyond that, your chart declaration was mostly correct; you just have to tell morris what its supposed to be using for the xkey and the ykey:

var acctregs = new Morris.Line({
    // ID of the element in which to draw the chart.
    element: 'acctregs',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: acct_regs,
    // The name of the data record attribute that contains x-values.
    xkey: 'date', //could be anything, just has to match what is in data
    // A list of names of data record attributes that contain y-values.
    ykeys: ['y'], //could be anything, just has to match what is in data
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Value'],
    dateFormat: function (x) { //optional - specify a date format for the legend
        return new Date(x).toString().split("00:00:00")[0];
    }
});

The chart looks like this:

enter image description here

And you can see it in action here: http://jsfiddle.net/phgqot3z/1/

For most things morris, the basic api doc is great: http://morrisjs.github.io/morris.js/lines.html

Beyond that, looking at the source directly is also a great resource.

Upvotes: 2

Related Questions