ハイチャートグラフを表示するにはHTMLのselectタグに依存する

Question

ハイチャートグラフの表示を指定するには、HTMLでselectの値を使用するにはどうすればよいですか？
たとえば、Yesterday's graphを表示する場合は、HTMLページの選択フォームでYesterdayを選択します。 March's graphを表示したいのと同じです。Marchで選択します。各グラフについて、HTMLとは別に外部JSがあります。 （1つのJS 1つのグラフ用ファイル）を

HTMLを選択

<select class="selectpicker" data-width="15%" data-style="btn-danger"> 
 
    <option id="yesterday" value="yesterday">Yesterday</option> 
 
    <option id="pre_month_1" value="pre_month_1">March</option> 
 
    <option id="pre_month_2" value="pre_month_2">Febuary</option> 
 
    <option id="pre_month_3" value="pre_month_3">January</option> 
 
</select> 
 

 
<div id="graph_power_yesterday" style="height: 400px;"></div> 
 
<div id="graph_power_march" style="height: 400px;"></div>

まずJSファイル（最初のグラフ）

$(document).ready(function(){ 
 
    function read(){ 
 
    $.post("graph_power_yesterday.php", 
 
     function(data, status){ 
 
     if(status == 'success'){ 
 
      cur_date = (data.cur_date.join(',')); 
 
      pow_dat_1hr_00 = Number(data.pow_dat_1hr_00.join(',')); 
 
      graph_power_yesterday(cur_date, pow_dat_1hr_00); 
 
     } 
 
    }); 
 
}; 
 

 
read(); 
 

 
function graph_power_yesterday(cur_date, pow_dat_1hr_00){ 
 
    Highcharts.chart('graph_power_yesterday', { 
 
     // ==== 
 
    }); 
 
    }; 
 
});

第二のjsファイル（2番目のグラフ）

$(document).ready(function(){ 
 
    function read(){ 
 
    $.post("graph_power_march.php", 
 
     function(data, status){ 
 
     if(status == 'success'){ 
 
      cur_date = (data.cur_date.join(',')); 
 
      pow_dat_1hr_00 = Number(data.pow_dat_1hr_00.join(',')); 
 
      graph_power_march(cur_date, pow_dat_1hr_00); 
 
     } 
 
    }); 
 
}; 
 

 
read(); 
 

 
function graph_power_march(cur_date, pow_dat_1hr_00){ 
 
    Highcharts.chart('graph_power_march', { 
 
     // ==== 
 
    }); 
 
    }; 
 
});

Answer 1

が作業フィドルを確認してください。

fiddle。

<script src="http://code.highcharts.com/highcharts.js"></script> 
<p align="left"> 
    <select id="chartType"> 
    <option value="0">-select chart type-</option> 
    <option value="line">line</option> 
    <option value="column">column</option> 
</select> 
</p> 
<pre> 

</pre> 


     <script> 
      $(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      title: 'please select a category' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//here we have a common timeline (dates) 
     } 
    }); 

    $(".test").change(function() { 
     var value = $(this).find(":selected").val(); 
     while (chart.series.length > 0) { 
      chart.series[0].remove(true); 
     } 
     alert(value); 
     if (value == 'a') { 
      chart.yAxis[0].setTitle({ text: "#Active Learners" }); 
      chart.setTitle({text: "Active Learners"}); 
      chart.addSeries({ 
       name: '#Active Leaners', 
       type: 'column', 
       color: '#43cd80', 
       data:[100, 200, 300, 400, 100, 200, 100,200,300,100,400,100]//no. of active learners   
      });  

     } else if (value == 'b') { 
      chart.addSeries({ 
       name: 'grade1', 
       type: 'column', 
       color: '#7FCDBB', 
       data:[100, 280, 300, 490, 670, 900,100,200,300,400,500,100]    
      }); 
      chart.addSeries({ 
       name: 'grade2', 
       type: 'column', 
       color: '#41B6C4', 
       data:[100, 200, 300, 400, 100, 200,900,800,300,500,200,100]    
      });      
      chart.addSeries({ 
       name: 'grade3', 
       type: 'column', 
       color: '#1D91C0', 
       data:[234,578,234,895,234,54,214,234,474,214,123,235]    
      }); 
      chart.addSeries({ 
       name: 'grade4', 
       type: 'column', 
       color: '#253494', 
       data:[343,132,467,124,214,55,73,546,435,23,56,746]    
      });    
      chart.yAxis[0].setTitle({ text: "#Learners" }); 
      chart.setTitle({ text: "Learners per grade" }); 
     } else if (value == 'c') { 
      chart.addSeries({ 
       name: 'age group 1', 
       type: 'column', 
       color: '#FCC5C0', 
       data:[450, 770, 540, 110, 340, 870,200,500,300,600,100]    
      }); 
      chart.addSeries({ 
       name: 'age group 2', 
       type: 'column', 
       color: '#F768A1', 
       data:[563,234,675,567,234,834,341,415,300,200,100,200,400] 
      }); 
      chart.addSeries({ 
       name: 'age group 3', 
       type: 'column', 
       color: '#AE017E', 
       data:[100,200,300,400,500,100,200,300,400,500] 
      }); 
      chart.addSeries({ 
       name: 'age group 4', 
       type: 'column', 
       color: '#49006A', 
       data:[400,300,200,400,200,300,500,600,100,600,700] 
      }); 
     } else { 
       chart.addSeries({ 
       name: 'total number of learners', 
       type: 'column', 
       color: '#ffcc99', 
       data:[100,0,200,0,300,100,400,100,500,200,500,300]    
      }); 
     } 
    }); 
}); 
    </script> 

希望します。 ありがとう