It is currently Mon May 28, 2018 3:25 am Advanced search

Dynamic Map render-new .CSV datasource chosen in DD

Technical support, bug reports and more.

Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Thu Dec 28, 2017 2:47 am

Functionality Query - Does Highmaps have the capacity to switch to an alternative (.CSV) data source chosen from a dropdown menu located on the canvas - and then dynamically replot the map from the newly selected .CSV ?
Are there any Highmaps examples that I can try to work from & customise ?

I would ideally like to add a dropdown to this Highmap type (but plotting from CSV file) in order to dynamically render the map from different .CSV datasets chosen in a dropdown (to be added).
https://www.highcharts.com/maps/demo/rich-info
Any suggestions ?
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Fri Dec 29, 2017 6:24 pm

Hi MT_MANC,

Highmaps does not have such built-in functionality, but you can easily create it. All you need to do is create a dropdown menu in DOM and update series with new data after selecting one of the options. In more complex cases, instead of series update, you can call function which will create a chart again.
It will be best if you try create this kind of chart and if there will be any problems I will help you on the already started chart.

HTML:
Code: Select all
<select id="select">
  <option value="map1">map1</option>
  <option value="map2">map2</option>
</select>

JS:
Code: Select all
$("#select").change(function() {
  let value = $(this).val();
  if (value === 'map1') {
    series.update({
      data: data1,
      mapData: mapData1,
    })
  } else if (value === 'map2') {
    series.update({
      data: data2,
      mapData: mapData2,
    })
  }
})


API Reference: https://api.highcharts.com/class-refere ... ies#update

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Sat Dec 30, 2017 2:03 pm

Pawel - many thanks. I have made some progress on this but not yet fully working. Could you advise ?

I have an existing Map plot which runs off a single .CSV datafile via a $.get statement;
http://www.jcsweb.biz/mef/AnimGIF/Map_GIFthumb_DD01d.htm
I can successfuly manually switch to a different data source by changing/commenting the $.get in lines 60/61 + accompanying title, subtitle - lines 121,123 ( + 93 ? )
NB My .CSV data files are in a slightly different format to the ones in the original HighMaps demo:
https://www.highcharts.com/maps/demo/rich-info Only the var names in first row have speech marks, but not the subsequent data itself.
NB2 The above code will ONLY seem to accept var name prefixes in the .CSV datafile that are 2 digits in length (eg "GB" is OK but "GDP" is not) whereas I need the map to plot ANY length of variable name in the .CSV. (I tried changing the ".length" code but to no success)

When the DD selection changes, I would ideally like all the following to update:
- CSV data file source for map
- title:
- subtitle:
The original/updated datafile will be a new .CSV
eg1 http://www.jcsweb.biz/mef/MapData/GV_TEMP_GB.csv
eg2 http://www.jcsweb.biz/mef/MapData/GV_TEMP_UR.csv
eg3 http://www.jcsweb.biz/mef/MapData/GV_TEMP_GDP.csv
with the original/updated title|subtitle1|subtitle2 reading from a seperate .CSV
eg1 http://www.jcsweb.biz/mef/MapData_Key/GV_TEMP_GB_Key.csv
eg2 http://www.jcsweb.biz/mef/MapData_Key/GV_TEMP_UR_Key.csv
eg3 http://www.jcsweb.biz/mef/MapData_Key/GV_TEMP_GDP_Key.csv

So I have tried to incorporate your suggested code in a variant with DD select:
http://www.jcsweb.biz/mef/AnimGIF/Map_GIFthumb_DD01e.htm
The plot showing is still from the original $.get (line 88/89); to overwrite this I wasn't sure if I needed to add an "onchange" handler to initiate your js function or if this is implicit in the code ? And I wasn't entirely sure of the distinction between "data" & "mapData" in the function/code ?. So your update function is not yet operational; perhaps you could advise on how to initiate it to achieve the above Map updates when the DD selection is changed ?
Most kind

(PS it would be nice, but not essential, if the map/data plot took up the WHOLE page as a little cramped to the left on canvas - my attempt to do this caused the data chart to jump beneath the Map-plot !)
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Wed Jan 03, 2018 6:20 pm

Hi MT_MANC,

