Append Value to Rickshaw Graph Axis and what is ticksTreatment and Preserve

Question

This is my first question on here so please go easy :)

I am trying to implement some line graphs with rickshaw graphs, d3 and jquery UI. I have some vertical tabs and have successfully gotten the charts to load from external html files.

There was a bit of documentation on Rickshaw but I couldn't find what I was specifically after so I will ask this kind community a few questions if that is ok?

Firstly when loading Tabs in jquery UI from external html files where should I put all of the javascript and css into the page that is embedded (see below historic.html) or into the parent page? I have tried both and they seem to work I was just wanting to know best practice.

<ul>
    <li><a href="#tabs-1"><div id="live-icon"></div>LIVE GRAPHS</a></li>
    <li><a href="historic.html"><div id="historic-icon"></div>HISTORIC DATA</a></li>

Secondly, I the x-axis on the graph is in milliseconds. I would like to append "ms" to the end of each of the x-axis "ticks". so the x-axis would read 50ms, 100ms, 150ms etc... Can this be done?

And lastly in Rickshaw they have that fan-dangled example (http://code.shutterstock.com/rickshaw/examples/extensions.html) that has all of the bells and whistles. It has two properties that I cannot find any information on. perserve: true ? and another example has tickFormat and tickTreatment? Could someone please explain what these do.

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,

Thankyou very much for your help.

Answer 1

Probably no longer relevant for the OP, but since it's still unanswered, I can answer the Rickshaw questions:

To append ms to the end of your ticks, you need to use the tickFormat option. In their tutorial, they set up the axis as follows:

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

Here, they're setting up the tickFormat to be a default they've built in, but in reality, it can take anything that conforms to what d3's axis' tickFormat takes. tickFormat should be a function that accepts a number and outputs a string. You probably want something along the lines of

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: function (d) { return d + ' ms'; },
        element: document.getElementById('y_axis'),
} );

This will make the ticks simple be the number followed by ms.

This also happens to answer one part of the three part question that follows. The other two parts concern tickTreatment and preserve.

The short answer is that tickTreatment gets added as a class to the ticks. The reason that this is useful is for CSS styling, which Rickshaw takes advantage of. They have some presets you can use for this. The one they're using in that example is called glow, which adds a white glow around the text to make it readable on top of the graph.

preserve is an option that affects whether or not the data you provide is copied before it's used. The relevant section from Rickshaw's source is here:

var preserve = this.preserve;
if (!preserve) {
    this.series.forEach( function(series) {
        if (series.scale) {
            // data must be preserved when a scale is used
            preserve = true;
        }
    } );
}

data = preserve ? Rickshaw.clone(data) : data;

Basically, if you set preserve to true (it defaults to false), it'll make a copy of the data first.