2

I'm using lazy_high_charts and foundation 4.

In my view I have <%= high_chart("my_id", @chart) %>, which generates the following:

<section>
  <script type="text/javascript">
    (function() {
      var onload = window.onload;                      # I think
      window.onload = function(){                      # the issue
        if (typeof onload == "function") onload();     # is here
          var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": {  } },"xAxis": {  },"yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };

    window.chart_my_id = new Highcharts.Chart(options);

      };
    })()
  </script>
<div id="my_id"></div>
</section>

However, it is not displaying because of the following lines generated by foundation 4 in my application.js

$(document).foundation();
$(function(){ $(document).foundation(); });

If I delete those lines the chart loads.

How can I use foundation and lazy_high_charts together?

gabrielhilal
  • 10,660
  • 6
  • 54
  • 81

2 Answers2

1

instead of

(function() {
var onload = window.onload;                      # I think
window.onload = function(){                      # the issue

write

$(function(){

The resulting script tag will look:

<section>
  <script type="text/javascript">
        $(function() {
          var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": {  } },"xAxis": {  },"yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };

    window.chart_my_id = new Highcharts.Chart(options);

    });
  </script>
<div id="my_id"></div>
</section>

Make sure you have put jquery script before it.

mhsekhavat
  • 977
  • 13
  • 18
  • This solution works, but isn't there a better option? I don't know JavaScript very well, something like disabling foundation here, or make highcahrts js's priority first. Sorry if dumb question. – Barna Kovacs Aug 27 '13 at 12:07
  • Any code you write inside `$(function(){ ... });` will be executed on page load just after previous ones in previous `$(function(){...});` commands. So if the line `$(function(){ $(document).foundation(); });` appears after `$(function() { ... window.chart_my_id = new Highcharts.Chart(options);});` , Highchart's priority will be first. Also the first line `$(document).foundation();` in your question is redundant. ` $(function(){ $(document).foundation(); });` does the whole work. – mhsekhavat Aug 28 '13 at 05:44
  • The `<%= high_chart("my_id", @chart) %>` generates the javascript code. So, it is not possible to edit the javascript generated by the `lazy_high_charts`. – gabrielhilal Aug 28 '13 at 08:40
1

I solved the problem updating the zurb-foundation and lazy_high_charts gems:

In my Gemfile:

gem 'zurb-foundation', '~> 4.0.0'
gem 'lazy_high_charts'

Then:

bundle install
bundle update lazy_high_charts
rails g foundation:install

I have also included the following lines in the application.html.erb:

  ...
  <%= javascript_include_tag "vendor/custom.modernizr" %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  ...

After that, the <%= high_chart("my_id", @chart) %> code is generating the following javascript:

<script type="text/javascript">        
(function() {
  var f = function(){
  document.removeEventListener('page:load', f, true);
...

I hope it helps people facing the same problem.

gabrielhilal
  • 10,660
  • 6
  • 54
  • 81