Personalización "scatter"

[JoséCarlosMartínez]

hi,
sorry for my english,


I'm trying to customize a "scatter" chart with "HighCharts" in R to use with rMarkDown and generate html and pdf output. So far I have been able to partially configure.

1. Treat the extreme values, at this moment an extreme value prevents the adequate visualization of the graph, it could be excluded with R, but it would be better if it was hidden in the graph, being able to incorporate it through the legend where all the municipalities are shown.

2. Show one of the municipalities in a different color.

3. The dataLabels show one of the "Umbral" variables, but it should be the "Municipio" variable.

4. The tooltip currently shows the values ​​for each municipality, but they should be displayed as a table incorporating the names of the variables, "Esfuerzo" "Umbral" "Relevancia" "Municipio"

5. The legend with the municipalities should be initially hidden and with a button to be able to show or hide it.

6. Incorporate the median value into the text of the plotLine lines To be able to add one or more texts whose position is referenced at the same time to the axes (x, y).

Code: Select all

hc <- dfo %>%
 hchart(
  type = "scatter",
  hcaes(
   x = dfo$`Esfuerzo`,
   y = dfo$`Umbral`,
   size = dfo$`Relevancia` * 100,
   group = dfo$`Municipio`
   ),
  tooltip = list(
   valueDecimals = 2,
   valueSuffix = " %"
  ),
  dataLabels = list(
   enabled=TRUE, 
   format='{y:.2f}',
   style = list(fontSize = "16px"),
   color = "#666666"
  )
 ) %>%
 hc_title(
  text = "Compromiso",
  style = list(fontWeight = "bold", fontSize = "28px")
 ) %>%
 hc_subtitle(
  text = "",
  align = "center",
  style = list(fontWeight = "bold", fontSize = "18px")
 ) %>%
 hc_xAxis(
  labels = list(style = list(fontSize = "14px")),
  title = list(
   text = "Esfuerzo",
   style = list(fontWeight = "bold", fontSize = "20px")
  ),
  plotLines = list(
   list(label = list(text = ""),
        color = "#FF4040",
        width = 3,
        value = median(dfo$`Esfuerzo`)
   )
  )
 ) %>% 
 hc_yAxis(
  labels = list(style = list(fontSize = "14px")),
  title = list(
   text = "% Umbral", 
   style = list(fontWeight = "bold", fontSize = "20px")
  ),
  plotLines = list(
   list(label = list(text = ""),
        color = "#FF4040",
        width = 3,
        value = median(dfo$`Umbral`)
   )
  )
 ) %>%
 hc_exporting (
  enabled = TRUE
 ) %>%
 hc_add_theme(
  hc_theme_tufte()
 )
hc

Code: Select all

structure(list(Código = c("02003", "03014", "04013", "05019", 
"06015", "07040", "08019", "09059", "10037", "11012", "12040", 
"13034", "14021", "15030", "16078", "17079", "18087", "19130", 
"21041", "22125", "23050", "24089", "25120", "26089", "27028", 
"28079", "29067", "30030", "32054", "33044", "34120", "35016", 
"36038", "37274", "38038", "39075", "40194", "41091", "42173", 
"43148", "44216", "45168", "46250", "47186", "49275", "50297", 
"51001", "52001"), Municipio = c("Albacete", "Alicante/Alacant", 
"Almería", "Ávila", "Badajoz", "Palma", "Barcelona", "Burgos", 
"Cáceres", "Cádiz", "Castellón de la Plana/Castelló de la Plana", 
"Ciudad Real", "Córdoba", "Coruña (A)", "Cuenca", "Girona", "Granada", 
"Guadalajara", "Huelva", "Huesca", "Jaén", "León", "Lleida", 
"Logroño", "Lugo", "Madrid", "Málaga", "Murcia", "Ourense", "Oviedo", 
"Palencia", "Palmas de Gran Canaria (Las)", "Pontevedra", "Salamanca", 
"Santa Cruz de Tenerife", "Santander", "Segovia", "Sevilla", 
"Soria", "Tarragona", "Teruel", "Toledo", "Valencia", "Valladolid", 
"Zamora", "Zaragoza", "Ceuta", "Melilla"), Esfuerzo = c(66.255518296917, 
55.4505971732305, 67.3396882117212, 159.444527678894, 39.9208624778303, 
75.6407281816124, 191.885593614053, 66.4060669160645, 41.5696869168135, 
131.928027073733, 70.8156033699513, 63.3576317305502, 99.9022751874716, 
92.1737310681322, 38.5831640425687, 91.7932459374022, 108.74338544486, 
42.8257587497772, 67.209950935465, 52.5816548264175, 102.778140636216, 
81.7958449372392, 87.2101693767431, 82.8515582299525, 64.2431323026685, 
116.244125268106, 95.4495291756444, 57.9232964761993, 74.9121459540308, 
75.0079722742974, 72.345751914009, 131.407698477426, 37.4719669533452, 
70.9266085324988, 119.707963542996, 56.4080210059843, 76.5130914290131, 
102.864800169414, 155.927878655384, 96.0587342879086, 57.0368704204712, 
43.3062216835242, 83.7300653585645, 68.8468635870744, 57.9772431037523, 
112.835558277614, 189.188525288669, 431.185251161171), Relevancia = c(0.0779438999416286, 
0.075567624299619, 0.0830963177638657, 0.181216919752304, 0.0645578573307309, 
0.0694739535415282, 0.11238222267336, 0.0591312044270579, 0.0549171188507039, 
0.107335017649502, 0.0672279971174195, 0.0622048291208239, 0.106492447121433, 
0.0989219226252717, 0.0434299324062133, 0.080124826578867, 0.0923126527122762, 
0.055862728725791, 0.0816954005957221, 0.0569671724881646, 0.0902113572693082, 
0.0760249770659709, 0.0786282259767798, 0.0920644595378507, 0.0827523660072055, 
0.0869155856787086, 0.0892429670963684, 0.0705333155849015, 0.0852996555846074, 
0.069397881679441, 0.0843127745258698, 0.151586054295292, 0.0464492613233081, 
0.0720415327066066, 0.119890097237675, 0.0503879549782981, 0.0624360563921389, 
0.0965284452003263, 0.159516287787606, 0.0739061270776166, 0.0694730992371514, 
0.0410407530273502, 0.0855901086450992, 0.0787793734678359, 0.0688139147586614, 
0.102143947795215, 0.0634263210053491, 0.149047512460091), Umbral = c(21, 
28.8, 30.3, 19.2, 24.4, 16.8, 15.4, 12.8, 19.4, 20.3, 20.7, 18.6, 
24.6, 16.5, 19.4, 18.2, 24.8, 16.8, 26.5, 16.2, 20.5, 16.9, 21.4, 
16.5, 19.3, 17.3, 27.9, 24, 19.8, 16.7, 15.1, 25.6, 19.9, 20.5, 
27, 17.8, 18.2, 24.9, 13.6, 19.3, 13.1, 14.5, 21.6, 15.1, 20.4, 
14.9, 34.8, 37)), class = "data.frame", row.names = c(NA, -48L
))

