AnyChart/AnyChart-NodeJS

Blank chart when creating a timeline

GGKLuke opened this issue · 2 comments

GGKLuke commented

When` using the latest version of anychart, im running into a issue with creating a timeline image:

const fs = require('fs')
const path = require('path')

// Require JSDOM Class.
const JSDOM = require('jsdom').JSDOM
// Create instance of JSDOM.
const jsdom = new JSDOM('<body><div id="container"></div></body>', {runScripts: 'dangerously'})
// Get window
const window = jsdom.window

// require anychart and anychart export modules
const anychart = require('anychart')(window)
const anychartExport = require('anychart-nodejs')(anychart)

var chart = anychart.column();

// create data

var rangeData1 = [
    ["Task 1", Date.UTC(2004,0,4), Date.UTC(2004,7,1)],
    ["Task 2", Date.UTC(2004,7,1), Date.UTC(2005,8,10)]
  ];
  
  var rangeData2 = [
    ["New Task 1", Date.UTC(2005,10,1), Date.UTC(2006,5,1)],
    ["New Task 2", Date.UTC(2006,5,15), Date.UTC(2006,11,1)]
  ];
  
  var momentData1 = [
    [Date.UTC(2004,2,21), "Meeting 1"],
    [Date.UTC(2005,3,19), "Meeting 2"],
    [Date.UTC(2006,1,1),  "Meeting 3"]
  ];
  
  var momentData2 = [
    [Date.UTC(2004,5,12), "Training 1"],
    [Date.UTC(2005,5,1),  "Training 2"],
    [Date.UTC(2006,1,26), "Training 3"]
  ];
  
  // create a chart
  var chart = anychart.timeline();
  
  // create the first range series
  var rangeSeries1 = chart.range(rangeData1);
  
  // create the second range series
  var rangeSeries2 = chart.range(rangeData2);
  
  // create the first moment series
  var momentSeries1 = chart.moment(momentData1);
  
  // create the second moment series
  var momentSeries2 = chart.moment(momentData2);
  
  // set the container id
  chart.container("container");
  
  // initiate drawing the chart  
  chart.draw();


  
anychartExport.exportTo(chart, 'jpeg').then(function(image) {
    fs.writeFile(path.join(__dirname, 'example.jpg'), image, function(fsWriteError) {
      if (fsWriteError) {
        console.log(fsWriteError);
      } else {
        console.log('Complete');
      }
    });
    
  }, function(generationError) {
    console.log(generationError);
  });
Shestac92 commented

@GoodGuyKali

  1. You declare the chart variable twice. Remove var chart = anychart.column(); from you code
  2. The rest of the code is ok. Can you provide more details on the issue? Do you get any errors or warnings in the terminal?
GGKLuke commented

Thanks for the response,
I removed the extra chart variable, and the issue is still there.
the issue is that when drawing the chart, nothing is changed inside the jsdom document. When serializing the JSDom object, it has got alot of empty divs and other elements.

<html><head><style type="text/css">.anychart-credits{position:absolute;overflow:hidden;right:9px;bottom:6px;height:10px;}.anychart-credits a {text-decoration:none;}.anychart-credits-logo{border:none;margin-right:2px;height:10px;width:10px;display:inline-block;vertical-align:top;}.anychart-credits-text{font-size:10px;line-height:9px;display:inline-block;vertical-align:top;text-decoration:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#929292;height:10px;}</style></head><body><div id="container"><div style="position: relative; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;"><svg xmlns="http://www.w3.org/2000/svg" border="0" data-ac-wrapper-id="12" width="100%" height="100%" style="display: block;" class="anychart-ui-support" ac-id="ac_stage_2e3b279d_0" role="presentation"><defs></defs><g data-ac-wrapper-id="13" id="ac_layer_2e3b279d_1"><g data-ac-wrapper-id="14" id="ac_chart_2e3b279d_2"></g></g></svg><div class="anychart-credits"><a href="https://www.anychart.com/?utm_source=trial" title="AnyChart - JavaScript Charts designed to be embedded and integrated, v8.10.0.1933" target="_blank"><span class="anychart-credits-text">AnyChart Trial Version</span></a></div></div></div><svg width="0" height="0" style="position: absolute; left: -99999px; top: -99999px;"><text></text><defs></defs><g></g><g></g></svg></body></html>

I get no errors in my terminal.