Can't get Dashing to display bar and line on same Rickshaw graph

I'm trying to use this widget to display 3 sets of data. the first set should be shown as a bar chart, and the rest can be displayed as lines on the chart.

From what I've read, Rickshaw Graphs should be able to do this by using the 'multi' renderer but I can't get that render to work at all.

Here is the ruby Array data object I'm sending, formatted to make it more readable:

iterationData:
    [
        {
            :name=>"Delivered", 
            :renderer=>"bar", 
            :data=> [
                {:x=>1, :y=>0}, 
                {:x=>2, :y=>4}, 
                {:x=>3, :y=>4}, 
                {:x=>4, :y=>11}
            ]
        }, 
        {
            :name=>"Estimated", 
            :renderer=>"line", 
            :data=> [
                {:x=>1, :y=>2.7}, 
                {:x=>2, :y=>5.4}, 
                {:x=>3, :y=>8.10}, 
                {:x=>4, :y=>10.8}, 
                {:x=>5, :y=>13.5}, 
                {:x=>6, :y=>16.2}, 
                {:x=>7, :y=>18.9}, 
                {:x=>8, :y=>21.59},
                {:x=>9, :y=>24.29}, 
                {:x=>10, :y=>26.99}
            ]
        }, 
        {
            :name=>"Outlook", 
            :renderer=>"line", 
            :data=> [
                {:x=>1, :y=>2.75}, 
                {:x=>2, :y=>5.5}, 
                {:x=>3, :y=>8.25}, 
                {:x=>4, :y=>11.0}, 
                {:x=>5, :y=>13.75}, 
                {:x=>6, :y=>16.5}, 
                {:x=>7, :y=>19.25}, 
                {:x=>8, :y=>22.0}, 
                {:x=>9, :y=>24.75}, 
                {:x=>10, :y=>27.5}
            ]
        }
    ]

and here is my calls to show the graph and to send data to the graph:

send_event in the ruby job:

send_event("#{projectID}-burnup-chart", {:series => iterationData})

dashboard.erb code:

<div data-id="23405488441-burnup-chart" data-view="Rickshawgraph" style="background-color:#ff9618" data-legend=true data-unstack=true data-renderer="bar" data-color-scheme="compliment" data-max="40"></div>

This just displays a blank widget with an orange background. The graph hasn't rendered at all. Can anyone suggest how I might achieve this? Or has anyone used a different widget to create a working burn up chart like this that they might be able to suggest?

Solution

I believe what you are trying to do is impossible because of the way that this widget marshals parameters from Dashing to Rickshaw.

Specifically, these complicated lines of code: https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L193-L253

I'm not sure if Rickshaw gets mad if you send it extra data, but the author of the widget seems very concerned about sending it incorrectly. Essentially, you are falling into this case: https://gist.github.com/jwalton/6614023#file-rickshawgraph-coffee-L237-L245

You might be able to get it to work if you added a line to that else if, like this:

  else if series?.data?
  # Rickshaw data.  Need to clone, otherwise we could end up with multiple graphs sharing
  # the same data, and Rickshaw really doesn't like that.
  answer = {
    renderer: series.renderer  # add your renderer
    name:     series.name
    data:     series.data
    color:    series.color
    stroke:   series.stroke
  }

Or better yet, just use jQuery Extend to make a new copy:

answer = $.extend(true, {}, series);

Let me know how it goes and I'll update my answer to assist if further problems arise.