How to Import Plottable.js

Question

I am fairly new to javaScript. I am having issues finding out how to import and use the Plottalbe.js (along with D3 that is part of it) libraries. Can anyone show me a working example of an HTML and .js file that uses Plottable? I must have severe blindness because I cannot find anything on this.

I used npm and the package was placed into C:\Users\me\node_modules.

Here is what I have tried so far. Excuse my code. I have tried different approaches, and I still fail.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript</title>
  <!-- <link     href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css"
    rel="stylesheet" /> -->
  <script src="scripts/require.js"></script>
  <!-- <script     src="https://cdn.jsdelivr.net/npm/plottable@3/plottable.min.js"></script> -->
  <script src="app.js"></script>
</head>
<body>
  <h1>JS</h1>
</body>
</html>

And then the app.js.

//import { Plottable } from "plottable";
// var Plottable = require('plottable');

require(['plottable'], function (plottable) {
// var Plottable = require('plottable');
});

// define(function (require){
// var Plottable = require('plottable');
// });

@jmargolisvt I have multiple different combinations of import and require, and since I barely know what I am doing I must keep screwing it up somehow. — SovietFrontier, Aug 22 '18 at 13:21
Add the code you're trying to your question. It's pretty tough to help you without seeing code. — jmargolisvt, Aug 22 '18 at 13:23

jmargolisvt · Accepted Answer · 2018-08-22T13:52:41.293

1

Add import Plottable from 'plottable'; to the top of your js file (assuming you are using Node). If not, you will need to require your dependency using the full path to the file.

edited Aug 22 '18 at 13:52

answered Aug 22 '18 at 13:36

jmargolisvt

5,722
4
29
46

I get 'Uncaught SyntaxError: Unexpected identifier' and it points to the line with the import. All the rest in app.js is commented out. So it's just the import. – SovietFrontier Aug 22 '18 at 13:39
Are you using Node? https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node – jmargolisvt Aug 22 '18 at 13:41
No I am not. I am using strictly javaScript/HTML. I used npm to install the stuff, maybe that put it in a place I can't access? – SovietFrontier Aug 22 '18 at 13:45
Updated answer. You were confused by examples that all use Node. – jmargolisvt Aug 22 '18 at 13:53
I cannot get it to work unfortunately. I get 'not allowed to load local resource' and 'script error for http://requirejs.org/docs/errors.html#scripterror'. Looks like the js uses require too so I must be confusing it somehow. Thanks for the help but I guess I'm stuck on this. – SovietFrontier Aug 22 '18 at 14:52

How to Import Plottable.js

1 Answers1