In my application I have a page containing multiple Chartkick/Highcharts graphs. To prevent the need of too many graphs I would like to make them responsive to input and change content thereafter. What I have done is set up a form selection field, and I want the column graph to change depending on which record is selected in the field. I am using jQuery to do this.
Now to my question. In my js file I'm having trouble concatenating/interpolating the html string I want to render. Does anyone know of a good way to do this?
I have tried to use conventional concatenation, but since I escape javascript within the string, it is not working. If I hard code a user id everything updates as intended for that user, so the issue is definitively here.
Here is what I have so far in my js:
chart_render.js
var user_id;
user_id = $('#user-select').val();
if (user_id !== "") {
$('#chart').html("<%= j render 'chart_render', locals: {user_id: --->This is where I need to place the user id<--- } %>");
} else {
$('#chart').html("<%= j render 'chart_render', locals: {user_id: nil} %>");
}
Any tips would be appreciated!
EDIT:
I ended up going a different way by using Highcharts directly instead of through Chartkick and passing the selected user through a data tag.