Preprocess Highchart data using CSV file

Question

I want to preprocess data using CSV file. After the page loaded, ask to browse the CSV file, and then preprocess it to page. I'm using this chart. I would be grateful if you help me get through this. I just know HTML + CSS Basics and don't know how to put this together.

Answer 1

If you have data on desktop you can try the following solutions as a base:

1. Solution with jQuery-csv.js

You can do it with different CSV parsing libraries. To do it add control to the page and add loadFile() function like in the example below:

<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
        var files = event.target.files;
        var reader = new FileReader();
        var name = files[0].name;
        reader.onload = function(e) {
            var data = e.target.result;
            processCSV(data);
        };
        reader.readAsText(files[0]);    
};

function processCSV(data) {
     // 1. Convert CSV text from "data" parameter to JSON
      var arr = $.csv.toArray(data);
     // 2. Prepare chart from "arr" array
};
</script>

2. Solution with Alasql.js

Alternative solution with Alasql.js library (it includes file uploading and CSV-parsing functions):

<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
    alasql('SELECT * FROM FILE(?,{headers:true})', [event],function(data){
         // Process your data
    });
);
</script>

Here:

1. You need to create button in the page to select CSV.
2. Add event function to this button and pass "event" as a parameter (loadFile(event) in the example)
3. Pass this event as parameter to loading function (FILE() or CSV() or XLSX() in the example).
4. Process result data and prepare them for Highcharts.

You can run working snippet with Highcharts below. Before prepare the chart create file demo.csv (by hand) from the end of the snippet and save it to desktop.

(Disclaimer: I am the author of Alasql library)

         function loadFile(event) {
             alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){

               // Process your data here
               var myseries = [];
                Object.keys(data[0]).forEach(function(key){
                    var ds = data.map(function(d){ return +d[key];});
                   myseries.push({name:key,data:ds});
                });

               // Prepare data for Hightcharts.js
                $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: myseries
            });

             
             
             
             
             
             });
         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
     <script src="http://code.highcharts.com/highcharts.js"></script>     

     <p>Select CSV file to read</p>
     <input id="readfile" type="file" onchange="loadFile(event)"/>
     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<h3>Sample file demo.csv</h3>
<pre>
Paris, London
111,211
321,411
512,611
710,811
1121,222
300,422
500,622
700,822
100,222
300,422
511,622
711,811
</pre>

Answer 2

As I understand well, you can use this scenario

1) run website and call upload function

2) save file on your server

3) load csv by $.get() and parse values to create series object

4) initialise chart