Put more than one line with morris.js

Question

I am trying to make a graph with morris.js and I need to represent 2 lines in a graph, how can I do it?

I have 2 sets of data in one array, but I can't see any line, if I put todos[0], I can see the first line and with todos[1] the second, but I want to see both of them. I want to put more than 2 lines, and I will use this with an ajax function, but now I need to see 2 lines, what should I do? I don't know how to see both lines.

var datos = [
  { year: 2008, value: 20 },
  { year: 2009, value: 10 },
  { year: 2010, value: 5 },
  { year: 2011, value: 5 },
  { year: 2012, value: 20 }
];

var total = [];
var cont = 0;

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

  //console.log(nuevoYear);
  datos.push({
    year: nuevoYear,
    value: String(nuevo),
  });

  cont++;
}

total.push(datos);

var datos2 = [
  { year: 2008, value: 120 },
  { year: 2009, value: 110 },
  { year: 2010, value: 51 },
  { year: 2011, value: 51 },
  { year: 2012, value: 201 }
];

var cont2 = 0;
while (cont2 < 100) {
  var nuevo = Math.floor(Math.random() * 6000) * cont2;
  var nuevoYear = 2012 + cont2

  //console.log(nuevoYear);
  datos2.push({
    year: nuevoYear,
    value: String(nuevo),
  });

  cont2++;
}

total.push(datos2);
//console.log([total]);

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to
  // a point on the chart.
  data: total[0],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // 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 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 class="container todo my-5">
  <div class="contDiv">
    <div id="myfirstchart" style="height: 250px;"></div>
  </div>
</div>

Answer 1

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>

New version, based on comments:

var startYear = 2008;
var years = 5;

var data = [];
var labels = [];
var ykeys = [];

for (var i = startYear; i < startYear + years; i++) {
    var obj = {};
    obj["year"] = i;

    for (var j = 0; j < 4; j++) {
        obj["v" + (j + 1)] = Math.floor(Math.random() * 6000) * (j + 1);

        if (i == startYear) {
            labels.push("Value " + (j + 1));
            ykeys.push("v" + (j + 1));
        }
    }

    data.push(obj);
}

new Morris.Line({
    element: 'myfirstchart',
    data: data,
    xkey: 'year',
    ykeys: ykeys,
    labels: labels,
    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>