Packedbubble; beyond hard-coded data via Next.js

[MT_MANC]

I would like to (re-)generate a packedbubble from regularly updating data in order to move beyond hard-coded data as here https://jsfiddle.net/MT_MANC/x1squnm2/9/
Is it feasible to generate this chart from (regularly-updated) external .CSV data ? eg maybe using separate .CSVs for each Continents' country data. See CSV_Data_By_Contient_C_Crime.ZIP containing data on "C" ( for "C"rime) for: Europe.csv, Africa.csv, Oceania.csv, North America.csv, South America.csv, Asia.csv
NB Country names in above fiddle are replaced in the .CSV data by a suffix eg _g = Germany, _j = Japan etc.
(I am presuming I could use an external lookup file (see attached Cnty_Suffix.CSV) in the .ZIP, to show the Country:Value pair for the tooltip eg "Germany: 76.7". Any pointers/examples of such an external "tooltip lookup" elsewhere ?

I presume the above "live data" packedbubble chart could technically be rendered in React.js or more preferably Next.js (Bubble charts supported yet ?) Any more recent developments/issues with Next.js beyond this recent thread viewtopic.php?t=45105 ? Next.js would appear to be a more efficient partner to HighCharts than React given its server-side rendering page-loading benefits for data-heavy applications (??)

Grateful for any pointers on the above.

CSV_Data_By_Contient_C_Crime.ZIP

(1.79 KiB) Downloaded 25 times

[dominik.c]

Hello MT_MANC!

We appreciate you reaching out to us!

Answering your first question - yes, it should be possible. You could load your data dynamically and update the chart data each time the new data will be loaded. Something like that: https://jsfiddle.net/gh/get/library/pur ... /live-data

If I were you the first thing I would do would be to load the data to the chart and then modify it to my needs.

Regarding Next.js I'm afraid that I don't have any news for you. Here you've got an interesting ticket on our GitHub about bubble chart and Next.js: https://github.com/highcharts/highchart ... /issues/76

If you have any specific questions or problems feel free to reach out to me.
Best regards!

[MT_MANC]

Thanks - some follow-up:

1. Packedbubble Chart Data - are there any concrete examples/fiddles where (seperate) external .CSV files
are used to power charts as most example code uses hard-coded JSON layout data, ie:

Code: Select all

series: [
{name: 'Europe', data: 
                   {name: 'Germany', value: 76.1}, {name: 'Croatia', value: 20.7}, ....  ]},
{name: 'Africa', data: [
                   {name: "Senegal", value: 8.2}, {name: "Cameroon", value: 9.2}, ...	]},
{name: 'Oceania', data: 
                   {name: "Australia", value: 409.4}, {name: "New Zealand", value: 34.1}, ..  ]},
{name: 'North America', data: 
                   {name: "USA", value: 5334.5}, {name: "Canada", value: 566}, ... ]},
]

I'm not sure how to envisage the "axios.get" or "fetch" code for the separate, external Europe.CSV, Africa.CSV, Oceania.CSV, North America.CSV... to replicate the above series:data that has discrete sections for each continent's' country data. (or could even a single .CSV data file be used ?)

2. External Lookup Tooltip - any example fiddles of external files used for country lookup for chart "tooltip" ?
(specialist lookup function needed ?)

3. JS Framework - going forward, some Roadmapping from Highsoft on which frameworks (React.js, Next.js, Svelte...)
are - in general - best-suited to HighCharts/Maps would be really helpful for application development/planning.
(Next.js would seem to be best suited at present - given data-intensity of many charting applications that can delay iniitial client-side render ?)

Most kind

[dominik.c]

Hi again!

1. In this link you've got some nice examples of how CSV files can be loaded to the chart: https://www.highcharts.com/docs/working ... 1619771565

2. Could you explain this functionality more precisely? How should the tooltip work? Should it have any input fields?

3. Regarding the best-suited framework for Highcharts we've got official wrappers for React, Vue, and Angular, so you can pick any of these.

Regarding Next.js the whole process of creating the chart takes place on the client-side. Highcahrts requires a browser environment, we can't send from the server the ready chart. Next could be used here to prepare some options for the chart.

Best regards!

[MT_MANC]

Thanks - some quick response:
1. CSV read - I was interested, if/how the grouped structure of the hard-coded data (ie into separate continental groups) could be replicated via Ajax "Get" procedure - is there a way to replicate the groupings eg maybe using separate "Get" calls to the separate continental .CSV - maybe separated by [] ?

2. Tooltip Detail
The .CSV file structure looks like this:

North America,
C_cr,7.6
C_u,534.5
C_c,56
C_m,46.3

where the countries are identified by the suffixes:

Costa Rica,_cr
US,_u
Mexico,_m
Canada,_c
...

that can be looked up in the "Cnty_Suffix.CSV"

..so the tooltip would need eg for the C_u data packedbubble mouseover to show "C_u 534.6, US" or very similar ie lookup up the "_u" in "Cnty_Suffix" & then append "US" to the standard tooltip. (It would be nice also to be able to additionally lookup the "C" prefix (ie variable description) from the data .CSV as "Crime rate (national sources)" in another file "Var_Prefix.CSV" & append to tooltip also - but not essential)

3. Next.js - thanks for clarification - OK seems React.js is preferable to Next.js framework for Highcharts

[dominik.c]

Hi again!

The easiest way is to load your data from one file. Like in docs example: https://www.highcharts.com/docs/working ... 1619771565

If you want to get your data from multiple files you can load them asynchronously and then work on them like in this example: https://jsfiddle.net/gh/get/library/pur ... mo/compare

Regarding tooltip, these things can be easily achieved by using formatter function. API reference: https://api.highcharts.com/highcharts/tooltip.formatter

Best regards!