Using Plotly with Blaze

help
1

I’m still a newb with meteor and I’m trying to get a simple plotly example to work using the following as a resource: https://plot.ly/javascript/getting-started/

I’ve added the plotly npm package, but not sure how to pass the username and key that they require before the package is available to me.

I have tried the following (created a server-side method):
Meteor.startup(function () {
Meteor.methods({
getPlotly: function () {
console.log(‘called plotly’);
const plotly = require(‘plotly’)("##my user##", “##my key##”);
return plotly;
}
});
});

Then I call it from the client:
‘click button.myButton’ ( event, instance ) {
Meteor.call(‘getPlotly’, function( err, res ){
console.log(‘err’,err);
console.log(‘res’, res);
TESTER = instance.find(’#tester’);
//i’ve tried a variety of things here in order to plot…
res.plot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
});
}

And I have a div with an id of “tester”.

I’m successfully calling everything and everything seems to log correctly, but not sure how to successfully “plot” items since I need to be authenticated first. When I try this all client side, I get a CORS error. I know this should be super-simple, but can’t wrap my head around it.

2

I can help get plotly running server side (using the plotly.js npm package), but maybe you’re interested in leveraging plotly.js on the client side instead? If so I’d recommend skipping the plotly.js npm package (won’t work client side without extra hacking) and just use the plotly.js client side library file (via a script tag). Here’s a quick example:

  1. First make sure you remove the plotly.js npm package from your project.

  2. /client/main.html

<head>
  <title>plotly-test</title>
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <h1>plotly.js Test</h1>
  <div id="tester" style="width:600px;height:250px;"></div>
  <button>Click Me</button>
</body>
  1. /client/main.js
import { Template } from 'meteor/templating';

import './main.html';

Template.body.events({
  'click button'(event, instance) {
    const data = [{
      x: [1, 2, 3, 4, 5],
      y: [1, 2, 4, 8, 16]
    }];
    const settings = {
      margin: {
        t: 0
      }
    };
    Plotly.plot($('#tester')[0], data, settings);
  },
});

Let me know if you still want to get the npm package working, and I’ll lend a hand.

3

I actually was a little confused on how plotly works. I was actually creating the charts in their cloud, so it was successful in a few cases without me even knowing. Your solution is actually what I was trying to accomplish. Thank you!

4

Hi,

I still can’t undertand why we can’t load plotly.js client-side ? Isn’t the Meteor import system meant to load npm package client side ?

1 Like
5

I still would like to get the npm package working. I get an error with graceful-fs on the import statement of plotly.js
http://stackoverflow.com/questions/37309425/error-after-installing-and-including-npm-module-into-meteor-project is an associated issue.

6

Yep there is an open issue in graceful-fs, which does not seem to be compatible with ES6 export, that’s why there are issues with some libs.