Highchart demo

HTML

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

<div id = "selApp">
  <select id = "drpApp">
      <option value="g1" selected>Application 1 </option>
      <option value="g2">Application 2 </option>
         </select> 
</div> 


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

JavaScript

$(function () {
    
  //load graph also on click of app
    
    $("#drpApp").on("change",function(e){
    loadGraph();
    });
     
     
     loadGraph(); 
});

function loadGraph()
{
 var g1curve1 = [],g1curve2 = [], g1curve3 = [] ,g1curve4 = [];
 var g2curve1 = [],g2curve2 = [],g2curve3 = [],g2curve4 = [];
 
 // for series data week
  var data1,data2,data3,data4;  
    
  
 //preparing dummy data
  for(i=1;i<=5;i++)
  { var tempArr = [] , tempArr1 = [] , tempArr2 = [] ,tempArr3 =[];
    var tempArr4 = [] , tempArr5 = [] , tempArr6 = [] ,tempArr7 =[];
    tempArr[0] = "week"+i;
    tempArr1[0] = "week"+i;
    tempArr2[0] = "week"+i;
    tempArr3[0] = "week"+i;
    tempArr4[0] = "week"+i;
    tempArr5[0] = "week"+i;
    tempArr6[0] = "week"+i;
    tempArr7[0] = "week"+i;
    tempArr[1] = Math.random()*11.2; 
    tempArr1[1] = Math.random()*180;  
    tempArr2[1] = Math.random()*550;  
    tempArr3[1] = Math.random()*300;
    tempArr4[1] = Math.random()*10; 
    tempArr5[1] = Math.random()*450;  
    tempArr6[1] = Math.random()*950;  
    tempArr7[1] = Math.random()*1500;
    g1curve1.push(tempArr);
    g1curve2.push(tempArr1);
    g1curve3.push(tempArr2);
    g1curve4.push(tempArr3);
    g2curve1.push(tempArr4);
    g2curve2.push(tempArr5);
    g2curve3.push(tempArr6);
    g2curve4.push(tempArr7);
     
  }
 
    
 // get selected drp application name ;
 var appName = $("#drpApp").val();   
 var grpahTitle = $("#drpApp option:selected").text();   
  
 if (appName == "g1") { data1 = g1curve1,data2=g1curve2;data3 =g1curve3;data4 = g1curve4 }
 else { data1 = g2curve1,data2=g2curve2,data3=g2curve3,data4=g2curve4;}
    
       console.log(data1);
    console.log(data2);
    
 //draw chart 
    
  $('#container').highcharts({
          chart: {
            zoomType: 'x'
        },
        plotOptions: {
            series: {
                pointStart:25,
                pointInterval:1,
            }
        },
        xAxis: {
            labels: {
              ...