Plottng Identical Map (new data) in 2nd Tab-<DIV> issues

[MT_MANC]

Can you help ?
I am trying to extend a single Tab HC map plot (using external .CSV data) to add a second Tab/Map. See my attempt:
http://www.jcsweb.biz/mef/client/wd_sce ... c_F_01.htm
I want to replicate the Tab1 map but using distinct external CSV data source for map-plot
ie using "*_Maps2.CSV" instead of "*_Maps1.CSV" in Tab1 on line 166-167 (NB *_Map2.CSV data already on server)

My attempt - I copied the <div id "tab-Maps1"> code to the new <div id "tab-Maps2"> & replaced all HC coding references from "*Map1" to **Map2". But I am unsure how to deal with the Tab1 <div id="wrapper"> div - I first tried making this unique to each Tab eg <div id="wrapperMaps1"> and <div id="wrapperMaps2"> but to no success => the Tab1 map + chart then got "split" over both Tabs !! I haven't displayed my attempted amended code as it got quite confusing/dirty - thought it better to show the progress I made BEFORE this point as it should be clearer to tweak/copy.
Any suggestions as to how to successfully replicate the Tab1 map code in Tab2 (but using different data CSV source) would be much appreciated.

[rafalS]

Hi, MT_MANC!

I can see that you define first and second chart here: screens below

Now you want to display the third chart. To do that, you have to define your third chart the same way you defined previous charts.

For the future - please try to simplify your questions and code. You can map your problem (without any redundant code) onto jsFiddle - it will be really easier and faster to find a good solution for you

Best regards!
Rafal

[MT_MANC]

Thanks for response - I wonder if you could be a bit more specific in what's required ? (or if you have any pre-cooked example of the these specific Maps existing in seperate tabs ? - I can then work from this template ) My question was really about exactly which <div> and HighMaps/Charts element names in the code need to be UNIQUE in each tab as I spent a lot of time trying different permutations to no success (see below) I appreciate the Chart names must be unqiue but what other code too ?

jsfiddle - Apologies, I am new to jsFiddle - see my attempt to convert the previous webpage
http://www.jcsweb.biz/mef/client/wd_sce ... c_F_01.htm
here: http://jsfiddle.net/MT_MANC/uqp0rLkw/3/ but the Tabs don't seem to display in jsfiddle (?)

My attempts: FYI - here are my subsequent, unsuccessful webpage attempts:
NB Tab1= <div id="tab-Maps1"> Tab2= <div id="tab-Maps2">

http://www.jcsweb.biz/mef/client/wd_sce ... _F_01a.htm
- making "tab-Maps1" code more specific (adding "Tabs1" to end of most code elements). "tab-Maps2" still empty
=> No charts/maps display at all !!

http://www.jcsweb.biz/mef/client/wd_sce ... _F_02b.htm
- replicating "tab-Maps1" code in the second tab "tab-Maps2" & converting all "*Maps1" elements to "*Maps2"
- split <div id="wrapper"> into seperate <div id="wrapperMaps1"> and <div id="wrapperMaps2">
=> Tab1 Map displays in Tab2 + both Tabs seem to display a Country side-chart; Maps seem to spill-over across the Tabs !
- this perhaps looks the most promising if the code can be corrected further ?

To summarise - I am not entirely sure which elements <div> or HighCharts/Maps code needs to be "tab-specific" & which doesnt - so a tabbed working example that I could edit may be the answer if available ? Thanks again

[rafalS]

MT_MANC,

I understand that you have such a messy code because you are probably assembling many components, and there is nothing we can do about it. But it would be really easier to help with your issues if your posts were shorter, simply written and without any redundant naming. Please, try not to use naming and variables from your website and confusing expressions in your posts. The faster we understand your problem and what are you trying to achieve, the faster we are able to help you

I am not sure if I understood you well, but I think that you are trying to create tabs that swap your charts. It is enough to create divs with ID and connect charts to those divs. For example, you need to create div with id="container1" and connect chart settings to container1:

Code: Select all

<div id="container1"></div>

Highcharts.chart('container1', {

   CHARTS OPTIONS

});

You can look at a simple example I made: https://jsfiddle.net/BlackLabel/05du79cb/

Rafał

[MT_MANC]

Apologies for my previous communication - maybe I can try to restate, more simply:

