Toggle data based on checkbox value with morris.js

I'm getting trouble in making what I want morris.js charts to do.

My goal is to be able to toggle specific lines based on input[type=checkbox] value.

So far here's what I have done:

JS code

var morris = Morris.Line({
  element: 'line-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

jQuery(function($) {
    $('#activate').on('change', function() {
      var isChecked = $(this).is(':checked');
      console.log(isChecked);
      if(!isChecked) {
        morris = Morris.Line({
          element: 'line-example',
          ykeys: ['a']
        });
      }
    });
});

HTML code

<body>
  <div id="line-example"></div>
  <br/>
  <input type="checkbox" id="activate" checked="checked"/> Activate
</body>

The problem is that the chart duplicates itself with both lines showing up.

Any idea where to investigate to? (I'm not asking for someone to make up the code for me, I just need some tips).

标签： javascript jquery toggle lines morris.js

3条回答

成全新的幸福

2楼-- · 2019-09-06 20:08

For those who might be interested in the solution (works for toggling one line):

JS code

<script>
function data(toggle) {
  var ret = [
      { y: '2006', a: 100, b: 90 },
      { y: '2007', a: 75,  b: 65 },
      { y: '2008', a: 50,  b: 40 },
      { y: '2009', a: 75,  b: 65 },
      { y: '2010', a: 50,  b: 40 },
      { y: '2011', a: 75,  b: 65 },
      { y: '2012', a: 100, b: 90 }
    ];


  if(toggle == 1) {

    for(var i = 0; i < ret.length; i++)
      delete ret[i].b;

  }

  return ret;
};

var morris = Morris.Line({
  element: 'line-example',
  data: data(),
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

jQuery(function($) {
    $('#activate').on('change', function() {
      var isChecked = $(this).is(':checked');
      if(isChecked)
      {
         morris.setData(data(0));
      } else {
         morris.setData(data(1));
      }
    });
});
</script>

Working Fiddle: http://jsfiddle.net/4ztbu8oo/

0人赞添加讨论(0) 举报

虎瘦雄心在

3楼-- · 2019-09-06 20:18

I've edited your code a little bit, and I got a 3rd line in there that responds to being checked, but there's a bug that brings back the third line when the second one is unchecked.

/*
 * Play with this code and it'll update in the panel opposite.
 *
 * Why not try some of the options above?
 */
function data(toggle) {
  var ret = [
      { y: '2006', a: 100, b: 90, c:80},
      { y: '2007', a: 75,  b: 65, c:80 },
      { y: '2008', a: 50,  b: 40, c:80 },
      { y: '2009', a: 75,  b: 65, c:80 },
      { y: '2010', a: 50,  b: 40, c:80 },
      { y: '2011', a: 75,  b: 65, c:80 },
      { y: '2012', a: 100, b: 90, c:80 }
    ];


  if(toggle == 1) {

    for(var i = 0; i < ret.length; i++)
      delete ret[i].b;
  }
  if(toggle == 2) {

    for(var i = 0; i < ret.length; i++)
      delete ret[i].c;

  }

  return ret;
};

var morris = Morris.Line({
  element: 'line-example',
  data: data(),
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Series A', 'Series B', 'Series C']
});

jQuery(function($) {
    $('#activate').on('change', function() {
      var isChecked = $(this).is(':checked');
      if(isChecked)
      {
         morris.setData(data(0));
      } else {
         morris.setData(data(1));
      }
    });
});
jQuery(function($) {
    $('#activate1').on('change', function() {
      var isChecked = $(this).is(':checked');
      if(isChecked)
      {
         morris.setData(data(0));
      } else {
         morris.setData(data(2));
      }
    });
});

Here's your fiddle edited a bit. And thank you for having this question!!

0人赞添加讨论(0) 举报

倾城　Initia

4楼-- · 2019-09-06 20:24

I have created a wrapper for morrisjs which allow you to toggle data.

https://github.com/vadimmanaev/morrisjs-toggle

0人赞添加讨论(0) 举报

Toggle data based on checkbox value with morris.js

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间