Cannot read property split of null
toshiSat opened this issue · 23 comments
I don't think there is a way to go back to -11_1 so I think -12 is the only option
I upgraded imagemagick to the latest version and am getting this error
(node:29179) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'split' of null
at HTMLUnknownElement.getBBox (/mnt/c/Projects/cryptoBot/node_modules/anychart-nodejs/lib/anychart-node.js:155:29)
It seems in the getBBox function it's looking for a fontfamily and returning null. Any idea why this would be happening?
It is happening on char.draw()
It is happening with many different example charts I've found for anycharts including the one on this repo
It is still happening if I downgrade to 1.3.6
I have reformatted Ubuntu and it's happening on 16.04 and 18.04.
Here's my code just for sanity check. I'm just trying the example chart just to get it running
var jsdom = new JSDOM('<body><div id="container"></div></body>', {runScripts: 'dangerously'});
var window = jsdom.window;
const anychart = require('anychart')(window)
var chart = anychart.pie([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
chart.title("Top 5 pancake fillings");
// set the container where chart will be drawn
chart.container("container");
// draw the chart on the page
chart.draw();
EDIT:
I have started using the 1.3.0-dev-preview-4 build for anycharts-nodejs and this error is gone. Only I am getting
Error: Stream yields empty buffer
at Socket. (/mnt/c/Projects/cryptoBot/node_modules/gm/lib/command.js:57:17)
when saving my image. It works with svg and pdf, but I need either jpg, or png
@JacobCooley
Thank you for your report!
The problem comes with the update of AnyChart 8.4.0
As a temporary solution, you can downgrade your AnyChart npm module down to 8.3.0 version.
Soon we will provide the fix for the AnyChart-NodeJS according to changes in AnyChart 8.4.0 library.
I will notify you when the fix becomes available.
Great! The errors are gone! :D
There's one issue now though, For png and jpg, my charts are generating, but my legend and labels are not.
Have any clue why this would be?
const yScale1 = anychart.scales.linear()
chart.yAxis(0).title("USD Price")
chart.yAxis(0).scale(yScale1)
const series1 = chart.line(formattedData)
series1.stroke('#00cc99')
series1.yScale(yScale1)
series1.name('USD Price')
chart.xAxis(0).labels().offsetX(25)
chart.xAxis(0).labels().width(100)
chart.xAxis(0).labels().format(function (){
let value = this.value
value = timeConverter(value, timeData)
return value
})
chart.yAxis(0).labels().format(function (){
return '$' + this.value
})
@JacobCooley
Hm, this is strange behavior. We have been reported a similar problem, but it was solved. Probably we should check the required version of librsvg or other third-party libraries.
I will investigate it and update you as I get results.
My librsvg version is 2.40.13-3
@JacobCooley
Please, try the librsvg 2.44.8 version which is the latest. We made test and this version works properly.
This should solve your issue!
I'm on linux, so I think the version numbers are a bit different because it says I'm up to date
@JacobCooley unfortunately, the apt shows the 2.40.13 as the latest, but you can 2.40.20 here.
It worked fine when I added anychart version 8.3.0 explicitly.
"dependencies": {
"anychart-nodejs": "^1.3.8",
"anychart": "8.3.0"
}
Issue still exists in latest version for anychart - 8.4.2
I had downloaded this module earlier on 23-09-2018 and npm version "anychart-nodejs": "^1.3.8" is working fine in the folder where npm_modules was synced on that day.
OS: Windows 10, 64 bit
Node version 9.10.0
The same code does not work if I create new project with just one npm module dependency "anychart-nodejs": "^1.3.8" in package.json
"dependencies": {
"anychart-nodejs": "^1.3.8"
}
I get error as below:
D:\rnd\anychart\node_modules\anychart-nodejs\lib\anychart-node.js:155
var fontsArr = fontFamily.split(', ');
^
TypeError: Cannot read property 'split' of null
at HTMLUnknownElement.getBBox (D:\rnd\anychart\node_modules\anychart-nodejs\lib\anychart-node.js:155:29)
at zca (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:480:142)
at $.Ku.$.g.X (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:1245:79)
at tv (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:496:132)
at RJ.$.g.uD (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:1326:303)
at RJ.$.g.jk (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:1287:207)
at RJ.$.g.X (D:\rnd\anychart\node_modules\anychart\dist\js\anychart-bundle.min.js:1288:471)
at Object.<anonymous> (D:\rnd\anychart\chart.js:42:7)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
Sample code to create pie is used
// create and a chart to the jsdom window.
// chart creating should be called only right after anychart-nodejs module requiring
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('anychart123.jpg', image, function (fsWriteError) {
if (fsWriteError) {
console.log(fsWriteError);
} else {
console.log('Complete');
}
});
}, function (generationError) {
console.log(generationError);
});
@chandregowda
This is a known issue which came with 8.4.0 update and later versions. We recommend using 8.3.0 version as a temporary workaround. We are working on the fix to solve this issue in 8.4* versions.
As the fix becomes available we will update this issue.
I'm using v8.3.0 on OSX and deploying to Google Firebase Functions and I'm still receiving this issue, as well as a warning Warning! Please install rsvglib utility. (https://github.com/AnyChart/AnyChart-NodeJS).
I've already followed the instructions on the website and installed using
brew install imagemagick librsvg
@chuakc92
Please, check the installation of librsvg by brew list, this should library should in the list of installed formulas
@Shestac92
Imagemagick version
Version: ImageMagick 7.0.8-26 Q16 x86_64 2019-02-06 https://imagemagick.org
Copyright: © 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI OpenMP
Delegates (built-in): fontconfig freetype png x zlib
OS Details
Linux XXX.XXX.XXX 4.9.0-6-amd64 #1 SMP Debian 4.9.82-1+deb9u2 (2018-02-21) x86_64 GNU/Linux
Anychart installations:
anychart: "8.3.0"
anychart-nodejs: "^1.3.8"
LIBRSVG
dpkg -l | grep librsvg
ii librsvg2-2:amd64 2.40.16-1+b1 amd64 SAX-based renderer library for SVG files (runtime)
ii librsvg2-bin 2.40.16-1+b1 amd64 command-line and graphical viewers for SVG files
ii librsvg2-common:amd64 2.40.16-1+b1 amd64 SAX-based renderer library for SVG files (extra runtime)
ii librsvg2-dev:amd64 2.40.16-1+b1 amd64 SAX-based renderer library for SVG files (development)
Code
var window = jsdom.window;
// require anychart and anychart export modules
var anychart = require('anychart')(window);
var anychartExport = require('anychart-nodejs')(anychart);
var createFocusedBenchmarkChart = function (data) {
var FocusedBenchmarkChartData = [];
var total = 0;
for (var i = 0; i < data.length; i++) {
total = total + data[i].y;
}
for (var j = 0; j < data.length; j++) {
var per = (((data[j].y) / total) * 100).toFixed(2);
FocusedBenchmarkChartData.push({
x: data[j].name + ' ' + per,
value: per
});
}
var donutChart = anychart.pie(FocusedBenchmarkChartData);
donutChart.bounds(0, 0, 666, 733);
donutChart.container('container');
donutChart.innerRadius('75%');
donutChart.radius("30%");
donutChart.labels().position("outside");
donutChart.labels().fontSize(18);
donutChart.connectorStroke({
color: "#595959",
thickness: 3,
dash: "2 2"
});
var donutLegend = donutChart.legend();
donutLegend.enabled(true);
donutLegend.width(666);
donutLegend.fontSize(16);
donutLegend.itemsLayout('horizontal-expandable');
donutLegend.position('bottom');
donutLegend.align('center');
// no data label
var noDataLabel = donutChart.noData().label();
noDataLabel.enabled(true);
noDataLabel.text("Data not available for this chart");
donutChart.draw();
var imageBuffer = anychartExport.exportToSync(donutChart, 'png');
var bitmap = imageBuffer.toString('base64');
return bitmap;
Error:
Cannot read property 'toString' of null
@abhishekverma3189
Please, can you try to write PNG image of the chart using fs? Just like it is shown in the quick start article of the repo. Does it work in your environment?
Please, can you try to write PNG image of the chart using fs? Just like it is shown in the quick start article of the repo. Does it work in your environment?
anychartExport.exportTo(chart, 'jpg').then(function (image) {
fs.writeFile('anychart.jpg', image, function (fsWriteError) {
if (fsWriteError) {
console.log("FS WRITE ERROR -> ",fsWriteError);
} else {
console.log('Complete');
}
});
}, function (generationError) {
console.log("generationError -> ",generationError);
return null;
});
OUTPUT
generationError -> Error: Stream yields empty buffer
@abhishekverma3189 Please, try to downgrade the Imagemagick to 7.0.8-11_1 version. The newer version leads to this error. The same problem was discussed in this issue.
I was able to get it working by using ImageMagick 7.0.7-39 and using "anychart-nodejs": "1.3.0-dev-preview-4",
@Shestac92
cairo giflib jpeg libtiff pixman fontconfig glib libcroco libtool pkg-config freetype graphite2 libffi little-cms2 webp fribidi harfbuzz libomp openjpeg xz gdk-pixbuf icu4c libpng pango gettext imagemagick librsvg pcre
Hello, guys !
Could you please help me with issue with rendering of chart ?
package.json
"dependencies": {
"anychart": "8.8.0",
"anychart-nodejs": "1.3.6"ImageMagick version
convert -version
Version: ImageMagick 7.0.10-22 Q16 x86_64 2020-06-30 https://imagemagick.org
Copyright: © 1999-2020 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI OpenMP(4.5)
Delegates (built-in): fontconfig freetype png x zlibCode itself (an example from your site)
// require file system and jsdom
var fs = require('fs');
// For jsdom version 10 or higher.
// Require JSDOM Class.
var JSDOM = require('jsdom').JSDOM;
// Create instance of JSDOM.
var jsdom = new JSDOM('<body><div id="container"></div></body>', {runScripts: 'dangerously'});
// Get window
var window = jsdom.window;
// For jsdom version 9 or lower
// var jsdom = require('jsdom').jsdom;
// var document = jsdom('<body><div id="container"></div></body>');
// var window = document.defaultView;
// require anychart and anychart export modules
var anychart = require('anychart')(window);
var anychartExport = require('anychart-nodejs')(anychart);
// create and a chart to the jsdom window.
// chart creating should be called only right after anychart-nodejs module requiring
var chart = anychart.pie([10, 20]);
chart.bounds(0, 0, 800, 600);
chart.container('container');
chart.draw();
// generate JPG image and save it to a file
anychartExport.exportTo(chart, 'png').then(function(image) {
fs.writeFile('anychart.png', image, function(fsWriteError) {
if (fsWriteError) {
console.log(fsWriteError);
} else {
console.log('Complete');
}
});
}, function(generationError) {
console.log(generationError);
});Error (for node version 10)
/Projects/node_modules/anychart-nodejs/lib/anychart-node.js:155
var fontsArr = fontFamily.split(', ');
^
TypeError: Cannot read property 'split' of null
Then i reinstalled to 12 and got next one
Error: 1
Description: Container is not set or can not be properly recognized. Use container() method to set it.
TypeError: Cannot read property 'split' of null
@Shestac92 , could you please help me with the issue ?
@gansky-alexander
The solution was provided above in this thread - #17 (comment)