How to Include highcharts in a popup window ?

[jasmineranicp]

How to Include highcharts in a popup window ?
My controller code is :

@compare_revenue_chart = LazyHighCharts::HighChart.new('graph') do |f|
              f.title(:text => "Revenue")
              f.xAxis(:categories => @months_new)
              f.series(:name => "Revenue ", :yAxis => 0, :data => @revenue_graph)
              f.yAxis [ {:title => {:text => "Revenue", :margin => 70} }]
              f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical')
              f.chart({:defaultSeriesType=>"line"})

View is :

<div>
    <%= high_chart("compare_revenue", @compare_revenue_chart) %>
</div>

popup window code

function compareRevenue()
{
  var from_date = $( "#from_date" ).val();
  var to_date = $( "#to_date" ).val();

    $.ajax({
    url: "/dashboard/comparerevenue?from_date=" + from_date + "&to_date=" + to_date,
    cache: false
  }).done(function( html ) {
    document.getElementById("popup_container").innerHTML = html ;

  });
  $( "#popup_container" ).dialog({ title: "Compare Revenue" },{width: 600},{height: 750});

}

But the chart doesnt seem to appear in the popup window . Is there any special way to display the highcharts in a popup window ?

[Miguel Michelson Martinez]

is possible that the js returned in ajax is not being interpreted as js. I would recommend that you try something like js rendering instead of html, so the template that responds to /dashboard/comparerevenue instead of repsond html format should respond the js version of the template . So, in your js template.

$("pop_up_container").html( "#{render partial "your_chart"}" );

then in _your_chart.erb partial

    <%= high_chart("compare_revenue", @compare_revenue_chart) %>

then you don need to set the innerHTML of the ajax done() function , because the .js template will do that.

[jasmineranicp]

Thanks for response Michelson .
I have made changes according to your response , it still doesn't seem to work . i have put the code below . I am very new to Ruby .Please correct me i am wrong.

Controller Action :

@compare_revenue_chart = LazyHighCharts::HighChart.new('graph') do |f|
              f.title(:text => "Revenue")
              f.xAxis(:categories => @months_new)
              f.series(:name => "Revenue ", :yAxis => 0, :data => @revenue_graph)
              f.yAxis [ {:title => {:text => "Revenue", :margin => 70} }]
              f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical')
              f.chart({:defaultSeriesType=>"line"})
       respond_to do |format|
           format.js   {render :layout => false}
       end 

**js view template (comparerevenue.js) :

$("pop_up_container").html( "#{render partial 'display_compare_revenue'}" );

**partial (_display_compare_revenue.html.erb) :

<script src="/assets/js/highcharts.js" type="text/javascript">
</script>
<div>
    <%= high_chart("compare_revenue", @compare_revenue_chart) %>

</div>

*function : *

function compareRevenue()
{
  var from_date = $( "#from_date" ).val();
  var to_date = $( "#to_date" ).val();

    $.ajax({
    url: "/dashboard/comparerevenue?from_date=" + from_date + "&to_date=" + to_date,
    cache: false
  }).done(function( html ) {
    //document.getElementById("popup_container").innerHTML = html ;

  });
  $( "#popup_container" ).dialog({ title: "Compare Revenue" },{width: 600},{height: 750});

}

[Miguel Michelson Martinez]

Hi , it seems that $("pop_up_container").html( "#{render partial 'display_compare_revenue'}" ); it's wrong it should be $("#pop_up_container"). note the #

for readability please format you code in your comments, I've do it for you twice now

[jasmineranicp]

Hi , even with $("#pop_up_container") - it doesnt work .