Search code examples
javascriptdygraphs

Can dygraphs customize x-axis scaling

I am evaluating switching from JFreeChart to dygraphs, but I am looking for a way to have 1-log(x) values on x-axis; major ticks (with equal distances) would be 90%, 99%, 99.9%, 99.99% and so forth. Is it possible to provide transformation function either

a) from data to position in the graph

or

b) visualisation transformation (I could generate the data in normalized form, but then all labels should be converted)

Searching for logscale showed that there's not one place to set linear/logarithmic transformation, so I feel sceptical towards a).

Thanks (note JFreeChart does not provide this out-of-the-box naturally, but since I am more proficient with Java I was able to hack this together).

Solution

  • You can write a custom ticker for the x-axis to make dygraphs show whatever you like. The docs reference this explanatory comment in the implementation. See this answer for some inspiration.

    g = new Dygraph(div, data, {
  axes: {
    x: {
      ticker(min, max, pixels, opts, dygraph, vals) {
        return [
          { v: 0.9, label:'90%' },
          { v: 0.99, label: '99%' },
          { v: 0.999, label: '99.9%' }
        ];
      }
    }
  }
});

    As for rendering that on a log scale, your best bet would be to transform your x-values before passing them to dygraphs, then converting them back for display (using valueFormatter).