title: how to render multiple highcharts into one div tag using javascript
body: <p>i want to create a highchart program,where i need to incorporate various highcharts.one drop down would be there with options listed in it.and those option should be the name of different different highcharts.eg.gauge highvhart,pie highchart,bar ,column,sparkline,line highchart.and a single div tag should be there on the same page.If i select gauge highchart option from the dropdown list then gauge  highchart should be displayed on the page.</p>
  
  <p>I know how to create these highcharts separately but m not getting any idea regarding the issue where we should use only one div tag to render all the highcharts based on the selected option from the dropdown box.</p>
  
  <p>I'am not giving my code because i've no idea about this.so,please suggest me some idea.thanks in advance.</p>
  
  <p>here's my complete code .In this code data is displayed in a tabular format but i want to have this in a dropdown manner which i have explained before and i just want one div tag to render all the highcharts based on the selection made.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Highcharts Example&lt;/title&gt;
           &lt;style type="text/css"&gt;
  
  table{
      border-collapse:collapse;
      font-family:helvetica, arial, sans-serif;
  }
  th{
      font-weight:bold;
      text-align:center;
      padding:5px;
  }
  thead th{
      border-bottom:1px solid #999;
  }
  td{
      padding:5px;
      vertical-align:middle;
  }
  
  
           &lt;/style&gt;
  
          &lt;script type="text/javascript" src="../../js/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  $(function () {
      var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container',
          defaultSeriesType: 'area',
          margin:[0,0,0,0],
          //borderWidth:1
      },
      title:{
          text:''
      },
      credits:{
          enabled:false
      },
      xAxis: {
          labels: {
              enabled:false
          }
      },
      yAxis: {
          maxPadding:0,
          minPadding:0,
          endOnTick:false,
          labels: {
              enabled:false
          }
      },
      legend: {
          enabled:false
      },
      tooltip: {
          enabled:false
      },
      plotOptions: {
          series:{
              lineWidth:1,
              shadow:false,
              states:{
                  hover:{
                      lineWidth:9
                  }
              },
              marker:{
                  //enabled:false,
                  radius:1,
                  states:{
                      hover:{
                          radius:2
                      }
                  }
              }
          }
      },
      series: [{
          color:'#666',
          fillColor:'rgba(204,204,204,.25)',
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  
      }]
  });
  });
  
  $(function () {
      var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container1',
          defaultSeriesType: 'pie',
          margin:[0,0,0,0],
          //borderWidth:1
      },
      title:{
          text:''
      },
      credits:{
          enabled:false
      },
      xAxis: {
          labels: {
              enabled:false
          }
      },
      yAxis: {
          maxPadding:0,
          minPadding:0,
          endOnTick:false,
          labels: {
              enabled:false
          }
      },
      legend: {
          enabled:false
      },
      tooltip: {
          enabled:false
      },
      plotOptions: {
          series:{
              lineWidth:1,
              shadow:false,
              states:{
                  hover:{
                      lineWidth:9
                  }
              },
              marker:{
                  //enabled:false,
                  radius:1,
                  states:{
                      hover:{
                          radius:2
                      }
                  }
              }
          }
      },
      series: [{
          color:'#666',
          fillColor:'rgba(204,204,204,.25)',
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  
      }]
  });
  });
  
  
  $(function () {
      var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container2',
          defaultSeriesType: 'bar',
          margin:[0,0,0,0],
          //borderWidth:1
      },
      title:{
          text:''
      },
      credits:{
          enabled:false
      },
      xAxis: {
          labels: {
              enabled:false
          }
      },
      yAxis: {
          maxPadding:0,
          minPadding:0,
          endOnTick:false,
          labels: {
              enabled:false
          }
      },
      legend: {
          enabled:false
      },
      tooltip: {
          enabled:false
      },
      plotOptions: {
          series:{
              lineWidth:1,
              shadow:false,
              states:{
                  hover:{
                      lineWidth:9
                  }
              },
              marker:{
                  //enabled:false,
                  radius:1,
                  states:{
                      hover:{
                          radius:2
                      }
                  }
              }
          }
      },
      series: [{
          color:'#666',
          fillColor:'rgba(204,204,204,.25)',
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  
      }]
  });
  });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;script src="../../js/highcharts.js"&gt;&lt;/script&gt;
  &lt;table&gt;
      &lt;caption&gt;Sparkline&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Category&lt;/th&gt;
              &lt;th&gt;Value&lt;/th&gt;    
              &lt;th&gt;Trend&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th scope="row"&gt;Category 1&lt;/th&gt;
              &lt;td&gt;54.4&lt;/td&gt;
              &lt;td&gt;&lt;div id="container" style="height:60px;width:200px;"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th scope="row"&gt;Category 2&lt;/th&gt;
              &lt;td&gt;60.4&lt;/td&gt;
              &lt;td&gt;&lt;div id="container1" style="height:60px;width:200px;"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th scope="row"&gt;Category 3&lt;/th&gt;
              &lt;td&gt;60.4&lt;/td&gt;
              &lt;td&gt;&lt;div id="container2" style="height:80px;width:300px;"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>