Geek asks and answers

Add value to the axis of the Rickshaw chart and what are tics Treatment and preservation

This is my first question here, please come through :)

I am trying to implement some line graphs with rickshaw, d3 and jquery UI graphs. I have several vertical tabs and they have successfully received diagrams for loading from external html files.

There was a bit of Rickshaw documentation, but I couldn’t find what I was specifically after, so I will ask this good community a few questions if this is normal?

Firstly, when loading tabs in jQuery UI from external html files, where should I put all javascript and css on the embedded page (see below Historical.html) or on the parent page? I tried both, and they seem to work, I just wanted to learn the best practices.

<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, the x-axis on the graph is in milliseconds. I would like to add "ms" to the end of each of the "ticks" of the x axis. therefore, the x axis will read 50 ms, 100 ms, 150 ms, etc. Can this be done?

And finally, in Rickshaw they have an example with fans ( http://code.shutterstock.com/rickshaw/examples/extensions.html ) that has all the bells and whistles. It has two properties that I cannot find about. perserve: right? and another example has tickFormat and tickTreatment? Can someone explain what they are doing.

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

Many thanks for your help.

+5
source share
1 answer

Probably no longer relevant to OP, but since it still remains unanswered, I can answer Rickshaw questions:

ms , tickFormat. :

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

tickFormat , , , d3 axis 'tickFormat. tickFormat , . , -

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

- , ms.

, . tickTreatment preserve.

, tickTreatment . , , - CSS, . , . , , glow, , .

preserve - , , , , , . Rickshaw :

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;

, preserve true ( false), .

+1

More articles:


All Articles