CODEWITHSUNDEEP
javascriptjqueryhtmlcharts
KenyKeny
KenyKeny

Reputation: 151

Selection list to toggle display of mutliple charts in <div>

There are about 20 div sections in my webpage.But after choosing 1 and then 2, the chart of 1 is keeping displayed. Any ideas on how to tune the js to make charts being displayed as long as I change selection in the list?What technique do I need for this?

html

<select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
</select>

<div style='display:block; width:600px;' id='chart1'></div>
<div style='display:none; width:600px;' id='chart2'></div>

js(the codes here just demonstrate turn on the chart but not disappear the other deselected charts.Thanks

$(document).ready(function(){
    $('#selectchart').on('change', function() {
      if ( this.value == '1')
      {
        $("#chart1").show();
      }
      else if (this.value =='2')
      {
        $("#chart2").show();
      }
      else
      {
        $("#chart3").show();
      }
    });
});

Upvotes: 0

Views: 170

Answers (2)

Ayush
Ayush

Reputation: 759

The simple approach that I can think of is give all the charts the same class.

 <select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
</select>
<div style='display:block; width:600px;' id='chart0' class="chart">ccccbbb</div>
<div style='display:none; width:600px;' id='chart1' class="chart">aaa</div>
<div style='display:none; width:600px;' id='chart2' class="chart">bbb</div>

Then use jquery to hide the class chart and show the current chart.

$(document).ready(function(){
    $('#selectchart').on('change', function() {
      $(".chart").hide();
      $("#chart"+this.value).show();
    });
});

For the problem of changing size just set a fix size for the graphs.

<script type="text/javascript">
    //pie chart    
    function drawPie() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['AA', 5],
      ['BB',  0],
      ['CC',  6],
      ['DD',  7],
      ['GG',  8],
    ]);

    var options = {
      title: 'My Daily Activities01',
      height: 200, //Fix the size
      width: 400 //Fix the size
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart0'));

    chart.draw(data, options);
    }
</script>

JS fiddle

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Try this. I also make your function a bit more dynamic

$(document).ready(function() {
  $('#selectchart').on('change', function() {
    $('div[id^="chart"]').hide()
    $("#chart" + this.value).show();
    if(this.value == 0) {$("#chart1").show();}
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectchart'>
  <option value="0">Sales of Jan</option>
  <option value="1">Sales of Feb</option>
  <option value="2">Sales of Mar</option>
  <option value="3">Sales of Apr</option>
  <option value="4">Sales of May</option>
</select>

<div style='display:block; width:600px;' id='chart1'>chart1</div>
<div style='display:none; width:600px;' id='chart2'>chart2</div>
<div style='display:none; width:600px;' id='chart3'>chart3</div>
<div style='display:none; width:600px;' id='chart4'>chart4</div>

Upvotes: 3

Related Questions