Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rCharts nvd3 library force ticks

I would like to force all tick marks and tick labels to appear along the axis in an rCharts nPlot from the nvd3 library. I have tried several approaches without success.

This is the default behaviour:

df <- data.frame(x = 1:13, y = rnorm(13))
library(rCharts)
n <- nPlot(data = df, y ~ x, type = 'lineChart')
n$yAxis(showMaxMin = FALSE)

enter image description here

I would like to have all data in 1:13 show along the x axis.

Ultimately, I have custom tickmarks I want to show equally-spaced with the following replacement:

n$xAxis(tickFormat = "#! function (x) { 
    ticklabels = ['0-1000', '1000-1500', '1500-1700', '1700-1820', '1820-1913', 
        '1913-1950', '1950-1970', '1970-1990', '1990-2012', '2012-2030', 
        '2030-2050', '2050-2070', '2070-2100']
        return ticklabels[x-1];
} !#")

enter image description here

I hope it is clear why I want to have all tick marks and labels printed (and equally spaced).

To give an idea of the finished product, here is a ggplot2 impression:

library(ggplot2)
df <- data.frame(x = c('0-1000', '1000-1500', '1500-1700', '1700-1820', '1820-1913', 
    '1913-1950', '1950-1970', '1970-1990', '1990-2012', '2012-2030', '2030-2050', 
    '2050-2070', '2070-2100'), y = rnorm(13), z = "group1")
ggplot(data = df, aes(x = x, y = y, group = z)) + geom_line()

enter image description here

Here are several things I have tried, based on several suggestions I found here and there: neither work.

Based on my reading of the docs, I thought this would work:

n$xAxis(tickFormat = "#! function (x) {
  return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13][x-1];
} !#")

I also tried this, on the off chance:

n$xAxis(ticks = 13)

I also tried to combine tickValues and tickFormat but with no success.

I also thought about writing a script, but again my understanding of the nvd3 library was insufficient.

n$setTemplate(afterScript = 
    "<script>
        var chart = nv.models.lineChart();
        var newAxisScale = d3.scale.linear();
            .range(d3.extent(chart.axes[0]._scale.range()))
            .domain([1, d3.max(chart.axes[0]._scale.domain())])
        chart.axes[0].shapes.call(
            d3.svg.axis()
            .orient('bottom')
            .scale(newAxisScale)
            .ticks(13)
            //.tickValues()
            //.tickFormat(d3.format())
        ).selectAll('text')
          .attr('transform','')
    </script>"
)

None of these report errors in the console, but none of them modify the appearance of the first plot above.

like image 661
PatrickT Avatar asked Oct 19 '22 19:10

PatrickT


1 Answers

It turns out I was not correctly setting tickValues as I got the syntax confused with tickFormat. Here is an rCharts solution. The corresponding d3 or nvd3 solution should be easy to deduce.

n <- nPlot(data = df, y ~ x, type = 'lineChart')
n$yAxis(showMaxMin = FALSE)
n$addParams(height = 500, width = 1000)
n$xAxis(tickValues = "#! function (x) {    
    tickvalues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    return tickvalues;
} !#")
n$xAxis(tickFormat = "#! function (x) {
    tickformat = ['0-1000', '1000-1500', '1500-1700', '1700-1820', '1820-1913', 
       '1913-1950', '1950-1970', '1970-1990', '1990-2012', '2012-2030', '2030-2050', 
       '2050-2070', '2070-2100'];
    return tickformat[x-1];
} !#")
n

Notice how the code has tickvalues in tickValues but tickformat[x-1] in tickFormat.

enter image description here

like image 74
PatrickT Avatar answered Oct 22 '22 22:10

PatrickT