创建不同数量的morris js线图？

Question

I need to create a varying amount of the same morris js graphs depending on the data I pull from the database, i.e everything will stay the same except form the actual data. My code works perfectly for one graph but when I try and loop through an array to make new graphs it all messes up, any ides how to fix this?

Here is my code, I have just hardcoded values as I still need to work out how to automatically create variable and add them to an array:

    <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

As per my comment, you need to separate the div where the charts will be rendered.

As such, add another div like so:

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

And change the line to this:

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