Search code examples
coffeescriptrickshawdashing

Dashing problems using Rickshaw with one widget

I'm currently trying to add data types to the x-axis of my graphs in Dashing using the Rickshaw widget.

Essentially I want to create data call in the dashboard file that relates to an if statement in the Coffeescript widget

Code from coffeescript (Rickshaw.coffee)

# Define elements for Rickshaw time
time = new Rickshaw.Fixtures.Time
months = time.unit('month')
weeks = time.unit('week')

if @get("weekly-view")
  x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: weeks)

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


else if @get("monthly-view")
  x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: months)

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

else
  x_axis = new Rickshaw.Graph.Axis.X(graph: graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)

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

This relates to a Dashboard file that calls the change like so:

  <li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
      <div data-id="etvvrb" data-view="Rickshawgraph" data-weekly-view="true"></div>
    </li>

Essentially the if statements do not seem to have any effect, I've tried to amend to enable if @get('var') == true or other similar attempts.

Any help would be greatly appreciated!

Matt

Solution

  • Managed to crack it:

    # Define elements for Rickshaw time
time = new Rickshaw.Fixtures.Time
months = time.unit('month')
weeks = time.unit('week')

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

switch @get('xAxis')
  when "weekly"
    x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: weeks)

  when "monthly"
    x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: months)

  else
    x_axis = new Rickshaw.Graph.Axis.X(graph: graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)

    And:

    <li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <div data-id="etvvrb" data-view="Rickshawgraph" data-title="Weekly ETV reach" data-moreinfo="Week commencing" style="background-color:#336699" data-color-scheme="rainbow" data-renderer="line" data-x-axis="weekly"></div>
</li>

    Basically, the 'data-x-axis' parameter needs to be passed as @get('xAxis'). Then you can feel free to do as you please in the switch element.