dongzhi9457
2015-04-02 08:22 阅读 90

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

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++

    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    doujiao1814 doujiao1814 2015-04-02 08:43

    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,
            // ...
        });
    }
    
    点赞 评论 复制链接分享

相关推荐