title: Display barchart based on selected item from dropdown list
body: <p>I'm currently working with barcharts on a website which has been developed using ASP and C#. The barchart has been developed using <a href="https://developers.google.com/chart/interactive/docs/gallery/barchart" rel="nofollow noreferrer">Google Charts</a>. The value to the barchart is retrieved from a DB. I can manage to display the barchart without a problem with the correct value. Now the client requires a drop-down list which users can select items from. A barchart should get displayed according to the selected item. </p>
  
  <p>So for example If the user selected <strong>Retail</strong> A graph containing that data should get displayed on the page. </p>
  
  <p>To put the graph together my code is below;</p>
  
  <pre><code>private void BindChart()
  {
      DataTable dsChartData = new DataTable();
      StringBuilder strScript = new StringBuilder();
  
      try
      {
          dsChartData = GetChartData();
  
          strScript.Append(@"&lt;script type='text/javascript'&gt;  
                  google.load('visualization', '1', {packages: ['corechart']}); &lt;/script&gt;  
  
                  &lt;script type='text/javascript'&gt;  
  
                  function drawChart() {         
                  var data = google.visualization.arrayToDataTable([  
                  ['Course', 'Progression'],");
  
          foreach (DataRow row in dsChartData.Rows)
          {
              strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],");
          }
          strScript.Remove(strScript.Length - 1, 1);
          strScript.Append("]);");
  
          strScript.Append(@" var options = {     
                                  hAxis: {
                                  viewWindow: {
                                  min: 0,
                                  max: 100
                                  },
                                  ticks: [0, 25, 50, 75, 100],
                                  },
                                  title: 'My Progression (%)'      
                                  };   ");
  
          strScript.Append(@"var chart = new google.visualization.BarChart(document.getElementById('barchart'));          
                              chart.draw(data, options);        
                              }    
                          google.setOnLoadCallback(drawChart);  
                          ");
          strScript.Append(" &lt;/script&gt;");
  
          ltScripts.Text = strScript.ToString();
      }
      catch
      {
      }
      finally
      {
          dsChartData.Dispose();
          strScript.Clear();
      }
  }
  </code></pre>
  
  <p>To get the values from DB my code is as follows;</p>
  
  <pre><code>private DataTable GetChartData()
  {
      string UsrName = User.Identity.Name;
      DataSet dt = new DataSet();
      try
      {
          using (SqlConnection conn = new SqlConnection(Common.ConnectionString))
          {
              using (SqlCommand cmd = new SqlCommand("SELECT Progression,Course FROM Messages where UserName=@UserName"))
              {
                  using (SqlDataAdapter sda = new SqlDataAdapter())
                  {
                      SqlParameter para2 = new SqlParameter("UserName", UsrName);
                      cmd.Parameters.Add(para2);
                      cmd.Connection = conn;
                      sda.SelectCommand = cmd;
                      sda.Fill(dt);
  
                      DropDownList1.DataSource = dt;
                      DropDownList1.DataTextField = "Course";
                      DropDownList1.DataBind();
                  }
              }
              DropDownList1.Items.Insert(0, new ListItem("Select your course"));
          }
      }
      catch (Exception)
      {
      }
      return dt.Tables[0];
  }
  </code></pre>
  
  <p>If I use the code below it works for the first time but after that it doesn't populate the chart. <code>BindChart1</code> exactly the same as <code>BindChart</code>. It just gets <code>document.getElementById('barchart1')</code> instead of <code>document.getElementById('barchart')</code></p>
  
  <pre><code>protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
  {
      if (DropDownList1.SelectedIndex == 1)
      {
          BindChart1()
      }
      else{
          BindChart();
      }
  }
  </code></pre>
  
  <p>Thanks in advance for all your help and support.</p>
  
  <p><img src="https://i.stack.imgur.com/BrnUj.png" alt="enter image description here"></p>