title: How to display bar graph on selecting check box?
body: <p>I have this situation where I have used google charts in my project. The code is as shown below</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery.gchart.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery-ui-1.8.20.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery-ui-1.8.20.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
              // Load the Visualization API and the piechart package.
              google.load('visualization', '1.0', { 'packages': ['corechart'] });
  
              // Set a callback to run when the Google Visualization API is loaded.
              google.setOnLoadCallback(drawCharts);
  
              // Callback that creates and populates a data table,
              // instantiates the pie chart, passes in the data and
              // draws it.
  
              function drawCharts() {
  
                  // Create the data table.
                  var dataB = google.visualization.arrayToDataTable([
                ['Chronic Disease', 'Number Of Patients'],
                ['Diabetes', 200],
                ['Hypertension', 84],
                ['Hypercholestrolemia', 76],
                ['Obesity', 48]
                  ]);
  
  
  
                  // Set chart options
                  var optionsB = {
                      title: 'Identified Chronic Population',
                      vAxis: { title: 'Chronic Disease', titleTextStyle: { color: 'red' } }
                  };
  
  
  
                  // Instantiate and draw our chart, passing in some options.
                  var chartB = new google.visualization.BarChart(document.getElementById('chart_div'));
                  chartB.draw(dataB, optionsB);
  
              }
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <hr>
  
  <p>I have certain checkboxes in html </p>
  
  <pre><code>&lt;select id="problems" style="text-align: right"&gt;
                  &lt;option value="diabetes"&gt;DIABETES&lt;/option&gt;
                  &lt;option value="hypertension"&gt;HYPERTENSION&lt;/option&gt;
                  &lt;option value="hypercholestrolemia"&gt;HYPERCHOLESTROLEMIA&lt;/option&gt;
                  &lt;option value="obesity"&gt;OBESITY&lt;/option&gt;
              &lt;/select&gt;
  </code></pre>
  
  <hr>
  
  <p>I want to display bars corresponding to checkboxes checked. searched over SO and internet but did not get any useful info. Any kind of help will be appreciated.</p>