rendering a chart when you hit toggle switch

62 Views Asked by At

I'm using bootstrap toggle in my project to create a toggle switch.

This is the code for my toggle switch (the default side is "Primary Analysis", and the other side is titled "Secondary Analysis):

  <label class="checkbox-inline">
    <input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Primary Analysis" data-off="Secondary Analysis"> 
  </label>

Next to my toggle switch, I have a button titled "Analyze".

Here's what I want to do:

When the toggle switch is turned to the side that reads "Primary Analysis", then if I hit the "analyze" button, I want to render a certain chart. It's a Highcharts chart that's contained in a div tag with the id "chart1".

And when the toggle switch is turned to the side that reads "Secondary Analysis", then if I hit the "analyze" button, then I want to render a different chart. This chart is a highcharts chart that's contained in a div tag with the id "chart2".

I was reading a tutorial on the Bootstrap Toggle website on event propgation, this might be helpful:

  <input id="toggle-event" type="checkbox" data-toggle="toggle">
    <div id="console-event"></div>
     <script>
      $(function() {
     $('#toggle-event').change(function() {
       $('#console-event').html('Toggle: ' + $(this).prop('checked'))
       })
      })
   </script>

Any ideas?

0

There are 0 best solutions below