AnyChart / AnyChart-NodeJS

ARCHIVED. AnyChart NodeJS module provides an easy way to generate SVG, JPG and PNG images of the charts on the server side.
https://www.anychart.com
Apache License 2.0
46 stars 8 forks source link

Couldnt get Graph legend shown on JPG using AnyChart-nodeJS #24

Open ChinHong-B opened 3 years ago

ChinHong-B commented 3 years ago

I am trying to insert the graph legend on the a combined graph (lines and bars). It seems i cant get the legend shown in any of the graph position. My code is as follow:

var jsdom = new JSDOM('

', {runScripts: 'dangerously'});

var window = jsdom.window;

var anychart = require('anychart')(window);
var anychartExport = require('anychart-nodejs')(anychart);
var dataSet = anychart.data.set([
    ['P1', 174, 5854, 3242],
    ['P2', 197, 4171, 3171],
    ['P3', 155, 1375, 700],
    ['P4', 15, 1875, 1287],
    ['P5', 66, 2246, 1856],
    ['P6', 85, 2696, 1126],
    ['P7', 37, 1287, 987],
    ['P8', 10, 2140, 1610],
    ['P9', 44, 1603, 903],
    ['P10', 322, 1628, 928]
  ]);

  var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
  var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });

  var chart = anychart.column();
  chart.legend(true)

  chart.title('Combination of Column, Spline-Area and Spline Chart');

  var scale = anychart.scales.linear();

  chart
    .yAxis(1)
    .title('Secondary Y-Axis')
    .orientation('right')
    .scale(scale);

  var columnSeries = chart.column(secondSeriesData);
  columnSeries.name('Column');

  var splineSeries = chart.splineArea(thirdSeriesData);
  splineSeries.name('Spline');

  var lineSeries = chart.spline(firstSeriesData);
  lineSeries.name('Line').yScale(scale).stroke('2.5 #ef6c00');

  chart.container('container');
  chart.bounds(0, 0, 1024, 800);

  chart.draw();
  anychartExport.exportTo(chart, 'jpg').then(function(image) {
    fs.writeFile( localDir+"/test.jpg", image, function(fsWriteError) {
      if (fsWriteError) {
        console.log(fsWriteError);
      } else {
        console.log('Complete');
      }
    });
  }, function(generationError) {
    console.log(generationError);
  });
Shestac92 commented 3 years ago

@ChinHong-B Can you provide a screenshot of the resulting chart? The code you provided renders the legend correctly, check the sample on PG.

ChinHong-B commented 3 years ago

test

Shestac92 commented 3 years ago

@ChinHong-B Hm, the chart is truncated at the bottom. Is it a screenshot of the part of the chart or it's the full result of the export?

ChinHong-B commented 3 years ago

Sorry. I was playing with the "Chart.Bound" hence it was truncated. See attached the redo version test

ChinHong-B commented 3 years ago

Any update on this? It that just me or it is a common problem?