5

I want to use the Javascript graphs of http://code.shutterstock.com/rickshaw/

and I got it working for one exception, when my values of less than 0.00000100 then the y-axis values are shown in scientific format, e.g. 2e-7 for the value 0.00000020

How to I make it show 0.00000020 instead of 2e-7 ?

gonchuki
  • 4,064
  • 22
  • 33
KKK
  • 1,085
  • 11
  • 33

2 Answers2

4

I haven't used rickshaw, but looking at this example on the homepage page:

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

It looks like you can pass a function to tickFormat. In this case formatKMBT is passed, and it looks like this:

Rickshaw.Fixtures.Number.formatKMBT = function(y) {
    var abs_y = Math.abs(y);
    if (abs_y >= 1000000000000)   { return y / 1000000000000 + "T" }
    else if (abs_y >= 1000000000) { return y / 1000000000 + "B" }
    else if (abs_y >= 1000000)    { return y / 1000000 + "M" }
    else if (abs_y >= 1000)       { return y / 1000 + "K" } 
    ...ect

From here, you can use d3 built in number formatters or roll your own. For example:

function yAxisFormat(d){ return d.toFixed(8); }
Adam Pearce
  • 9,243
  • 2
  • 38
  • 35
4

Here's an example:

var yAxis = new Rickshaw.Graph.Axis.Y( {
            graph: graph,
            tickFormat: function(y){return y.toPrecision(3)}
        } );

You can put whatever function you want there.

hexicle
  • 2,121
  • 2
  • 24
  • 31