Drop down menu disappears after the chart is created

My intention is to develop a pie chart from a csv file. The perspectives are the headers. My code takes the csv file. The headers are to be stored as options in the drop down menu. When a drop down menu item is selected a visualisation of the selected perspective is to be shown. A sample of the csv file is as follows:

,org_title,role_title,continent,country,updated_at_date
1,Startup,Founder,Oceania,Australia,27/06/2016
2,SME,C-Level / Owner,Oceania,Australia,27/06/2016
3,School / University,Student,Oceania,Australia,27/06/2016
4,School / University,Student,South America,Brazil,27/06/2016
5,Government Department,other,Asia,Philippines,28/06/2016
6,other,other,Asia,Singapore,27/06/2016
7,Non Profit Organisation,other,Asia,Malaysia,27/06/2016
8,Non Profit Organisation,other,Asia,Mongolia,27/06/2016

My code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <input type="file" id="file" name="file"/>
    <div id='container'/>
    <select id='options'/>
    <script>

$('#options').change(function () {
var v =this.value;
var res=[];
Object.keys(CSVARRAY[v]).forEach(function(k) {
res.push({'name':k,'y':CSVARRAY[v][k]});
});
console.log(JSON.stringify(res));

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        data: res
    }]
});

});

 //Selecting file and converting it to tabular form
      var file = document.getElementById('file');
    var CSVARRAY;
      file.addEventListener('change', function() {
          var reader = new FileReader();
          var f = file.files[0];
           reader.onload = function(e) {
              CSVARRAY = parseResult(e.target.result); //this is where the csv array will be
          };
          reader.readAsText(f);
      });


    function parseResult(result) {

          var res = result.split("\n");
          var headers = res[0].split(',');
          headers.shift();
          res.shift();
          var d = {};
        var prev={};
          headers.forEach(function(h) {
                d[h] = {};  
                prev[h] = [];       
             });

          res.forEach(function(row) {
               var i=0;
              var r = row.split(",");
                r.shift();

                r.forEach(function(cell) {
                    if (cell !== prev[headers[i]])
                    {
                       d[headers[i]][cell]=[];
                        d[headers[i]][cell]=[];
                  d[headers[i]][cell]=1;
                    }
                    else
                    {
                    d[headers[i]][cell]+=1;
                     }
                     prev[headers[i]]=cell;
                    i += 1;
              }); 

          });
          //return resultArray;
             var options = $("#options");
headers.forEach(function(h) {
    options.append($("<option />").val(h).text(h));

});
    return d;
      }
    </script>
    </body>
</html>

It is almost correct. However, the drop down menu dissappears after I click on any item.

Answers 1

  • The reason is actually because your div with the id "container" is not closed correctly. This means that the browser is interpreting that the select tag is actually within the container div. The same container div which is being overwritten with your chart.

    If you change the following from:

    <div id='container'/>
    // javascript references are here
    <select id='options'/>
    

    To:

    <input type="file" id="file" name="file"/>
    <div id='container'>
    
    </div>
    // javascript references are here
    <select id='options'/>
    

    On an aside, your JavaScript code is very hard to follow, mostly because there is a lot of strange indenting going on. Take a look at airBnB's JavaScript style guide for information on making your code easier for others to read.


Related Articles