Highcharts change dataset with select box - Javascript highcharts

Javascript examples for highcharts:Chart Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Data

Description

Highcharts change dataset with select box

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/js/modules/data.js"></script> 
      <select id="classcat"></select> 
      <div id="chartarea"></div> 
      <script type="text/javascript">
var chartarea = document.getElementById("chartarea");
var classcat = document.getElementById("classcat");
dataset = [];/*from ww w . j  ava2  s . co m*/
thechart = [];
var previousInterval;
function opend(listreading){
   var sxmlhttp = new XMLHttpRequest();
   var links = "https://moyjohnsen.github.io/romano/"+classcat.value+".json";
   sxmlhttp.onreadystatechange = function(){
      if (this.readyState == 4 && this.status == 200){
         var listrepeat = JSON.parse(this.responseText);
            for (s = 0; s < listrepeat.classmakeup.length; s++){
               dataset[s] = {
                  pointStart: 0,
                  name: listrepeat.classmakeup[s].classname,
                  data: [listrepeat.classmakeup[s].studentsize]
               }
            }
         var chartoptions = {
            chart: {
               type: 'line',
               events: {
                  load: function(){
                  var update = [];
                     for (t = 0; t < listrepeat.classmakeup.length; t++){
                     update[t] = this.series[t];
                     timer(t);
                     function timer(t){
                        previousInterval= setInterval(function(){
                           update[t].addPoint(listrepeat.classmakeup[t].studentsize);
                        }, 1000);
                     }
                     }
                  }
               }
            },
            series: dataset
         }
         thechart = Highcharts.chart(chartarea, chartoptions);
      }
   }
   sxmlhttp.open("GET", links, true);
   sxmlhttp.send();
}
function opmiddle(listreader){
   classcat.addEventListener('change', function(){
      opend(listreader);
    clearInterval(previousInterval);
  });
  classcat.innerHTML += "<option>--</option>";
  for (i = 0; i < listreader.school.length; i++){
     classcat.innerHTML += "<option>"+listreader.school[i].directory+"</option>";
  }
}
function opstarter(){
var xmlhttp = new XMLHttpRequest();
var url = "https://moyjohnsen.github.io/romano/school.json";
   xmlhttp.onreadystatechange = function(){
      if (this.readyState == 4 && this.status == 200){
         var listread = JSON.parse(this.responseText);
         opmiddle(listread);
      }
   }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
window.onload = function(){
opstarter();
}

      </script>  
   </body>
</html>

Related Tutorials