Создать различное количество графических строк morris js?

Question

Мне нужно создать переменную сумму одного и того же графика morris js в зависимости от данных, которые я вытаскиваю из базы данных, т. Е. Все останется неизменным, кроме формы фактических данных. Мой код отлично работает для одного графика, но когда я пытаюсь и цикл через массив, чтобы создавать новые графики, все это испортится, и как исправить это?

Вот мой код, я только жестко закодированные значения, как мне еще нужно работать, как автоматически создать переменную и добавить их в массив:

<script> 
     var jsonVMs= [{"y":"2015-03-10 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-11 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-12 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-13 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-14 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-15 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-16 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-17 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-18 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-19 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-20 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-21 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-22 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-23 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-24 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-25 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-26 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-27 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-28 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-29 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-30 00:00:00","a":"20.00","b":"0.0000000"}]; 

     var jsonVMs1= [{"y":"2015-03-11 00:00:00","a":"3","b":"3"},{"y":"2015-03-12 00:00:00","a":"5","b":"1"},{"y":"2015-03-13 00:00:00","a":"4","b":"0"},{"y":"2015-03-14 00:00:00","a":"4","b":"0"},{"y":"2015-03-15 00:00:00","a":"4","b":"0"},{"y":"2015-03-16 00:00:00","a":"6","b":"1"},{"y":"2015-03-17 00:00:00","a":"12","b":"5"},{"y":"2015-03-18 00:00:00","a":"14","b":"5"},{"y":"2015-03-19 00:00:00","a":"14","b":"2"},{"y":"2015-03-20 00:00:00","a":"14","b":"3"},{"y":"2015-03-21 00:00:00","a":"15","b":"2"},{"y":"2015-03-22 00:00:00","a":"15","b":"2"},{"y":"2015-03-23 00:00:00","a":"15","b":"4"},{"y":"2015-03-24 00:00:00","a":"17","b":"6"},{"y":"2015-03-25 00:00:00","a":"17","b":"6"},{"y":"2015-03-26 00:00:00","a":"19","b":"9"},{"y":"2015-03-27 00:00:00","a":"17","b":"6"},{"y":"2015-03-28 00:00:00","a":"17","b":"6"},{"y":"2015-03-29 00:00:00","a":"17","b":"6"},{"y":"2015-03-30 00:00:00","a":"18","b":"6"}]; 

     var a = [jsonVMs,jsonVMs1]; 

    </script> 

    <div id="VMsDiv1" ></div> 

    <script type="text/javascript"> 
    var index =0; 
    while (index < a.length) { 
    new Morris.Line({ 
     // ID of the element in which to draw the chart. 
     element: 'VMsDiv1', 
     // Chart data records -- each entry in this array corresponds to a point on 
     // the chart. 
     data:a[index], 
     // The name of the data record attribute that contains x-values. 
     xkey: 'y', 
     // A list of names of data record attributes that contain y-values. 
     ykeys: ['a','b'], 
     // Labels for the ykeys -- will be displayed when you hover over the 
     // chart. 
     xLabelFormat: function(d) { 
     return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear();}, 
     labels: ['Total VMs','Powered On'], 
     dateFormat: function(date) { 
     d = new Date(date); 
     return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear(); 
     }, 
     hideHover: true 
    }); 
    index++ 

    } 

Answer 1

В соответствии мой комментарий, вам нужно отделить div, где будут отображаться графики.

Таким образом, добавить еще один DIV так:

<div id="VMsDiv0" ></div> 

И измените строку следующим образом:

while (index < a.length) { 
    new Morris.Line({ 
     // ... 
     element: 'VMsDiv'+index, 
     // ... 
    }); 
}