Setting additional data to Highchart series via <%= #{} %> works for integers but not Strings

Question

I am trying to create a custom tooltip for each data point of a line chart via HighCharts and Ruby on Rails, in the fashion of this thread:

Set Additional Data to highcharts series

To summarize that thread, the responders suggest inputting additional data to the series via a hash. A custom field called "myData" holds the additional data that is used in the tooltip:

new Highcharts.Chart( {
...,
series: [{
         name: 'Foo',
         data: [ { y : 3, myData : 'firstPoint' },
                 { y : 7, myData : 'secondPoint' },
                 { y : 1, myData : 'thirdPoint' } ]
      }]
tooltip: {
     formatter: function() {
               return 'Extra data: <b>'+ this.point.myData +'</b>';
     }
} );

I have used that code successfully when the data field of myData (ie #{i.extraData}) is an integer:

series: [{
data: [ <%@show.each do |i| %> { x: <%="#{i.year}, y: #{i.maturity}, 
                                 myData: #{i.extraData}"%>},<%end%>]    
}]

In that case, my line chart shows up correctly on the x and y access, and the tooltip contains the integer of i.extraData as expected.

But here is my issue. Let's say the custom tooltip I want is not an integer like i.extraData, and is instead a string. In that case, my code breaks. I have tried including single quotations around the string version of #{i.extraData}, but my code remains broken. I don't understand how to edit this section of code so that the string inside the #{} enters the hash and can be read by the tooltip.

Thanks so much for considering my question!

I don't get any error, the chart just fails to load. I also have tried <%='\''+"#{i.extraData}"+'\''%> but that hasn't worked either. — dnl2114, Jun 26 '15 at 02:36
My impression is that I would get the same issue in jsfiddle here http://jsfiddle.net/japanick/dWDE6/314/ if I were to remove the single quote marks around the myData fields. I think that is the issue I am facing by using the <%= %> tags with a String inside. Notice that it's not an error in the console, but the chart fails to load. — dnl2114, Jun 26 '15 at 02:42
Since you're passing data from Ruby to JavaScript (I think?), perhaps Ruby's built-in JSON module will help with formatting hurdles. It's what I'd try first. — Kimball, Jun 26 '15 at 03:02
That sounds like an interesting idea. This is my first ruby on rails application, so I am not too familiar with the JSON module. Is it possible to elaborate on that? — dnl2114, Jun 26 '15 at 03:13
Sure, posted an answer to demonstrate what I mean. Might have been a bit much for a comment! — Kimball, Jun 26 '15 at 03:20

Kimball · Accepted Answer · 2015-06-26T03:27:08.273

1

I'm not familiar with Highcharts, but here is a rough example of how you might use the JSON module to convert your Ruby data to be JavaScript-friendly (this was run from the interpreter).

require 'json'

chart_data = { 
  series: [{ 
    data: @show.map do |i| 
      { x: i.year, y: i.maturity, myData: i.extraData } 
    end
  }] 
}
chart_data.to_json

# => "{\"series\":[{\"data\":[{\"x\":0,\"y\":0,\"myData\":\"origin\"},{\"x\":1,\"y\":1,\"myData\":\"I'm linear... so far\"}]}]}"

edited Jun 26 '15 at 03:27

answered Jun 26 '15 at 03:19

Kimball

1,241
11
17

Thank you so much! Got my code working! { x: <%="#{i.year}, y: #{i.maturity}, "%> z: "<%=i.extraData%>"} I think the problem was putting the #{} around i.extraData. I don't know why it worked, but removing it fixed my issue. – dnl2114 Jun 26 '15 at 03:30
@dnl2114 `"<%= i.extraData %>"` and `<%= "#{i.extraData}" %>` are both valid, though behaviour will differ depending on context. String interpolation `#{}` does need to be inside a Ruby string to work, though - so `"<%= #{i.extraData} %>"` (is that what you meant?) is... well, I imagine ERB would consider it a comment since it's encountering the `#` character outside of a string. – Kimball Jun 26 '15 at 03:35
Super helpful! Thanks for explaining that. – dnl2114 Jun 26 '15 at 03:55

aadarshsg · Answer 2 · 2015-06-26T03:17:16.423

0

series: [{
data: [ <%@show.each do |i| %> { x: <%=#{i.year}%>, y: <%=#{i.maturity}%>, 
                                 myData: '<%=#{i.extraData}%>'},<%end%>]    
}]

Try this

edited Jun 26 '15 at 03:17

answered Jun 26 '15 at 03:02

aadarshsg

2,069
16
25

I appreciate the suggestion. Strangely, it has not worked. I originally thought that the single quotes may be getting concatenated onto the String but even something like <%='\''+"#{i.extraData}"+'\''%> hasn't worked. – dnl2114 Jun 26 '15 at 03:09
Another interesting point, if I move myData: 'String' outside of the <%= %> tag then it enters the hash correctly. The main issue with that is then I do not have the ability to change the String dynamically. – dnl2114 Jun 26 '15 at 03:14
I got my code working! { x: <%="#{i.year}, y: #{i.maturity}, "%> z: "<%=i.extraData%>"} I think the problem was putting the #{} around i.extraData. I don't know why it worked, but removing it fixed my issue. – dnl2114 Jun 26 '15 at 03:28

Setting additional data to Highchart series via <%= #{} %> works for integers but not Strings

2 Answers2