HTML5 chart fails to render

StackOverflow https://stackoverflow.com/questions/23505962

  •  16-07-2023
  •  | 
  •  

Question

I'm trying to create a chart using morris.js. I cannot understand why the data I have rendered will not work. This is the entire function. I get the error: Uncaught TypeError: Cannot read property 'match' of undefined.

LINK TO MORRIS.JS DEMO

$(function () {
    Morris.Line({
        element: 'line-example',
        data: [{
            "date": "2014-05-03",
                "71236": "247893",
                "71232": "19520",
                "70555": "16723",
                "33315": "415516",
                "61236": null,
                "62243": null
        }, {
            "date": "2014-05-04",
                "71236": "315174",
                "71232": "19103",
                "70555": "16572",
                "33315": "443728",
                "61236": null,
                "62243": null
        }, {
            "date": "2014-05-05",
                "71236": "265",
                "71232": "469",
                "70555": "519945",
                "33315": "24635",
                "61236": "74245",
                "62243": "568387"
        }, {
            "date": "2014-05-06",
                "71236": "20",
                "71232": "17",
                "70555": "38684",
                "33315": "1794",
                "61236": "3762",
                "62243": "24660"
        }],
        xkeys: 'date',
        ykeys: ["71236", "71232", "70555", "33315", "61236", "62243"],
        labels: ["71236", "71232", "70555", "33315", "61236", "62243"]
    });

});

What's wrong with this syntax?

EDIT

I have now simplified and made as much like the demo as possible, still not working:

$(function () {
    Morris.Line({
        element: 'line-example',
        data: [
            {"y": "2011", a: "247893", b: "19520", c: "16723", d: "415516", e: "3", f: "3"}, 
            {"y": "2012", a: "315174", b: "19103", c: "16572", d: "443728", e: "3", f: "3"}, 
            {"y": "2013", a: "265", b: "469", c: "519945", d: "24635", e: "74245", f: "568387"}, 
            {"y": "2014", a: "20", b: "17", c: "38684", d: "1794", e: "3762", f: "24660"}
        ],
        xkeys: "y",
        ykeys: ["a", "b", "c", "d", "e", "f"],
        labels: ["a", "b", "c", "d", "e", "f"]
    });

});

JSBIN

Was it helpful?

Solution

OK I know what your main issue is. http://jsbin.com/uqawig/3202/edit

You just needed to change 2 things. 1 take it out of a jQuery ready function. (this is not necessary to fix the issue) 2 it's xkey not xkeys That is the main issue. Change those two things and you will be good to go. Everything else I said before is untrue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top