2

I've been playing with Highcharts (v3.0.10) for a week on a webpage and can't get my charts redrawn when printing the page. The thing is that I use a dark background color for my charts, but when printing, I'd like to change it to white. For accomplishing that, I need to redraw() my charts after changing the backgroundColor property. The thing is that when I do that, the background color changes on the printing preview, but data is gone, it doesn't get redrawn for some reason.

Before trying to change background colors, I've been doing some reworking with the container div sizes and call reflow() for the charts to adjust to an A4 page, and it worked perfectly when previewing the print page: Containers were the size I wanted them to be and charts reflowed successfuly to their new size.

Problems begin when I wanted the background to turn white and added the redraw() method on the callback triggered when user tries printing the page. Containers still reflow() correctly and background changed to white, but data is missing on the charts.

I've created a sample fiddle which you can review here. It works on Chrome and Firefox (I mean you can reproduce the problem). For previewing this fiddle I provided, just go and try to print the fiddle page with your browser, so the page printing preview window comes up.

Added some screenshots for Firefox printing page preview and data dissappearing on this link.

Also note the Highcharts version I'm using: 3.0.10. It's not the latest but can't get any higher with the current license I own.


Some code and stuff

Print handler and code executed when user tries to print:

/** Chrome **/
        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    resize();
                } else {
                        unresize();
                }
            });
        }
    // Firefox
  if (window.onbeforeprint !== undefined && window.onafterprint !== undefined) {
            window.onbeforeprint = function() {
                resize();
            }
            window.onafterprint = function() {
                unresize();
            }
        }

  var originalBackground = '#333';
  function resize(){
      // Do some transformations to fit an A4 page that 
      //are not the matter of this question
      // ......
      //......
      // Loop through all containers (only two but anyways...)
      // and apply changes
      $('.graph-container').each(function(i,e){
        let chart = $(e).highcharts();
        chart.options.chart.backgroundColor = '#FFFFFF';
        // Create new chart with background color
        $(e).highcharts(chart.options);
        // Force redraw 
        $(e).highcharts().redraw();
    });
  }      
  function unresize(){
    $('.graph-container').each(function(i,e){
            let chart = $(e).highcharts();
      // Revert background to original color #333
      chart.options.chart.backgroundColor = originalBackground;
      $(e).highcharts(chart.options);
      $(e).highcharts().redraw();
    });
  }
JorgeGRC
  • 1,032
  • 2
  • 18
  • 37
  • you can get help from this question http://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart – Awais Rafique Mar 03 '17 at 11:22
  • @AwaisRafique Thanks, I had looked at that question before but he struggles with changing the data series dinamically, for me, data is the same, I only want to change the chart's background color, data remains the same. I don't think I should pass the same data again just for the `setData` method to force redraw. I mean, maybe it works, but I don't believe that's the optimal solution :( – JorgeGRC Mar 03 '17 at 11:26
  • Which version of Firefox are you using ? I just installed firefox on my Macbook and ran your fiddle example and it worked. It changed its background to white and the data remain the same – Juan Rivillas Mar 03 '17 at 11:29
  • http://fiddle.jshell.net/J56hm/1/?utm_source=website&utm_medium=embed&utm_campaign=J56hm – Awais Rafique Mar 03 '17 at 11:31
  • @jprivillaso `51.0.1`32bit on Windows – JorgeGRC Mar 03 '17 at 11:32
  • @JorgeGRC The same here. 64bit and It's working for me. The problem is that when you click on print the data is gone right ? – Juan Rivillas Mar 03 '17 at 11:34
  • @AwaisRafique thanks for your Fiddle Awais, but what I'm trying to accomplish is change background color when user previews the printing page, I'm not trying to change background color using a button. Background color should change when user clicks on "Print page" using the browser, you get a preview page for whatever the printer is going to print, and there, background should become white and plot all data correctly, not sure if I'm explaining myself correctly – JorgeGRC Mar 03 '17 at 11:37
  • @jprivillaso yep, chart changes background color but data is gone, it isn't plotted. – JorgeGRC Mar 03 '17 at 11:37
  • https://postimg.org/image/s2zbjf0s3/ – Juan Rivillas Mar 03 '17 at 11:40
  • @jprivillaso yep but that's not the preview page, this is what I mean when I refer to th printing preview page: http://imgur.com/efF2VIR. Another screenshot: http://imgur.com/a/2ozcS – JorgeGRC Mar 03 '17 at 11:42
  • Oh right right. Sorry, I wasn't understanding right the question – Juan Rivillas Mar 03 '17 at 11:54
  • I'm updating the fiddle with chrome handlers. It happens in Chrome also. – JorgeGRC Mar 03 '17 at 11:59

0 Answers0