Template options causes Rails syntax error

[yoonwaiyan]

I want to show the label for my line graph, thus I added an option to include the label name in my multiTooltipTemplate in my view that renders chartjs like so:

<%= chartjs_line_chart @data, {height: 150, bezierCurve: true, bezierCurveTension: 0, responsive: true, datasetFill: false, generateLegend: true, multiTooltipTemplate: "<%%= datasetLabel %> - <%%= value %>"} %>

but <%%= datasetLabel %> - <%%= value %> this line raised an error in my Rails app:

syntax error, unexpected '>'
/Users/user/Documents/workspace/railsapp/app/views/home/dashboard.html.erb:33: syntax error, unexpected '<', expecting ')'
            </div>
             ^

I've escaped the erb syntax by adding another %, but this doesn't work.

UPDATE on 4th September:

However, if I put the options in the controller without extra % it works.

  @options =  {
    height: 150, 
    bezierCurve: true, 
    bezierCurveTension: 0, 
    responsive: true, 
    datasetFill: false, 
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
    generateLegend: true
  }

<%= chartjs_line_chart @data, @options %>

Are template options only declarable in controllers but not in views?

[danbartlett]

Experiencing the same issue here, no combination of %%%'s stop Rails throwing an error when these options are set in a view

[airblade]

Well, this is definitely an escaping problem but I don't have any special insight into the solution. The options should be declarable in views as well as controllers. I declare mine in (helpers used in) views.

Does it make a difference if you use single quotes instead of double quotes?

@yoonwaiyan To eliminate any possible problems with datasetLabel and value, perhaps you could try multiTooltipTemplate: "<%%= '42' %>", or similar with single and double quotes switched.

Is the view with your chart a 'top-level' view or is it a partial?

[yoonwaiyan]

@airblade thanks for the reply.

I tried this

<%= chartjs_line_chart @data, {
      height: 150, 
      bezierCurve: true, 
      bezierCurveTension: 0, 
      responsive: true, 
      datasetFill: false, 
      multiTooltipTemplate: "<%%= 'datasetLabel' %> - <%%= 'value' %>",
      generateLegend: true
} %>

but yields error

/Users/yoonwaiyan/Documents/workspace/accounts/app/views/home/dashboard.html.erb:19: unknown regexp options - dv
/Users/yoonwaiyan/Documents/workspace/accounts/app/views/home/dashboard.html.erb:21: syntax error, unexpected '<'

Tried '<%%= datasetLabel %> - <%%= value %>' , doesn't work too.

[SleepyDeveloper]

I was having issues with this for a few hours yesterday and I think the reason why escaping doesn't work in the view is due to embedded ruby.

As mentioned above in an embedded ruby file printing a literal <% %> is achieved by doing <%% %> however it appears that this type of escaping is not supported when nested inside of <% tags.

In short

<%%= value  %> # is valid

<% <%%= value %>  %> # throws a syntax error

I addressed this nesting issue by extracting my chart tools tips, legends, etc into partials and escaping the <% tags in there.

legends/_line_chart.html.erb

<ul class=\"<%%=name.toLowerCase()%>-legend\">
  <%% for (var i=0; i<segments.length; i++){%>
    <li>
      <%%if(segments[i].label){%><%%=segments[i].label%><%%}%>
      <div class=\"comm-how\"><%%=segments[i].value%></div>
      <span style=\"background-color:<%%=segments[i].fillColor%>\"></span>
    </li>
  <%%}%>
</ul>

and I use it in the view like so

    <%= line_chart @data,
          height: 200,
          width: 900,
          responsive: true,
          generateLegend: true,
          legendTemplate: render("legends/line_chart") %>

Hope this helps.

[airblade]

@SleepyDeveloper Thanks for the workaround.

I've upgrade the plugin (v3.0.0) to use Chart.js v2.1.4, which uses functions instead of JavaScript templates – so this escaping problem goes away.