Not able to display Month names on Rickshaw Graph on Coffeescript

Question

I am working on a project using Sinatra based framework called Dashing. Part of my project is to create a graph using RickShaw Graph. My problem is that I am not able to display month names and dates on the X-Axis. I am using coffeescript to render these values. Here is the code for the graph:

class Dashing.Graph extends Dashing.Widget



@accessor 'points', Dashing.AnimatedValue

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[points.length - 1].y

#ready is triggered when ever the page is loaded.
  ready: ->
    container = $(@node).parent()
    # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @graph = new Rickshaw.Graph(
      element: @node
      width: width
      height: height
      renderer: @get("graphtype")
      series: [
        {
        color: "#fff",
        data: [{x:0, y:0}]
        }
      ]
    )

    @graph.series[0].data = @get('points') if @get('points')
    time = new Rickshaw.Fixtures.Time()
    days = time.unit("day")

    x_axis = new Rickshaw.Graph.Axis.Time(
      graph: @graph
      timeUnit: days
    )
    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
    @graph.render()

From what I understood from the Rickshaw Graph API available here:

https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js

it says that you can specify the unit name. So for this instance I used "day" just for testing reasons, but this doesnt seem to be working. Any help would be great.

score 0 · Accepted Answer · answered Feb 22 '14 at 02:50

You can specify a timeFixture which drives how the ticks on the x-axis should be labelled.

var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  timeFixture: new Rickshaw.Fixtures.Time.Local()
} );

The fixture takes care of the time range being displayed and triggers the appropriate level of detail fo the date/time formatting, e.g. zooming in from years to hours.

You could also create your own 'time fixture' and set it there, take a look at Rickshaw.Fixtures.Time or Rickshaw.Fixtures.Time.Local

Alternatively, specify the fixed spacing aka 'unit's you always want to display:

var timeFixture = new Rickshaw.Fixtures.Time();
var unitHour = timeFixture.unit('hour');
var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  timeUnit: unitHour,
  timeFixture: timeFixture
} );

Thanks for the reply, I think the problem was that I did not update the Rickshaw.min.js file as it has been updated. The older version did not have the Time.Local in it. For any one who wants the latest version you can get it here: https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.js — Joshi, Feb 23 '14 at 20:47

Not able to display Month names on Rickshaw Graph on Coffeescript

1 Answers1

Linked