Text labels on slider.

[JoeMarangos]

Hi there, I am currently making an interactive map that features a slider. I am not very familiar with coding outside of R and so am having trouble resolving this issue. Essentially I want the slider in my interactive map to display the increment label as 'Jan-2016' through to 'Jun-2018' however cant seem to figure out how to do this. As a result my current workaround has been to label the monthly increments as values 1 through 30 but I need the slider to show these as 'month-year' and not the current format.

The code in question:

map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)
map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

Im not sure how familiar you guys are with angularjs in relation to R but any help in masking the 1-30 values with 'month-year' labels would be greatly appreciated. Data included for replication: https://drive.google.com/open?id=1xBqApmzAzzYHwDIEuxYiksO5bw5N7EBp

Full code for R:

#Packages for install.
install.packages("reshape2")
install.packages("Quandl")
install.packages("plyr")
install.packages("rMaps")
install.packages("datamaps")
install.packages("rgdal")
install.packages("kableExtra")
install.packages("funModeling")
install.packages("discretization")
install.packages("sf")
install.packages("maptools")
install.packages("RColorBrewer")
install.packages("countrycode")
install.packages("AngularJS")
#Packages for run. 
library(reshape2)                 
library(Quandl)
library(plyr)
library(rCharts)
library(rMaps)
library(datamaps)
library(kableExtra)
library(funModeling)
library(discretization)
library(rgdal)
library(sf)
library(maptools)
library(RColorBrewer)
library(countrycode)
library(ggplot2)

#Find Brexit data set.Obvisouly set your own WD here. 
Brexit.Data <- read.csv("E:/MSc Disso/Transposed Brexit.csv", check.names = FALSE)
#Melt Brexit data set.
datm <- melt(Brexit.Data, 'Year',
             variable.name = 'Country',
             value.name = 'Search Frequency',
             check.names = FALSE

)

#Add breaks to data.                             
datm2 <- transform(datm,
                   Country = countrycode(datm[,2], origin = "country.name", destination = "iso3c"),
                   fillKey = cut(datm[,3],breaks = c(-Inf,0,9,19,49,Inf),labels = c("0","1-9","10-19","20-49","50+"))
)

datm2 <- subset(na.omit(datm2))

#Define CB pallet.
fills = setNames(
  c(RColorBrewer::brewer.pal(5, 'PuBu'),'black'),
  c(c("0","1-9","10-19","20-49","50+"))
)

#Payload creation for data maps. 
datm3 <- dlply(na.omit(datm2), "Year", function(x){
  y= toJSONArray2(x, json = F)
  names(y) = lapply(y, '[[', 'Country')
  return(y)
})

datm3

#Data maps base map.
options(rCharts.cdn = TRUE)
map <- Datamaps$new()  
map$set(
  dom  = 'chart_1',
  scope = 'world',
  fills = fills,
  data = datm3[[1]],
  legend = TRUE,
  labels = FALSE
)

#Interactive slider component. 
map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)

map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

map2$set(newData = datm3)
map2

.

[ValentinH]

From what I can see, you are not using this library. Angularjs-slider is a slider library, not something to use native sliders with angular.

[ValentinH]

Closing as there was no answer for a while. Comment to re-open 😉