0

In my Rails project, I have an Highchart(Line chart) Initialized and plot in a partial/view. I want to append this chart to a bootstrap modal. I have tried multiple methods but nothing seems worked out.

But the chart is plotting without bootstrap modal AND bootstrap modal is working without chart, But both are not working together.

my method.js.erb

var graphModal = $('#view-graph-modal');
var graphModalBody = graphModal.find('.modal-body');
graphModal.on('shown',function(){
  
graphModalBody.append("<%= j render(:partial => '/projects/partials/graph',:formats => [:html]) %>");
   });
    graphModal.modal("show");

graph partial has my highchart.

Is it proper way to append whole view? Or is there any better way to only append the chart.

Any help would be appreciated! TIA

raven
  • 33
  • 1
  • 8
  • Highcharts.chart("selector", data) . use this call to initialise chart inside modal container with "selector" id. – Jitendar Jul 18 '20 at 13:03
  • Do you mind elaborate it? Kind of new to Charts. – raven Jul 18 '20 at 14:52
  • Highcharts.chart(). Function initializes graph inside html node returned by "selector". eg
    . and inside script Highcharts.chart("my-chart", data)     – Jitendar Jul 18 '20 at 15:03
  • So the graph is entirely defined in a partial, So I need to get that div part of the graph and send it through append from js.erb file. Is this correct – raven Jul 18 '20 at 15:48
  • I can't tell exactly unless I see the code. but if you want to create high chart dynamically then you should call Highchart global object from javascript. Remember script tag on append does not trigger browser to run the script inside it. for your reference https://stackoverflow.com/questions/610995/cant-append-script-element – Jitendar Jul 18 '20 at 16:08
  • Try to get some help from the Ruby Highcharts wrapper creator: https://github.com/SciRuby/daru API: https://www.highcharts.com/blog/tutorials/i-am-ruby-developer-how-can-i-use-highcharts/ – Sebastian Wędzel Jul 21 '20 at 07:28

0 Answers0