javascript - Put more than one line with morris.js

one text

Solution:

You need to put your values in the same object for each year. Don't forget to set the parseTime to false to prevent Morris from interpreting dates.

Please try the following snippet:

var datos = [
    { year: 2008, v1: 20, v2: 120 },
    { year: 2009, v1: 10, v2: 110 },
    { year: 2010, v1: 5, v2: 51 },
    { year: 2011, v1: 5, v2: 51 },
    { year: 2012, v1: 20, v2: 201 }
];

var cont = 0;

while (cont < 100) {
    var nuevo1 = Math.floor(Math.random() * 6000) * cont;
    var nuevo2 = Math.floor(Math.random() * 6000) * cont;
    var nuevoYear = 2012 + cont

    datos.push({
        year: nuevoYear,
        v1: String(nuevo1),
        v2: String(nuevo2),
    });

    cont++;
}

new Morris.Line({
    element: 'myfirstchart',
    data: datos,
    xkey: 'year',
    ykeys: ['v1', 'v2'],
    labels: ['Value 1', 'Value 2'],
    parseTime: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div>
    <div id="myfirstchart"></div>
</div>

Source