37098

Toggle data based on checkbox value with morris.js

Question:

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:

<strong>JS code</strong>

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'] }); } }); });

<strong>HTML code</strong>

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

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).

Answer1:

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

<strong>JS code</strong>

<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: <a href="http://jsfiddle.net/4ztbu8oo/" rel="nofollow">http://jsfiddle.net/4ztbu8oo/</a>

Answer2:

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

Answer3:

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

<a href="https://github.com/vadimmanaev/morrisjs-toggle" rel="nofollow">https://github.com/vadimmanaev/morrisjs-toggle</a>

Recommend

  • Styling of charts externally
  • Morris chart with dynamic data
  • Handling exclusive-or conditions when binding to two boolean properties in XAML
  • keyup event in wpf listbox datatemplate
  • Could not re-enable the KeyGaurd once disabled it
  • Neo4j: Legacy Indexes and auto index vs new label bases schema indexes
  • PyQt4 application on Windows is crashing on exit
  • Android Lock Screen C# .NET Replica
  • How can I make this modal persistent?
  • C# List of Panels
  • Activation Function choice for Neural network
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • Error in installing package: fatal error: stdlib.h: no such file or directory
  • How to make R's read_csv2() recognise the text characters properly
  • Ajax calls do not work in IE unless you fiddle with security settings
  • Detect when Facebook like button is clicked
  • How to Cache Real-time Data?
  • Chrome doesn't support silverlight anymore? How to solve this?
  • jQuery .attr() and value
  • How to clear text inside text field when radio button is select
  • Get data from AJAX - How to
  • Email format validation in mvc3 view
  • Deselecting radio buttons while keeping the View Model in synch
  • Nant, Vault & Windows Integrated Authentication
  • Modifying destination and filename of gulp-svg-sprite
  • How to model a transition system with SPIN
  • jQuery tmpl and DataLink beta
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to disable jQuery.jplayer autoplay?
  • How to delete a row from a dynamic generate table using jquery?
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • using HTMLImports.whenReady not working in chrome
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?