I created live example on jsfiddle by using your code, now it will be easier to edit and discuss. I used: https://cors.io/ service to access data from your source. Several changes were needed in the code.
For the correct operation of select drilldown, it is necessary to call every time getData function, because data must be converted every time.

Code: Select all
$("#select").change(function() {
  let value = $(this).val();
  if (value === 'map1') {
    getData('GV_TEMP_GB.csv', 'GV_TEMP_GB_Key.csv')
  } else if (value === 'map2') {
    getData('GV_TEMP_UR.csv', 'GV_TEMP_UR_Key.csv')
  } else if (value === 'map3') {
    getData('GV_TEMP_GDP.csv', 'GV_TEMP_GDP_Key.csv')
  }
})


Function:
Code: Select all
function getData(name, name2) {
  $.get('https://cors.io/?http://www.jcsweb.biz/mef/MapData/' + name, function(csv) {...}
}


I did not create the functionality of changing the title and subtitle, because the links you provided do not work. You only need to use get method, convert data and update chart with new title.

Code: Select all
  $.get('https://cors.io/?http://www.jcsweb.biz/mef/MapData_Key/' + name2, function(){...})


To accept 3 digits in CSV I added the suitable condition in line 36:

Code: Select all
  if (code.substring(2) === suff[0] || code.substring(3) === suff[0]) {...}


To change sizes of charts you can use chart.height and chart.width properties.


Live demo: http://jsfiddle.net/ppotaczek/9pxwccsf/

API Reference:
https://api.highcharts.com/class-refere ... art#update
https://api.highcharts.com/highmaps/chart.height
https://api.highcharts.com/highmaps/chart.width

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Mon Jan 29, 2018 12:20 pm

Pawel - apologies for delayed response, Thank you again. I have taken your fiddle code & incorporated in the current working version located at:
http://www.jcsweb.biz/mef/client/wd_scen_lev/DD_MAP_Pavel_02f.htm
Some follow-up/issues:
POSSIBLE ISSUES WITH getData():
- choosing 3rd DD option doesn't seem to change anything ? Maybe the getData() is somehow not invoked ?
- the DD only seems to function once ie selecting a DD choice for the second time seems
not to have any effect.
- I wasn't entirely sure how to utilise the "name2" second argument in getData() (NB I have now corrected the links - nb ALL ".csv" refs should have been uppercase ".CSV")
LAYOUT/APPEARANCE:
- the colour (density) of the maps doesn't seem to change in appearance when DD/data changes (how
"sensitive" is the map coloration to CSV data differences ? any parameters I can tweak to make more sensitive/noticeable ?
- the time series chart has now shifted to below the map - would prefer to keep on right-hand side of map.
Grateful for any further guidance on the above
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Tue Jan 30, 2018 4:34 pm

Hi MT_MANC,

I made a few changes in the code. The most important matter is change the wrap method to point select event. Please check live demo.

Here is an example how to use 'name2' argument to change chart title:
Code: Select all
      $.get('https://cors.io/?http://www.jcsweb.biz/mef/MapData_Key/' + name2, function(data) {
        mapChart.setTitle({
          text: data
        })
      })


To display the charts next to each other, it will be best to use CSS styles for their containers.
Code: Select all
#info {
  width: 35%;
  display: inline-block;
}

#container {
  width: 60%;
  display: inline-block;
}


API Reference: https://api.highcharts.com/highmaps/series.map.color
Live demo: http://jsfiddle.net/BlackLabel/wqfzds8a/

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Wed Feb 07, 2018 10:22 pm

Most kind- very helpful. But there seem to be a few minor issues with the code. See my latest, slightly extended version:
http://www.jcsweb.biz/mef/client/wd_scen_lev/DD4_MAP2_Pavel_01m.htm
ISSUES:
1. Select Syncing - When using Shift+CountrySelect to display multiple series on Info chart, the Country selected is only displayed after the NEXT country for display is selected ie click selections are out of sync by one ie one behind ?

