X-Axis on Rickshaw Graph keeps repeating itself

Question

I am working on a Dashing project using Sinatra, and I am displaying Graphs on the dashboard. I've been having a lot of trouble with displaying Timestamps on the X-Axis, Now that I have this working, I have another problem. On my graph, the x-axis keeps repeating the timestamp over and over again. What I mean by this is that it does not show any of the previous timestamps it just repeats the current timestamp over and over again, this is not what I want. Below is my 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')

    format =  (d) ->
      months = new Array(12)
      months[0] = "Jan"
      months[1] = "Feb"
      months[2] = "Mar"
      months[3] = "Apr"
      months[4] = "May"
      months[5] = "Jun"
      months[6] = "Jul"
      months[7] = "Aug"
      months[8] = "Sep"
      months[9] = "Oct"
      months[10] = "Nov"
      months[11] = "Dec"
      today = new Date()
      month = today.getMonth()
      day = today.getDate()
      h = today.getHours()
      m = today.getMinutes()

      if(m <= 9)
        d =  months[month] + " " + day +  " " + h + ":" + 0 + m 
      else
        d = months[month] + " " + day + " " + h + ":" + m

    x_axis = new Rickshaw.Graph.Axis.X(graph: @graph,pixelsPerTick: 100, tickFormat: format )

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

#onData is responsible for handling data sent from the jobs folder, 
#any send_event methods will trigger this function
  onData: (data) ->
    if @graph
      @graph.series[0].data = data.points
      @graph.render()
      node = $(@node)

      value = parseInt data.points[data.points.length - 1].y
      cool = parseInt node.data "cool"
      warm = parseInt node.data "warm"
      level = switch
        when value <= cool then 0
        when value >= warm then 4
        else 
          bucketSize = (warm - cool) / 3 # Total # of colours in middle
          Math.ceil (value - cool) / bucketSize

      backgroundClass = "hotness#{level}"
      lastClass = @get "lastClass"
      node.toggleClass "#{lastClass} #{backgroundClass}"
      @set "lastClass", backgroundClass

Can anyone help me understand why my graph does not want to show any previous values of X?

Answer 1

I think your issue is the call to today = new Date() in function format. The formatter is getting a date passed in by Rickshaw/D3, the date just needs to be formatted according to your needs. By calling today = new Date(), you are ignoring the passed in date and instead providing your own/new date.

Side note: you can take a look at D3's date/time formatting or moment.js for simpler date/time formatting, so your format function could shrink to 1 or 2 lines of code.