Cannot read property split of null #17

toshiSat · 2018-10-08T19:17:07Z

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

The text was updated successfully, but these errors were encountered:

Shestac92 · 2018-10-09T02:50:59Z

@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.

toshiSat · 2018-10-09T10:07:30Z

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
    })

toshiSat · 2018-10-09T11:31:47Z

chart.pdf

Shestac92 · 2018-10-10T03:07:06Z

@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.

toshiSat · 2018-10-13T09:44:04Z

My librsvg version is 2.40.13-3

Shestac92 · 2018-10-31T09:35:44Z

@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!

toshiSat · 2018-10-31T10:47:38Z

I'm on linux, so I think the version numbers are a bit different because it says I'm up to date

Shestac92 · 2018-11-01T05:14:24Z

@JacobCooley unfortunately, the apt shows the 2.40.13 as the latest, but you can 2.40.20 here.

chandregowda · 2018-12-01T12:56:26Z

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);
});

Shestac92 · 2018-12-03T02:24:39Z

@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.

chuakc92 · 2019-02-01T10:01:12Z

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

Shestac92 · 2019-02-04T02:19:39Z

@chuakc92
Please, check the installation of librsvg by brew list, this should library should in the list of installed formulas

binaryMaven · 2019-02-06T05:45:18Z

@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

Shestac92 · 2019-02-06T07:12:35Z

@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?

binaryMaven · 2019-02-06T08:48:18Z

@Shestac92

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

Shestac92 · 2019-02-07T04:09:30Z

@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.

toshiSat · 2019-02-08T14:55:40Z

I was able to get it working by using ImageMagick 7.0.7-39 and using "anychart-nodejs": "1.3.0-dev-preview-4",

chuakc92 · 2019-02-11T02:10:05Z

@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

gansky-alexander · 2020-06-30T23:40:20Z

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 zlib

Code 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

gansky-alexander · 2020-07-02T08:38:11Z

@Shestac92 , could you please help me with the issue ?

Shestac92 · 2020-07-03T02:44:26Z

@gansky-alexander
The solution was provided above in this thread - #17 (comment)

dawadam · 2023-07-29T15:54:59Z

Same problem with :

      "anychart": "^8.11.1",
      "anychart-nodejs": "^1.3.8",

Error is :

/node_modules/anychart-nodejs/lib/anychart-node.js:155
  var fontsArr = fontFamily.split(', ');
                            ^
TypeError: Cannot read properties of null (reading 'split')
    at HTMLUnknownElement.getBBox (/node_modules/anychart-nodejs/lib/anychart-node.js:155:29)

anupanup2001 · 2023-12-14T19:49:04Z

Can this please be fixed? downgrading anychart to 8.3.0 is not feasible for my project as it uses newer features of anychart like setting maximumGap on the stock charts.

Shestac92 self-assigned this Oct 9, 2018

Shestac92 mentioned this issue Apr 1, 2019

Cannot get AnyChart to work on Elastic Beanstalk / AWS #19

Closed

Shestac92 mentioned this issue Jun 14, 2019

Error: Stream yields empty buffer #20

Closed

Shestac92 mentioned this issue Jul 31, 2019

Error on example #21

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read property split of null #17

Cannot read property split of null #17

toshiSat commented Oct 8, 2018

Shestac92 commented Oct 9, 2018

toshiSat commented Oct 9, 2018 •

edited

Loading

toshiSat commented Oct 9, 2018

Shestac92 commented Oct 10, 2018

toshiSat commented Oct 13, 2018

Shestac92 commented Oct 31, 2018

toshiSat commented Oct 31, 2018

Shestac92 commented Nov 1, 2018

chandregowda commented Dec 1, 2018 •

edited

Loading

Shestac92 commented Dec 3, 2018

chuakc92 commented Feb 1, 2019

Shestac92 commented Feb 4, 2019

binaryMaven commented Feb 6, 2019 •

edited

Loading

Shestac92 commented Feb 6, 2019

binaryMaven commented Feb 6, 2019

Shestac92 commented Feb 7, 2019

toshiSat commented Feb 8, 2019

chuakc92 commented Feb 11, 2019

gansky-alexander commented Jun 30, 2020 •

edited

Loading

gansky-alexander commented Jul 2, 2020

Shestac92 commented Jul 3, 2020

dawadam commented Jul 29, 2023

anupanup2001 commented Dec 14, 2023

Cannot read property split of null #17

Cannot read property split of null #17

Comments

toshiSat commented Oct 8, 2018

Shestac92 commented Oct 9, 2018

toshiSat commented Oct 9, 2018 • edited Loading

toshiSat commented Oct 9, 2018

Shestac92 commented Oct 10, 2018

toshiSat commented Oct 13, 2018

Shestac92 commented Oct 31, 2018

toshiSat commented Oct 31, 2018

Shestac92 commented Nov 1, 2018

chandregowda commented Dec 1, 2018 • edited Loading

Shestac92 commented Dec 3, 2018

chuakc92 commented Feb 1, 2019

Shestac92 commented Feb 4, 2019

binaryMaven commented Feb 6, 2019 • edited Loading

Shestac92 commented Feb 6, 2019

binaryMaven commented Feb 6, 2019

Shestac92 commented Feb 7, 2019

toshiSat commented Feb 8, 2019

chuakc92 commented Feb 11, 2019

gansky-alexander commented Jun 30, 2020 • edited Loading

gansky-alexander commented Jul 2, 2020

Shestac92 commented Jul 3, 2020

dawadam commented Jul 29, 2023

anupanup2001 commented Dec 14, 2023

toshiSat commented Oct 9, 2018 •

edited

Loading

chandregowda commented Dec 1, 2018 •

edited

Loading

binaryMaven commented Feb 6, 2019 •

edited

Loading

gansky-alexander commented Jun 30, 2020 •

edited

Loading