Problem running the example on the website

Question

Problem running the example on the website

Ehsan1997 opened this issue 7 years ago · 10 comments

Ehsan1997 commented 7 years ago

I have installed anychart and imagemagick, following is the error (I am using manjaro).

/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:714
"font-size",b.fontSize):this.sh.removeAttribute("font-size");b.fontWeight?this.Nb(this.sh,"font-weight",b.fontWeight):this.sh.removeAttribute("font-weight");b.letterSpacing?this.Nb(this.sh,"letter-spacing",b.letterSpacing):this.sh.removeAttribute("letter-spacing");b.decoration?this.Nb(this.sh,"text-decoration",b.decoration):this.sh.removeAttribute("text-decoration");this.Mt.nodeValue=a;c=this.sh.getBBox();this.Mt.nodeValue="";b.fontVariant&&$.Ye&&(this.Mt.nodeValue=a.charAt(0).toUpperCase(),c.height=
^

TypeError: this.sh.getBBox is not a function
at oi.$.g.measure (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:714:400)
at Qg (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:119:486)
at $.vh.$.g.sj (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:697:371)
at jh (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:134:48)
at $.vh.$.g.ou (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:705:48)
at $.vh.$.g.io (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:695:33)
at $.vh.$.g.ob (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:620:125)
at Ur (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:376:39)
at Lr.$.g.kb (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:1008:123)
at gca (/home/ehsan/Code/node_modules/anychart/dist/js/anychart-bundle.min.js:426:188)

Answer 1 · 2017-12-25T09:24:13.000Z

@Ehsan1997
Hi, I'm glad to inform you that today the new version of AnyChart-NodeJS npm was released.
The first of all, we highly recommend you to update your npm modules using npm update

Then we recommend you to check examples here and pay attention to the order of creating default jsdom view, requiring modules and creating a chart.
If it won't help you, please, provide us an example of your code which brings that error.

Answer 2 · 2017-12-26T02:56:19.000Z

It's the same code in the example,

// require file system and jsdom
var fs = require('fs');
var jsdom = require('jsdom').jsdom;

// create default jsdom view
var d = jsdom('<body><div id="container"></div></body>');
var w = d.defaultView;

// require anychart and anychart export modules
var anychart = require('anychart')(w);
var anychartExport = require('anychart-nodejs')(anychart);

// create and a chart to the jsdom defaultView 
var chart = anychart.pie([10, 20, 7, 18, 30]);
chart.bounds(0, 0, 800, 600);
chart.container('container');
chart.draw();

// generate JPG image and save it to a file
anychartExport.exportTo(chart, 'jpg').then(function(image) {
  fs.writeFile('anychart.jpg', image, function(fsWriteError) {
    if (fsWriteError) {
      console.log(fsWriteError.message);
    } else {
      console.log('Complete');
    }
  });
}, function(generationError) {
  console.log(generationError.mess// require file system and jsdom
var fs = require('fs');
var jsdom = require('jsdom').jsdom;

// create default jsdom view
var d = jsdom('<body><div id="container"></div></body>');
var w = d.defaultView;

// require anychart and anychart export modules
var anychart = require('anychart')(w);
var anychartExport = require('anychart-nodejs')(anychart);

// create and a chart to the jsdom defaultView 
var chart = anychart.pie([10, 20, 7, 18, 30]);
chart.bounds(0, 0, 800, 600);
chart.container('container');
chart.draw();

// generate JPG image and save it to a file
anychartExport.exportTo(chart, 'jpg').then(function(image) {
  fs.writeFile('anychart.jpg', image, function(fsWriteError) {
    if (fsWriteError) {
      console.log(fsWriteError.message);
    } else {
      console.log('Complete');
    }
  });
}, function(generationError) {
  console.log(generationError.message);
});age);
});

Here is how I followed the steps,

Installed ImageMagick and Librsvg (Which were already installed, I just checked).
Copied and pasted the code to index.js and did $ node index.js

Got the same error as already posted, this.sh.getBBox is not a function.

Answer 3 · 2017-12-26T08:19:31.000Z

@Ehsan1997
In this case, we need some more details. Could you provide us the following information:
Version of

anychart-nodejs npm
anychart npm
jsdom npm
node js
and environment. Also, please, make sure that creating the chart starts after requiring anychart-nodejs module

Answer 4 · 2017-12-30T22:57:10.000Z

It looks like the jsdom object differs from whatever version is being used in your examples.
There is no lowercase "jsdom" option, so:
let jsdom = require('jsdom').jsdom
Returns undefined.

There is a uppercase "JSDOM" option in the form of a function, this function however is a class constructor function, and cannot be invoked without 'new'.

Calling the JSDOM function with new returns this object, that again, does not contain the options used in your example:

Answer 5 · 2017-12-31T07:16:39.000Z

@null4bl3
In this example is used "jsdom" version 9.9.1 and let jsdom = require('jsdom').jsdom returns function. You can learn more about old "jsdom" api here. For the latest version of "jsdom" (now it's - 11.5.1) you should use something like this:

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const options = {runScripts: "dangerously"};
const { window } = new JSDOM('<body><div id="container"></div></body>', options);

const anychart = require('anychart')(window);
const anychartExport = require('anychart-nodejs')(anychart);

Answer 6 · 2017-12-31T07:31:25.000Z

@blackart I tried your code, now I get JSDOM is not a constructor error.

Answer 7 · 2017-12-31T08:08:21.000Z

@Ehsan1997 The code in my comment above works only with the 10 version and higher of "jsdom», as the 10 version of JSDOM API differs significantly.
In the first example from the readme, the code is actual for "jsdom" version 9 and it works fine.

Please check you jsdom, anychart and anychart-nodejs. Run this command - npm list in your example directory. It will show all modules and their versions.

Answer 8 · 2017-12-31T09:00:44.000Z

Ok, I just updated jsdom to 11.5.1 but now I get the same old error "this.sh.getBox is not function".
Anychart version is 8.1.0
Anychart-nodejs version is 1.3.1

Answer 9 · 2017-12-31T09:02:20.000Z

Okay, now it's working. Thanks for the help everyone.
I also updated anychart-nodes to 1.3.5.

Answer 10 · 2018-01-01T12:53:32.000Z

@Ehsan1997 I understand that the error stems from the jsdom being an earlier version than the current in the example. I was just pointing out that there was severe inconsistencies between the current version of jsdom and the version that must have been just while writing the examples. Will soon get a chance to see if it works better with the latest version patch. Thanks 👍