[piotr.m]

Hi,

Thanks for contacting us!

It seems to me that most of these actions would require the use of custom code that would be achievable by wrapping functions in JavaScript,
so that it would also operate on the available formatting in the Highcharts API.

Here you can find an article that might help you set it up:
https://www.highcharts.com/blog/tutoria ... 3uwdpxknhP

Let me know if it helped in your case!

Kind Regards

[JoséCarlosMartínez]

Hi,
sorry for my english,

I have tried to hide one of the series, without success

Code: Select all

 hc_plotOptions(
  series = list(
   visible = ifelse(dfau$Municipio == "Melilla", "FALSE", "TRUE")
  )
 ) %>%

Code: Select all

 hc_plotOptions(
  scatter = list(
   visible = ifelse(dfau$Municipio == "Melilla", "FALSE", "TRUE")
  )
 ) %>%

[JoséCarlosMartínez]

hi,

I have tried adding in "hchart", "visible", the property is incorporated into the series, however, it is neither associated with the correct one, "Melilla", nor does it work with "Zaragoza" to which it is associated, visible:FALSE.

I can't find a solution, I don't know what else I can try.

Code: Select all

visible = ifelse(dfau$Municipio == "Melilla", "FALSE", "TRUE"),

Code: Select all

 hchart(
  type = "scatter",
  hcaes(
   x = dfau$`Esfuerzo`,
   y = dfau$`Umbral`,
   size = dfau$`Relevancia` * 100,
   group = dfau$`Municipio`,
   color = ifelse(dfau$Municipio == "Murcia", "#C31A00", "#8673A1")
   ),
  visible = ifelse(dfau$Municipio == "Melilla", "FALSE", "TRUE"),
  tooltip = list( ... ),
  dataLabels = list( ... )
 )

I have also tried adding the "visible" argument in the hcaes () function. It doesn't work that way either.


Kind Regards

[piotr.m]

Hi,

As I mentioned, you can try to achieve this with the use of JS events:

Code: Select all

library('highcharter')
highchart() %>%
  hc_add_series(
    type = "scatter",
    data = list(5, 4, 3, 5)
  ) %>%
  hc_add_series(
    type = "scatter",
    data = list(15, 14, 13, 15)
  ) %>%
  hc_chart(events = list(load = JS("function() {
      var chart = this; 
      
      chart.series[0].update({
          visible: false
      })
    }
    ")
  ))

Regards

[JoséCarlosMartínez]

Hi,

In this case, the x-axis scale does not fit the values of the visible series.

Regards

[JoséCarlosMartínez]

Hi,

I have tried the example you have proposed. In this case, the x-axis scale does not fit the values of the visible series.
And also I can't adapt it to my code.
Could someone show a solution. Please.

Regards

[JoséCarlosMartínez]

