Using Plotly in Angular2-Meteor Project

angular
1

I am trying to import and use Plotly.js in my angular2-meteor project. I got it working by adding plotly.js in the public folder and adding a script tag like this:

 loadScript(file, callback){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = file;
        script.onload = callback;
        document.getElementsByTagName('head')[0].appendChild(script)
 }

And just declaring Plotly: declare var Plotly: any;
However this feels very un-meteor/un-angular-like.

So then I found out there is a Plotly npm package. However I can’t figure out how to use it. The readme says to use require:

var Plotly = require('plotly.js');

But require is not recognized, and adding aramk:requirejs gives conflicts.

any ideas?

2

Hi, I am facing the exact same issue (though I don’t think this is related to angular, only to Meteor). I am trying to import plotly into a file in the imports folder.
I tried import plotly from 'plotly.js' and many other combination, without success…

Did you find another solution ?

3

This is a Blaze/Plotly thread which may help:

4

Thanks for the quick answer. However the proposed answer looks more like a hack (loading plotly.js from the CDN). I think the issue comes from the plotly npm package itself, that is meant for server only. But isn’t the Meteor import system meant to handle this situation ?

5

Honestly? I don’t know - I use Highcharts :slight_smile:

You’ll be able to import the code, but if the code’s not designed for the browser there’s no guarantee it’ll work.

6

Hi, I still can’t get that to work. I tried to download the js file directly, but I can’t get that to work either… Is there a way to load manually libs ? Only answer I found is “build a Meteor package with your bare hands”…

7

Hi ericburel, I didn’t figure out how to use the Plotly NPM package on the client. Someone did recently upload typings for Plotly which might improve importing. See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b9a4af1c2f47588836f62c4039d45926e50dbafd/plotly.js/plotly.js.d.ts

Haven’t taken the time to try it myself though.

In my current project I am actually just loading it from the CDN. This is my index.html:

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
  <script src="/js/web-animations.min.js"></script>
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <base href="/">
</head>
<body>
  <app>Loading...</app>
</body>
8

Hi,

It seems that the correct solution is import * from 'plotly.js' (it does work with other packages, such as crossover for instance), in addition to the typings file you suggested. However, there seems to be a weird bug with graceful-fs that makes the install impossible.
So, so far, CDN is the way. It is not such a terrible solution, since we still have good typings.