Highcharts DemoII

by bhupendra negi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id = "selApp">
  <select id = "drpApp">
      <option value="care" selected>Dsx Client Care </option>
      <option value="univ">3Dx University </option>
      <option value="order">Dsx Client Order </option>
      </select> 
</div>   

<div id = "selYear">
    <label for="drpYear"> Select Year: </label>   
  <select id = "drpYear" name = "drpYear">
      <option value="2010" selected>2010 </option>
      <option value="2015">2014</option>
      <option value="2014">2015</option>
      </select> 
</div>  


<div id = "rangeSel">
<input type="radio" name="chart1" value="d" data-value="Daily" checked >Daily
<input type="radio" name="chart1" value="w" data-value="Weekly" >Weekly
<input type="radio" name="chart1" value="m" data-value="Monthly" >Monthly
<input type="radio" name="chart1" value="om" data-value="Objectives  Monthly">Objectives  Monthly  
<input type="radio" name="chart1" value="y" data-value="Yearly">Yearly      
 </div>    

<div id="container" style="height: 400px"></div>

CSS

#rangeSel{
    margin:20px ;   

}
div#selYear {
 
 
}
div#selApp {
float:left;    
 margin-right: 50px;      
}

JavaScript

$(function () {
    
  //load graph also on click of app
    
    $("#drpApp").on("change",function(e){
    loadGraph();
    });
    
    
   //using delegate to attach on change radio event to    
    $("#rangeSel").on("change","input:radio",function(e) {  
   console.log(e.target.value);
   loadGraph();    
    });
    
     loadGraph(); 
});


// function load graph here

function loadGraph() 
{
    var selapp =  $("#drpApp").val();
    var selrange = $("input[name=chart1]:checked").val();
    
    var grphtitle = $("#drpApp option:selected").text();
    var grphtxt = $("input[name=chart1]:checked").attr("data-value");
    console.log(grphtxt);
    
    var graphData;
    
    
    // below data would come from mysql db
    // table structure would be like as below arrays
    // 5 tables (daily,weekly,monthly,objective monthly,yearly) for one app 
    var cared = [
                ["10-5-2014", 29.9],
                ["11-10-2014", 51.5],
                ["12-12-2014", 16.4]
            ]
    

    
    var carew = [
                ["week 10", 10],
                ["week 23", 20.5],
                ["week 40", 86.4]
            ]
    
    var carem = [
                ["Jan", 5],
                ["Feb", 60.5],
                ["Dec", 16.4]
               ]
    
    var careom = [
                ["Jan", 15],
                ["Feb", 20.5],
                ["Dec", 1.4]
               ]
    
   var carey = [
                ["2010", 15],
                ["2014", 20.5],
                ["2015", 1.4]
               ]
    
    //selecting appropiate data based on selection
    
  
    switch(selapp)
    {
        case "care" : switch (selrange) { case 'd': graphData = cared;break;
                                          case 'w': graphData = carew;break;
                                          case 'm': graphData = carem;break;
                                          case 'om': graphData = careom;break;
                                          case...