morris.js chart doesn't work on production server

问题

I have this morris.js chart which I populated with random values (the ones provided in the exemple). Whereas it renders perfectly in localhost, once I upload on the production server it no longer works.

Set up

JS code

new Morris.Line({
        element: 'daily-chart',
        data: [
            { y: '2006', a: 100, b: 90 },
            { y: '2007', a: 75,  b: 65 },
            { y: '2008', a: 50,  b: 40 },
            { y: '2009', a: 75,  b: 65 },
            { y: '2010', a: 50,  b: 40 },
            { y: '2011', a: 75,  b: 65 },
            { y: '2012', a: 100, b: 90 }
        ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B']
});

HTML code

<div id="daily-chart" style="height: 350px; width: 1000px">

</div>

Rendering

In Chrome/Opera

Despite the width and height set up in the #daily-chart <div>, the dimensions are not set up properly. I only see one part of the chart, the rest being hidden. It's about 50px width despite of <div id="daily-chart" style="height: 350px; width: 1000px">.

In Firefox

The script gets busy or does not respond at all. I get the following message : A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. with Continue|Stop script choices and the browser freezes. It states that the line is the 1164 which is a while condition :

while ((t = d.getTime()) <= dmax) { // <-- 1164 line
  if (t >= dmin) {
    ret.push([spec.fmt(d), t]);
  }
  spec.incr(d);
}

No errors in console or whatsoever except when I stop the script where I get :

Error: Script terminated by timeout at:
Morris.labelSeries@https://<url>/js/uncompressed/morris.js:1164:1
Morris.Line</Line.prototype.drawXAxis@https://<url>/js/uncompressed/morris.js:930:11
Morris.Line</Line.prototype.draw@https://<url>/js/uncompressed/morris.js:890:9
Morris.Grid</Grid.prototype.redraw@https://<url>/js/uncompressed/morris.js:472:9
Morris.Grid</Grid.prototype.setData@https://<url>/js/uncompressed/morris.js:338:9
Grid@https://<url>/js/uncompressed/morris.js:102:7
Line@https://<url>/js/uncompressed/morris.js:726:7
Line@https://<url>/js/uncompressed/morris.js:724:9
@https://<url>/<path/to/webpage>:1171:9

Other specs

The production server uses an HTTPS protocol and PHP version (don't think this is related at all) is 5.4.29 on dev and 5.4.30 on prod. As far as I know, these are the only differences.

What is causing the issue?

回答1:

In case you are still trying to figure out a solution , do make sure you check all the stylesheets that have been linked as well as the link of the jquery plugins.

For example :

<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

Should be replaced with

<link href="https://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

and so on.