0

I want to load data from an external CSV-file to a Highcharts sankey diagram. After trying several options, I am not sure if this is even possible, as the result is always an empty chart? The CSV-file will be on the same server in the final version.

As a simple case, see the fiddle https://jsfiddle.net/oy095kzb/ which is merely copy/paste from the official Highcharts sankey example (where data is included in the code), except that data-module is loaded and csvURL is used instead:

series: [{
    keys: ['from', 'to', 'weight'],
    data: {
            csvURL:'https://www.test.basleratlas.ch/sankey_test.csv'
        },
    type: 'sankey',
    name: 'Sankey demo series'
}]

CSV-file-structure:

'from', 'to', 'weight'
'Brazil', 'Portugal', 5
'Brazil', 'France', 1
'Brazil', 'Spain', 1
'Brazil', 'England', 1
'Canada', 'Portugal', 1
...
Björn
  • 3
  • 2

1 Answers1

0

Notice that the data.csvURL feature is using to fetch the data from the CSV which is stored on the server, like this link: https://demo-live-data.highcharts.com/vs-load.csv, meanwhile it seems that your link downloading the CSV file. Next notice that your CSV file doesn't have defined column names.

EDIT

Notice that the data object should be defined outside the series object config.

Also, I used the complete callback to parse the data into the proper format.

Demo: https://jsfiddle.net/BlackLabel/qLu37548/

API: https://api.highcharts.com/highcharts/data.complete

Sebastian Wędzel
  • 11,417
  • 1
  • 6
  • 16
  • Thank you. Added a header row and file is shown in browser now, but still no chart content showing up. – Björn Mar 25 '21 at 11:02
  • Thanks a lot for your help, @Sebastian. Rearranging the columns using `data.complete` was the missing part. – Björn Apr 09 '21 at 13:50