Plot heatmap from CSV file [Highcharts]

Question

I made a pollution table which it works perfectly with the series data inside the code. Yet I have no clue of how to make it read the same data from a CSV file without data module. You can see the table here: https://jsfiddle.net/Ruloco/58q60968/7/

Understanding the first column as the date, the second as the name of the station, and the third as the pollution value, I assume this is the format the CSV should have:

0,0,30
0,1,38
0,2,12
0,3,65
0,4,220
0,5,115
0,6,80
0,7,90
0,8,160
0,9,220
0,10,50
1,0,31
1,1,42
1,2,13
1,3,58
1,4,240
1,5,123
1,6,85
1,7,40
1,8,69
1,9,90
1,10,53
2,0,33
2,1,44
2,2,11
2,3,53
2,4,234
2,5,130
2,6,123
2,7,180
2,8,50
2,9,98
2,10,55

I hope you could help me. Thanks in advance!

You can use [Highcharts data module](http://www.highcharts.com/docs/working-with-data/data-module). See example: http://jsfiddle.net/k7pjcy5t/1/ — morganfree, Feb 07 '17 at 11:11
Sorry, I missed that part. Without the data module, you need to parse the csv file on your own - see [example](https://jsfiddle.net/58q60968/8/) — morganfree, Feb 07 '17 at 12:23
@morganfree how can I do that without putting the series values inside the HTML? If I'm not wrong, you putted the values in the HTML part. I just want to read the values from an external CSV file — Rulo, Feb 07 '17 at 16:29
Then you need to have a server which give you a response with the csv file. More insight on the topic can be found [here](http://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript). When you have a proper response, you can initialise the chart similar as in this example http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/ but for a heatmap series — morganfree, Feb 08 '17 at 11:20

score 0 · Answer 1 · 2017-02-06T16:24:09.700

Look at this JQuery plugin, basically it converts CSV files to javascript arrays: https://github.com/evanplaice/jquery-csv/

Once you have installed that you should be able to do

var result = $.csv.toArrays(csvInput);

with the CSV in the format you gave.

This snippet actually does exactly what you want I think.

var csv = $('textarea').val()
var result = $.csv.toArrays(csv)
console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

<textarea>
0,0,30
0,1,38
0,2,12
0,3,65
0,4,220
0,5,115
0,6,80
0,7,90
0,8,160
0,9,220
0,10,50
1,0,31
1,1,42
1,2,13
1,3,58
1,4,240
1,5,123
1,6,85
1,7,40
1,8,69
1,9,90
1,10,53
2,0,33
2,1,44
2,2,11
2,3,53
2,4,234
2,5,130
2,6,123
2,7,180
2,8,50
2,9,98
2,10,55
</textarea>

Plot heatmap from CSV file [Highcharts]

1 Answers1