Highcharts with Turbolinks - Rails 4

Question

I am using Highcharts with Rails 4 and Turbolinks. I faced the problem of charts not appearing when switching pages.

I fixed this by doing this in the initialization script:

var ready = function(){
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors,              function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});
//further initialization
}


$(document).ready(ready);
$(document).on('page:load', ready);

Then it loaded every time I visited the page. But the entire chart is black. I am using pie charts with multiple colors. But only the first time colors are displayed. But in subsequent page visits the colors are all black.

score 2 · Answer 1 · answered Jul 07 '16 at 10:02

Had exactly the same problem and solved it by disabling turbolink for the page.

Example :

= link_to 'My charts page', charts_page_path, data: { turbolinks: false }

Caution : the way to deactivate turbolinks changed since version 5.0 and the link in this post is for older version.

So if this does not work, check your version of turbolinks :

For version 5.0+ : use data: { turbolinks: false }
For older versions : use data: { no_turbolink: true }

score 1 · Accepted Answer · answered Sep 09 '13 at 12:34

1

You are overwriting existing colors with radial gradient objects. Then when reload, you are doing this the same but now variable colors is not more string, but is object (I guess).

I think you should change this:

Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { ... });

to:

var colors = ['#FF00FF', '#FFFFFF' ... '#00FFFF'];
Highcharts.getOptions().colors = Highcharts.map( colors , function(color) { .. });

answered Sep 09 '13 at 12:34

Paweł Fus

44,795
3
61
77

Hi can you tell me what colors to add to colors array? – Steve Robinson Sep 10 '13 at 05:06
1

How would I know which colors you need?:) Default colors are here http://api.highcharts.com/highcharts#colors – Paweł Fus Sep 10 '13 at 08:24
Okay Got it :) I was searching for the default colors. Thanks a lot! working fine. – Steve Robinson Sep 10 '13 at 10:01

score 0 · Answer 3 · answered Sep 06 '13 at 13:39

0

turbolinks is like jquery-mobile. The pages which use turbolinks act like single page applications, so you need to keep state between them. You can make a global variable and check if it is nil, or disable turbolinks for the highcharts pages.

answered Sep 06 '13 at 13:39

nurettin

11,090
5
65
85

Okay. I understand that. Thank you. But how do I disable Turbolinks on a page basis? – Steve Robinson Sep 06 '13 at 13:51
you can use data-no-turbolinks in link_to or (http://stackoverflow.com/questions/14227363/using-turbolinks-in-a-rails-link-to) or try (https://github.com/rails/turbolinks/pull/52) – nurettin Sep 06 '13 at 13:58
Sorry, I am not getting the charts at alll... :( – Steve Robinson Sep 06 '13 at 14:24

Highcharts with Turbolinks - Rails 4

3 Answers3