Hi,

As I mentioned, you can try to achieve this with the use of JS events:

Code: Select all

library('highcharter')
highchart() %>%
  hc_add_series(
    type = "scatter",
    data = list(5, 4, 3, 5)
  ) %>%
  hc_add_series(
    type = "scatter",
    data = list(15, 14, 13, 15)
  ) %>%
  hc_chart(events = list(load = JS("function() {
      var chart = this; 
      
      chart.series[0].update({
          visible: false
      })
    }
    ")
  ))

Regards

Hi,

How could I hide a series (for example "Melilla") by name if I don't know its index number?

You do a great job.
Thanks a lot.

[JoséCarlosMartínez]

Hi,

Using the recommended code (which works perfectly) to hide a series in the scatter plot the labels are overlapping, I have tried to fix it with "allowOverlap: boolean" and padding = "0px" but the problem continues.

Code: Select all

 hc_chart(
  events = list(load = JS("function() {
   var chart = this; 
   chart.series[27].update({visible: false})
   }")
  )
 ) %>%

[piotr.m]

Hi,

From what you describe, here you have to properly customize the style of this chart to your preferences:
https://www.highcharts.com/docs/chart-d ... -and-style

You can achieve this by wrapped JS code which allows you to directly manipulate on the Highcharts API:
https://api.highcharts.com/highcharts/

Kind Regards

[JoséCarlosMartínez]

Hi,

As I mentioned, you can try to achieve this with the use of JS events:

Code: Select all

library('highcharter')
highchart() %>%
  hc_add_series(
    type = "scatter",
    data = list(5, 4, 3, 5)
  ) %>%
  hc_add_series(
    type = "scatter",
    data = list(15, 14, 13, 15)
  ) %>%
  hc_chart(events = list(load = JS("function() {
      var chart = this; 
      
      chart.series[0].update({
          visible: false
      })
    }
    ")
  ))

Regards

Hi,

How could I hide a series (for example "Melilla") by name if I don't know its index number?

You do a great job.
Thanks a lot.

hi

How can I access and traverse the array of the series?

Thanks
Greetings

[JoséCarlosMartínez]

Hi,

From what you describe, here you have to properly customize the style of this chart to your preferences:
https://www.highcharts.com/docs/chart-d ... -and-style

You can achieve this by wrapped JS code which allows you to directly manipulate on the Highcharts API:
https://api.highcharts.com/highcharts/

Kind Regards

Hi,

I note that it is not a style problem, it is possible that hc_chart is interfering with the rendering of the chart. I have tried to correct it by adding chart.redraw (); but it is not solved.

Note: When in that same chart I use the buttons that I have incorporated to hide or show the legend, which execute chart.redraw (), the problem is solved.

Can you help me?

Code: Select all

 hc_chart(
  events = list(load = JS("function() { 
   var chart = this; 
   chart.series[27].update({visible: false});
   chart.redraw();
   }")
  )
 ) %>%

Thanks

[piotr.m]

Hi,

How can I access and traverse the array of the series?

What exactly do you mean? - Inside this wrapp you operate on JavaScript code where you can refer to the available properties and methods for the chart object, including the series.

Regarding the 2nd question, could you please submit a simplified whole config so I can have a better idea of how it works now?
Because the problem is still with the overlapping labels?

Kind Regards

[JoséCarlosMartínez]

hi,

Thanks for responding and allowing me to use this forum. It is an important issue for me, I hope you can help me. It had been a long time since I programmed and it is proving difficult for me. It is a social report that I would very much like to be able to do.

1. I use this script to access the series object (found on stackoverflow.com).

Code: Select all

     var chart = this;
     for(var i=0; i<chart.series.length;i++){
      //alert(chart.series[i].name);
      if(chart.series[i].name==\"Melilla\"){
       //alert(\"Eureka \" + chart.series[i].name)
       chart.series[i].update({visible: false})
      }
     }

2. With this R code the overlapping of the datalabels can be reproduced. It happens when I use hc_chart events to initially hide one of the series. The playable data I put in the first post.

Code: Select all

hc <- dfo %>%
 hchart(
  type = "scatter",
  hcaes(
   x = dfo$`Esfuerzo`,
   y = dfo$`Umbral`,
   size = dfo$`Relevancia` * 100,
   group = dfo$`Municipio`
   ),
  dataLabels = list(
   enabled=TRUE, 
   format='{y:.2f}',
   style = list(fontSize = "16px"),
   color = "#666666"
  )
 ) %>%
 hc_chart(
  events = list(load = JS("function() { 
   var chart = this; 
   chart.series[27].update({visible: false});
   chart.redraw();
   chart.reflow();
   }")
  )
 )
hc

Sincerely.

[piotr.m]

Hi,

Maybe the allowOverlap parameter will help in your case?
https://api.highcharts.com/highcharts/p ... lowOverlap

You can also see other similar topics about label overlap:
https://stackoverflow.com/questions/193 ... ng-columns

Regards