Tredekka
Posts: 6
Joined: Wed Aug 17, 2022 2:18 pm

Highcharts (specifically mapChart) how do I load using csvURL in data?

Highcharts (specifically mapChart) how do I load from csv?

I started with the basic example: https://jsfiddle.net/gh/get/library/pur ... color-axis

... which is based on .getJSON() & modified it to match similar chart or stockChart working examples I have with csv...

For instance, I tried this simple replacement:

Code: Select all

series: [{
    //... demo code ...

    //data: data,

    data: {
        csvURL: 'http://localhost/testData.csv',
        enablePolling: false
    },

    //... demo code ...

... which works for other chart types (line, bar, etc.) but doesn't work for mapChart?

For reference, testData.csv, contains the following:

Code: Select all

code,value,label
ND,13,42
SD,42,69

I've looked in the documentation, but can't find any special "callout" for mapChart, stating this functionality doesn't work for mapChart:

https://api.highcharts.com/highcharts/data.csvURL

I want to use data.csvURL because then it matches all my other code flows for the other types of charts.

Any help would be greatly appreciated.
Tredekka
Posts: 6
Joined: Wed Aug 17, 2022 2:18 pm

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

When I try, I get the following error:

highmaps.src.js:54109:20 === Uncaught (in promise) TypeError: c.forEach is not a function

Image
Tredekka
Posts: 6
Joined: Wed Aug 17, 2022 2:18 pm

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

Note: just for ease of reference, here's the mapChart API link:

https://api.highcharts.com/highmaps/data.csvURL

... showing no difference to the 'chart' one. :-( Also, I updated the CSV to the following:

Code: Select all

"code","value","label"
"ND",13,"Thirteen"
"SD",42,"FortyTwo"

... but it didn't make any difference. :-(
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

Hello Tredekka!
We appreciate you reaching out to us!

I have prepared a demo for you with taking data from the HTML element because I don't have any API to get this data in CSV format. You should use a seriesMapping property to determine a dictionary of how values from CSV should be assigned to the proper property. As you can see in the demo below everything is working correctly.

Demo: https://jsfiddle.net/BlackLabel/9pyocbk7/
API Reference: https://api.highcharts.com/highcharts/d ... iesMapping

If you will still have problems, please recreate them in some online editor that I could work on, you can use my demo from this post.
Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Tredekka
Posts: 6
Joined: Wed Aug 17, 2022 2:18 pm

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

First, thanks Hubert for sending me the demo; I was able to successfully integrate that & I'll be able to move forward on what I'm working on. :)

That being said, I would either:

1) like to know why I can't use [series][data][csvURL] with mapChart (but I can with others, per the example listed).?.?
2) should I just give up on that, & that it just simply won't work that way.?. if this is the case, then you need to update the mapChart API link: ... because it would seem to imply this works & it's the preferred method.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

Tredekka,
I have just checked and data.csvURL is also working. Here is a working example: https://jsfiddle.net/BlackLabel/vbfn95to/ I used Google Spreadsheets to host a CSV file and use its URL in chart configuration.

Maybe you have some errors in your file? If you want you can send me a demo with your link and I will try to find a solution.

Kind regards!
Hubert Kozik
Highcharts Developer
Tredekka
Posts: 6
Joined: Wed Aug 17, 2022 2:18 pm

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

@Hubert ... yes, it's working in the manner you described:

Code: Select all

  Highcharts.mapChart('container', {

    chart: {
      map: topology,
      borderWidth: 1
    },

    data: {
      //csv: document.getElementById('csv').innerHTML,
			csvURL: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSfUi6XdFDHIV_Tvl2CrCtaI38GK1m9WRmlAzSXmsY1HlZJHPxXwSrPMI663vGlkd69eqD4wCJUDGr_/pub?gid=553213188&single=true&output=csv',
      seriesMapping: [{
        code: 0,
        value: 1,
        label: 2
      }]
    },
However, when you try to implement in the manner described by the documentation:

https://api.highcharts.com/highcharts/data.csvURL

... which links to this example:

https://jsfiddle.net/gh/get/library/pur ... color-axis

... aka:

Code: Select all

                series: [{
                    accessibility: {
                        point: {
                            valueDescriptionFormat: '{xDescription}, {point.value} people per square kilometer.'
                        }
                    },
                    animation: {
                        duration: 1000
                    },
                    //data: data,
                    //data: jsonCSVData,
                    data: {
                        csvURL: 'http://localhost/testData.csv',
                        enablePolling: false,
                        seriesMapping: [{
                            code: 0,
                            value: 1,
                            label: 2
                        }]
                    },
                    joinBy: ['postal-code', 'code'],
                    dataLabels: {
                        enabled: true,
                        color: '#FFFFFF',
                        format: '{point.code}'
                    },
                    name: 'Population density',
                    tooltip: {
                        pointFormat: '{point.code}: {point.value}/km²'
                    }
                }]
... it doesn't work & gives the aforementioned error.?.?

Code: Select all

highmaps.src.js:54109:20 === Uncaught (in promise) TypeError: c.forEach is not a function
... you mentioned uploading my code, my code matches your example here:

https://jsfiddle.net/gh/get/library/pur ... color-axis

... so you could mod that one & mod the

Code: Select all

data
section to include

Code: Select all

csvURL
... but as I've shown in this post, it still returns the same error.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts (specifically mapChart) how do I load using csvURL in data?

Tredekka,
Oh, now I understand what you mean. The problem relies on the same name of properties. This property: https://api.highcharts.com/highmaps/data.csvURL data.csvURL is not the same property as series.data (https://api.highcharts.com/highmaps/ser ... point.data) They are other objects with different action and another responsibilities, so you can't use a csvURL property inside series.data. That's why the error is showing up in the console. The only way to use csv files is to use them in data property, not series.data.

I hope it's clear now :)
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”