2. Title/Subtitle Issue - The DD only seems to update the Chart Title/Subtitles when the non-default DD options are selected. If RE-SELECTING the default option (GV_TEMP_GB_Key.CSV) the Chart Title/Subtitles do NOT update back to those showing originally on render. (although the Info chart time series data does update)
NB the second DD option was not showing any updated Chart Title/Subtitles; so I added in this code that seemed to fix it:
Code: Select all
if (name2 == 'GV_TEMP_UR_Key.CSV') { $.get('http://www.jcsweb.biz/mef/MapData_Key/' + name2, function(data) {
 mapChart.setTitle({ text: data }) })   }


3. Map Color Intensity - Can the INTENSITY of the (now) colour-specific mapping be adjusted eg a "high" data
value for a country shows a more intense colour fill ? (the colour intensity horizontal bar at the bottom of the map also needs to reflect the chosen Map base colour + Info graph area fill - these colours appear to be hard-coded in?)

4. Info chart - the country flags are not displaying ? Cant see any obvious bug 5. CSV data file format - the current code only seems to read/map .CSV data files that have the variable names (on the first line) enclosed in double quotes. eg
Code: Select all
"Date","RSH_u","RSH_c","RSH_m","RSH_ar"

Can this be ammended so that the first-line quotes are not required as my numerous (auto-generated) .CSV files that need mapping are out the following format: (NB the first 4 variables in the first row do not need mapping - ie they do not have
a lookup in the CountrySuffix.csv - so I presume/hope they will just be ignored (I can remove these from auto-generated .CSV if needed)
Code: Select all
Date,G7GDP00p00,OGDP00p00,EU15GDP00p00,EMUGDPe,GDP_u,GDP_c,GDP_m,GDP_ar,GDP_br,GDP_j,GDP_a,GDP_sk,GDP_th,GDP_ma,GDP_si,GDP_hk,GDP_ta,GDP_in,GDP_ph,GDP_ch,GDP_id,GDP_g,GDP_f,GDP_i,GDP_e,GDP_n,GDP_b,GDP_os,GDP_fi,GDP_ir,GDP_po,GDP_lx,GDP_gr,GDP_s,GDP_k,GDP_de,GDP_sw,GDP_no,GDP_tu,GDP_ru,GDP_sa,GDP05$_ro,GDP00$_ee,GDP00$_la,GDP00$_am,GDP00$_rw
2016,0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000
2017,-0.000000,0.000000,0.000000,0.000000,-0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,0.000000,-0.000000,0.000000,-0.000000,0.000000,0.000000,-0.000000,0.000000,-0.000000,-0.000000,-0.000000,0.000000,-0.000000,0.000000,-0.000000,0.000000,0.000000,0.000000,0.000000,-0.000000,0.000000,-0.000000
2018,-0.030728,-0.020250,-0.018289,-0.020792,-0.055893,-0.020145,-0.016102,0.016494,0.010625,-0.004967,-0.060932,-0.013332,-0.015284,-0.050033,0.066585,0.021255,-0.009022,0.003769,-0.045059,0.001769,-0.065348,-0.022454,-0.011927,-0.017049,-0.017389,-0.037719,-0.042237,-0.026472,-0.025800,-0.080900,-0.019994,0.006460,-0.007652,-0.008988,-0.001021,-0.004715,-0.017229,-0.011607,0.008480,0.028891,0.055598,0.127807,-0.079307,-0.155181,-0.107046,-0.038607
2019,-0.119989,-0.083953,-0.078885,-0.085477,-0.196918,-0.103528,-0.109723,0.038414,0.017693,-0.058191,-0.131410,-0.096151,-0.059595,-0.156323,0.159747,0.061917,-0.036347,-0.058542,-0.154808,-0.029527,-0.237302,-0.087278,-0.048835,-0.084303,-0.090563,-0.141351,-0.155486,-0.089476,-0.102163,-0.271115,-0.102698,0.028804,-0.005673,-0.061084,-0.032402,-0.056913,-0.089280,-0.042798,-0.039370,-0.013582,0.034952,0.521505,-0.416179,-0.821788,-0.625956,-0.203377
2020,-0.169307,-0.117455,-0.115290,-0.118453,-0.272995,-0.146466,-0.184474,0.063771,0.026599,-0.075513,-0.165186,-0.164865,-0.091043,-0.188249,0.233185,0.102116,-0.056791,-0.104843,-0.157914,-0.061515,-0.294300,-0.114256,-0.073039,-0.109252,-0.153365,-0.183645,-0.211413,-0.123469,-0.143459,-0.376659,-0.165918,0.059033,0.028980,-0.116152,-0.092860,-0.099176,-0.172016,-0.049223,-0.067302,-0.017099,0.023339,0.880616,-0.746983,-1.655369,-1.090510,-0.347693
2021,-0.213651,-0.148135,-0.145114,-0.144522,-0.338748,-0.177951,-0.233000,0.096570,0.038316,-0.096080,-0.213171,-0.230362,-0.118917,-0.247733,0.305732,0.117500,-0.086042,-0.098733,-0.128304,-0.078018,-0.337491,-0.142119,-0.094979,-0.117482,-0.199445,-0.210861,-0.243185,-0.171499,-0.189550,-0.448603,-0.216561,0.094500,0.049776,-0.155571,-0.156838,-0.093760,-0.291022,-0.055136,-0.109524,0.026799,0.028501,1.245256,-1.071529,-2.517854,-1.515290,-0.468642
2022,-0.255219,-0.177975,-0.167679,-0.169376,-0.401362,-0.209939,-0.243114,0.141046,0.054618,-0.123786,-0.266225,-0.289354,-0.139580,-0.337355,0.403992,0.133068,-0.127935,-0.073018,-0.097279,-0.094806,-0.379315,-0.169193,-0.114851,-0.122670,-0.235424,-0.228361,-0.271282,-0.216684,-0.231205,-0.610477,-0.258574,0.125419,0.059051,-0.184679,-0.190665,-0.062039,-0.417455,-0.050463,-0.157170,0.070626,0.051289,1.577344,-1.382372,-3.383247,-1.894606,-0.575423
2023,-0.291981,-0.206922,-0.180692,-0.186469,-0.463184,-0.225232,-0.230906,0.201187,0.075528,-0.145777,-0.320871,-0.346298,-0.149283,-0.419471,0.537740,0.181197,-0.176250,-0.036383,-0.083590,-0.117307,-0.421534,-0.187021,-0.129513,-0.121536,-0.258549,-0.236468,-0.295744,-0.258687,-0.256539,-0.776015,-0.291173,0.164903,0.078685,-0.214000,-0.195098,-0.054576,-0.530277,-0.043395,-0.219143,0.068428,0.094454,1.884735,-1.687687,-4.236283,-2.238887,-0.675960
2024,-0.325519,-0.236141,-0.193821,-0.197826,-0.524386,-0.218966,-0.217382,0.275197,0.100678,-0.163227,-0.373696,-0.399564,-0.144583,-0.497391,0.702770,0.260173,-0.215892,0.019224,-0.091671,-0.144869,-0.464731,-0.194874,-0.139641,-0.116113,-0.270334,-0.270506,-0.314250,-0.291712,-0.267020,-0.908791,-0.316794,0.228369,0.107172,-0.249456,-0.184304,-0.063137,-0.627230,-0.040665,-0.288270,0.022979,0.159510,2.177436,-1.996227,-5.078099,-2.556710,-0.776063
2025,-0.355859,-0.262644,-0.201354,-0.199680,-0.585470,-0.200346,-0.215934,0.365795,0.131412,-0.176509,-0.425288,-0.452947,-0.130155,-0.588812,0.891144,0.348654,-0.244015,0.094186,-0.120497,-0.177914,-0.509391,-0.185827,-0.146525,-0.102509,-0.271689,-0.310076,-0.333393,-0.318551,-0.259818,-0.984524,-0.333244,0.310081,0.141324,-0.294849,-0.174013,-0.074439,-0.714021,-0.047183,-0.344201,-0.019023,0.250468,2.442969,-2.315027,-5.970950,-2.861656,-0.887273
2026,-0.383744,-0.286787,-0.208059,-0.194771,-0.645678,-0.176794,-0.224732,0.474630,0.168267,-0.179774,-0.472796,-0.505858,-0.111348,-0.696362,1.084459,0.438076,-0.263636,0.172210,-0.161194,-0.218697,-0.559796,-0.161469,-0.153043,-0.082835,-0.263397,-0.358484,-0.357618,-0.345858,-0.241523,-1.049326,-0.349018,0.415694,0.177291,-0.350272,-0.178943,-0.091048,-0.797117,-0.065801,-0.388464,-0.040389,0.382348,2.690646,-2.639162,-6.909511,-3.147329,-1.005920
2027,-0.409375,-0.311951,-0.214107,-0.182842,-0.705520,-0.161558,-0.244106,0.605591,0.212540,-0.167793,-0.516168,-0.568109,-0.090136,-0.815546,1.299420,0.547438,-0.264923,0.241758,-0.196262,-0.269085,-0.614449,-0.118314,-0.160054,-0.053639,-0.244557,-0.412324,-0.392236,-0.369254,-0.208405,-1.138463,-0.359821,0.549511,0.214493,-0.405041,-0.203381,-0.111647,-0.880543,-0.097759,-0.416938,-0.032169,0.562189,2.961677,-2.972768,-7.951741,-3.420565,-1.140424
2028,-0.432742,-0.324984,-0.223297,-0.167030,-0.764356,-0.159920,-0.281018,0.760255,0.264630,-0.137641,-0.551428,-0.636677,-0.063833,-0.940174,1.535792,0.691220,-0.234966,0.324636,-0.216672,-0.328958,-0.671351,-0.061083,-0.170333,-0.020254,-0.216279,-0.483063,-0.439771,-0.397252,-0.169362,-1.245370,-0.374985,0.721055,0.243309,-0.474605,-0.247679,-0.139571,-0.966912,-0.140797,-0.364180,-0.032751,0.788095,3.266213,-3.321297,-9.103199,-3.678084,-1.298227
2029,-0.452630,-0.340275,-0.228357,-0.138103,-0.821010,-0.167666,-0.352693,0.944130,0.326868,-0.107836,-0.575242,-0.702384,-0.031354,-1.074256,1.791465,0.858605,-0.179009,0.419296,-0.230540,-0.398884,-0.729681,0.026067,-0.180753,0.024744,-0.177537,-0.560621,-0.494734,-0.416641,-0.112456,-1.337526,-0.390872,0.940589,0.271116,-0.574978,-0.301570,-0.169100,-1.048855,-0.189939,-0.365489,-0.040729,1.068628,3.614045,-3.679106,-10.356329,-3.904298,-1.478068
2030,-0.467980,-0.337320,-0.225067,-0.092436,-0.873826,-0.167605,-0.453678,1.161592,0.401319,-0.098644,-0.583839,-0.763301,0.012806,-1.212851,2.078143,1.041718,-0.106065,0.517232,-0.243128,-0.478359,-0.788374,0.155454,-0.190274,0.086892,-0.125591,-0.643719,-0.553101,-0.429788,-0.034899,-1.362335,-0.404651,1.210233,0.299668,-0.690620,-0.353832,-0.195965,-1.124872,-0.240057,-0.193835,-0.057626,1.413526,4.000315,-4.043083,-11.713630,-4.085527,-1.682143

Appreciate any pointer/guidance that you can offer. Thanks again
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Mon Feb 12, 2018 5:47 pm

Hi MT_MANC,

1. Working but not the perfect solution is to use setTimeout. Function 'selectPoint()' is called too early, when the point is not selected yet.
Code: Select all
          events: {
            select: function() {
              setTimeout(function(){
                 selectPoint()
              }, 0)
            }
          }


2. Yes, because not all data worked correctly, I created only an example of this functionality, which you should adjust. You should just set:
Code: Select all
        $.get('https://cors.io/?http://www.jcsweb.biz/mef/MapData_Key/' + name2, function(data) {
          mapChart.setTitle({
            text: data
          })
        })


3. Yes, it is possible, you have to use colorAxis: https://api.highcharts.com/highmaps/colorAxis

As the third argument of the 'getData' function you can pass maxColor to change axis color.
Code: Select all
      mapChart.colorAxis[0].update({
         maxColor: maxColor
      });


API Reference: https://api.highcharts.com/highmaps/colorAxis

4. You have to uncomment this line:
Code: Select all
// this.flag = this.id.replace('UK', 'GB').toLowerCase();


and add 'flag sprites' to your project:
Code: Select all
<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="//github.com/downloads/lafeber/world-flags-sprite/flags32.css" />


5. You can create your own mapping function or correct existing to adapt to your needs.

Docs: https://www.highcharts.com/docs/working ... ocessing#1

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Tue Feb 13, 2018 2:46 am

Pawel,
Most kind
http://www.jcsweb.biz/mef/client/wd_scen_lev/DD4_MAP2_Pavel_01q.htm
Thanks for your latest guidance which helped me fix all but 2 issues in the latest file version:
3. Map Color Intensity
Did you mean that I need to add 2 extra argument to getData() ie minColor & maxColor ? Where exactly do I insert insert your suggested code in my page ?
Code: Select all
   mapChart.colorAxis[0].update({
         maxColor: maxColor
      });

I added minColor: & maxColor: to end of this line:
Code: Select all
colorAxis: { type: 'logarithmic',endOnTick: false,startOnTick: false,min: 50000,minColor: '#efecf3',maxColor: '#990041'  },

..but it just recoloured the bottom horizontal strip (this color should really vary/correspond with the chosen Map colour)

5. CSV data file format
I tried to incorporate the custom preprocessing guidance at:
https://www.highcharts.com/docs/working-with-data/custom-preprocessing#1
but my .CSV files have a different format to the example .CSV so my integration attempt failed. I can't see where my current code is requiring that the first line of the data .CSV has to have double quotes ?. But when I remove the double quotes around the first row of variable names in the .CSV (ie for "map1-GB" CSV data only),the Global Map is "empty" !
Any pointers on the regexp tweaking required ? (as my auto-generated .CSVs are now totally free of double-quotes)

Most kind
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Tue Feb 13, 2018 3:53 pm

Hi MT_MANC,

3. You can add two extra arguments, but I think that 'minColor' can be always in shades of gray. Please, check this live demo: http://jsfiddle.net/BlackLabel/n6ev7h3t/

5. It is allowed to use CSV without quotes, but then it is necessary to change the function a bit:
Code: Select all
      csv[0] = CSVtoArray(csv[0].substring(0, csv[0].length - 2));
      csv[0] = csv[0][0].split(',');    // add this line to your code
      csv.pop();


Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby MT_MANC » Thu Feb 15, 2018 6:57 pm

Most kind - all fixes made & working
http://www.jcsweb.biz/mef/client/wd_scen_lev/DD4_MAP2_Pavel_02e_forum.htm
The only one I can't crack is the colour gradient responding to different data values in the map-data .CSV. My map colourings update OK when a new select is chosen but the map colour is solid (ie no gradient) even though the bottom bar shows a colour gradient. Guided by the example fiddle you gave, I have tried different variants of the colorAxis arguments to no avail, eg:
Code: Select all
colorAxis: { type: 'logarithmic',endOnTick: false,startOnTick: false,min: 1 },

I suspect the min: max: arguments are important here but couldnt get the right combination

BTW - Any way to change the Info graph fill colour from light blue ? (or is this hard-coded?) I can manually edit the same light blue map colour (#9AC5F0) for "Selected Countries" at:
Code: Select all
select: { color: '#9AC5F0',borderColor: 'black', dashStyle: 'shortdot' } } }] });

but would like to edit the Info chart fill RGB to match this if possible ?
Thanks again Pawel
MT_MANC
 
Posts: 26
Joined: Fri Mar 25, 2016 3:35 pm

Re: Dynamic Map render-new .CSV datasource chosen in DD

Postby ppotaczek » Fri Feb 16, 2018 3:16 pm

Hi MT_MANC,

You have set in series options:
Code: Select all
colorAxis: false


Of course, you can change the series color, but you have to do this in the second chart options:
Code: Select all
series: {
  color: 'rgb(55, 55, 55)'
}


Live demo: http://jsfiddle.net/BlackLabel/vntsmzzr/
API Reference: https://api.highcharts.com/highcharts/series.line.color

Best regards!
Paweł Potaczek,
Highcharts Developer
ppotaczek
 
Posts: 703
Joined: Mon Oct 02, 2017 5:12 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests