2

Is there a way to add title to the axis? Typically, it is useful to have the y-axis display units. For example: http://code.shutterstock.com/rickshaw/examples/y_axis.html has just numbers, but in any kind of plot you would need to specify: %, $, km/s, etc. How to do that?

Thank you!

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    renderer: 'line',
    height: 300,
    width: 800,
    series: [
        {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "#c05020"
        }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "#30c020"
        }, {
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "#6060c0"
        }
    ]
} );

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

graph.render();
All Workers Are Essential
  • 15,826
  • 38
  • 96
  • 129
ozhogin
  • 155
  • 1
  • 10
  • 1
    There doesn't appear to be a built-in way to do so with Rickshaw. However, you could always add one yourself using d3 methods. Example code here: http://stackoverflow.com/questions/11189284/d3-axis-labeling – AmeliaBR Feb 06 '14 at 02:29
  • @AmeliaBR : I have tried adding code from your example: `// Add a y-axis label. graph.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", 6) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Here goes the label");` To the code above, however it completely "broke" the page. Nothing is displayed now... – ozhogin Feb 12 '14 at 16:02
  • 2
    Your `graph` variable isn't a d3 selection, it's a rickshaw function. It doesn't have an `.append` method, and that's the error that would be breaking your program (do you know how to check error output on the console? It makes it a lot easier to figure out what's going wrong...). You need to use d3 to select your `` element and/or your y axis `` element: `d3.select("#y_axis").append("text") /* etc. */` The `#` tells the d3 select method that what follows is an element id, it selects the matching element, and then gives you all the d3 methods for modifying it. – AmeliaBR Feb 12 '14 at 16:39
  • @AmeliaBR : Thank you for your response. I have tried adding `// Add a y-axis label. d3.select("#y_axis").append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", 6) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Label text");` Now the page doesn't crash, and displays the plot. Even the text is visible, however it is just underneath the plot, not attached to the y-axis and not rotated. P.S. How do I check the error output in the console? I am using python's simpleHTTPserver to test this. – ozhogin Feb 18 '14 at 19:41
  • 1
    The developer console isn't part of the server, it's part of the browser. You'll have to do a search on how to enable it for the browser you're using. As for the position, is it possible that your `y_axis` component is an HTML `
    `, not part of the SVG? Maybe try selecting "g.y.axis" instead of "#y_axis". If rickshaw uses the default d3 axis settings that should work. You still may have to play around with the x/y and transform settings; note that x and y are calculated *after* rotating the coordinates.
     – AmeliaBR Feb 19 '14 at 15:26
  • @AmeliaBR : Thank you again. You are right, `y_axis` is a part of `
    `. However, if I do `d3.select(g.y_axis).append("text")` I get: _Uncaught ReferenceError: g is not defined_. If I do `graph` instead of `g`, I get no error, but no label text is displayed. Here is the JSFiddle: http://jsfiddle.net/rxdNx/2/ where I left it as `#y_axis` so that the text is at least displayed, even though not rotated and not small.
     – ozhogin Feb 19 '14 at 16:03
  • 1
    The error is because without quotes, `g.y_axis` is interpretted as a Javascript variable `g`, instead of a CSS selector to find a `` element with class `y_axis` (`d3.select("g.y_axis")` would do that). However, looking at the fiddle it looks like the Rickshaw uses a `` with class `y_axis`, so the selector would be `d3.select("svg.y_axis")`. However, with Rickshaw you also seem to have to specify the svg namespace when you append an element (d3 normally does this automatically). Working fiddle, you'll need to fuss with the position: http://jsfiddle.net/rxdNx/3/ – AmeliaBR Feb 19 '14 at 17:50

0 Answers0