I have an existing "Rich Info" style map plot (using external .CSV data) in Tab 1 of: http://www.jcsweb.biz/mef/client/wd_sce ... c_F_01.htm
I want to replicate the Tab1 map-plot in Tab2 but running off different external .CSV data. So once completed I will have:
Tab1 = MapPlot1 + CountryChart1 (from external .CSV data files)
Tab2 = MapPlot2 + CountryChart2 (from DIFFERENT external .CSV data files)
ie something similar in appearance to your "tabbed" HighMaps demo: https://www.highcharts.com/maps/demo/rich-info My attempt was: http://www.jcsweb.biz/mef/client/wd_sce ... _F_02b.htm
..I think this just needs some clarification of distinct <div> & code elements between Tab1 & Tab2 as there seems to be some "contamination".

My posted code is as simplied as it can be without loosing context/meaning; it is not simply lifted from a website. I do appreciate how difficult your jobs are & how exacting (technical) communication can be - we don't thank you enough for your amazing work & patience !

[rafalS]

It's ok, now I know what you are trying to achieve but still, it's hard to find a solution without an access to your code.

I can see that you have 2 different charts with id containerGVMaps1 and containerGVMaps2 assigned to the same variable var mapChart. Can you change the name of your second variable like this?:

Don't change this 152 line:

Code: Select all

var mapChart = Highcharts.mapChart('containerGVMaps1', {

But change name of this variable in line 281:

Code: Select all

var mapChart2 = Highcharts.mapChart('containerGVMaps2', {

Let me know if that worked. If not, could you give me an access to your project or send me your files?

Rafał

[MT_MANC]

Appreciate your efforts - some more feedback/testing:
NB Original Code Errors(non-fatal ?):
NB http://www.jcsweb.biz/mef/client/wd_sce ... _F_02b.htm had some (non-fatal) errors:
Error: Highcharts error #16: http://www.highcharts.com/errors/16 highcharts.js:10:49
Unexpected value -Infinity parsing x attribute. highcharts.js:82:3
=> Original Code Issues:
NB1 Tab1 Map plot is not rendering
NB2 when you click on a Country in Tab2 Map it actually displays in Tab1 Country Chart (ie Tab "bleed-over")

I made your suggested changes :
281 - var mapChart => mapChart2 in:
http://www.jcsweb.biz/mef/client/wd_sce ... _F_02c.htm
..but it produced a new error in Firefox (but not in Edge or Chrome):
TypeError: countryChartMaps2.series is undefined[Learn More] Source_2tab_2map_01b_01c_F_02c.htm :261:1
=> Changed Code Issues:
NB3 Tab2 Map plot is not rendering
NB4 when you click on a Country in Tab1 Map it actually displays in Tab2 Country Chart (Tab "bleed-over")
I then, tried to make the .CSV data plotted in each Tab completely distinct to eliminate this possible cause of "Tab "bleed-over"":
http://www.jcsweb.biz/mef/client/wd_sce ... _F_02d.htm
NB5 this didnt sort out any problems + now the DD select in Tab1 produces the Tab2 Map titles !! (more bleed-over !)
NB6 Interestingly if I change line 152 "var mapChart =" to "var mapChart1 =" no Maps/Charts appear in either TAB ?!

It seems there is significant structural "bleed-over" (and Highcharts 16 error) when attempting to replicate a similar HighMap in a second Tab. I suspect this maybe an issue for HighMaps ?
Some thoughts:
Do not ALL "var" terms in Tab2 need renaming with "2" suffix to make them unique from Tab1 equivalents ?
eg
-- TAB1 vars
71 - var csvCodes, categories = [],countryChartMaps1 = null,data = [],countriesArray = [],countries = {},
115 - var points = mapChart.getSelectedPoints();
152 - var mapChart = Highcharts.mapChart('containerGVMaps1', {
-- TAB2 vars
200 - var csvCodes, categories = [],countryChartMaps2 = null,data = [],countriesArray = [],countries = {},
244 - var points = mapChart.getSelectedPoints();
281 - var mapChart2 = Highcharts.mapChart('containerGVMaps2', {

NB7 - I have already renamed "countryChartMaps?" as tab-specific
How crucial is the "Highcharts error #16" ??

Attached code:

Code: Select all

www.jcsweb.biz/mef/client/wd_scen_lev/Source_2tab_2map_01b_01c_F_02_various.zip

[rafalS]

MT_MANC,

I have to apologize, but I have spent a lot of time solving your problem and I have not found the reason, why your project is not working properly. Your problem does not apply to our product (Highcharts), but your own custom code, which is not clean and badly written/generated.

I showed you the sample code with a few charts that you can switch on tabs. If you need someone to write your project from scratch, please contact the Black Label company that specializes in Highcharts and Highmaps libraries. With all respect, but it is not in the scope of our duties to debug your custom code on this forum.

https://www.blacklabel.pl/

Kind regards,
Rafał