vmpowerio / chartjs-node Goto Github PK

View Code? Open in Web Editor NEW

224.0 224.0 53.0 201 KB

Create Chart.js Charts Server-side

Home Page: http://chartjs-demo.vmpower.io

License: MIT License

JavaScript 100.00%

chartjs chartjs-node

chartjs-node's People

Contributors

Stargazers

Watchers

chartjs-node's Issues

When creating a line chart the background is always black

This is the code that I write:
`var chartNode = new ChartjsNode(600, 600);
return chartNode.drawChart({
type: 'line',
data: {
labels: ["14:00", "14:10", "14:20", "14:30", "14:40", "14:50", "15:00", "15:10", "15:20"],
datasets: [{
label: '# of Viewers',
data: [1000, 1150, 900, 700, 2000, 2200, 2200, 3000, 2500],
backgroundColor: [
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(75, 192, 192, 1)'
],
borderWidth: 1,
fill: true
}]
},
options: {

  responsive: false,
  animation:true
}

})`

but the result is always with black background, why?

Thanks

Pie charts are broken? Cannot read property 'concat' of undefined

Hi everybody 👋

I'm having an issue on trying to generate some pie/doughnut charts, am I doing something wrong here? The same data works on the live Demo and in my local with other kind of charts, except for the pies :(

This is the error that I get:

Unhandled rejection TypeError: Cannot read property 'concat' of undefined
    at updateConfig (/Users/theBigProject/node_modules/chart.js/src/core/core.controller.js:50:27)
    at Chart.update (/Users/theBigProject/node_modules/chart.js/src/core/core.controller.js:340:4)
    at Chart.construct (/Users/theBigProject/node_modules/chart.js/src/core/core.controller.js:121:7)
    at new Chart (/Users/theBigProject/node_modules/chart.js/src/core/core.js:7:8)
    at jsdom.envAsync.then.window (/Users/theBigProject/node_modules/chartjs-node/index.js:80:31)
    at tryCatcher (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/promise.js:638:18)
    at Object.done (/Users/theBigProject/node_modules/chartjs-node/node_modules/bluebird/js/release/nodeback.js:42:21)
    at process.nextTick (/Users/theBigProject/node_modules/jsdom/lib/jsdom.js:320:18)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

This is my sample code:

const ChartjsNode = require('chartjs-node');
let chartNode = new ChartjsNode(600, 600);
let chartJsOptions = {
        "type": "pie",
        "data": {
            "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            "datasets": [{
                "label": "# of Votes",
                "data": [12, 19, 3, 5, 2, 3],
                "backgroundColor": [
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)",
                    "rgba(255, 159, 64, 0.2)"
                ],
                "borderColor": [
                    "rgba(255,99,132,1)",
                    "rgba(54, 162, 235, 1)",
                    "rgba(255, 206, 86, 1)",
                    "rgba(75, 192, 192, 1)",
                    "rgba(153, 102, 255, 1)",
                    "rgba(255, 159, 64, 1)"
                ],
                "borderWidth": 1
            }]
        },
        "options": {
            "scales": {
                "yAxes": [{
                    "ticks": {
                        "beginAtZero": true
                    }
                }]
            }
        }
    };

    return chartNode.drawChart(chartJsOptions)
        .then(() => {
            return chartNode.getImageBuffer('image/png');
        })
        .then(buffer => {
            Array.isArray(buffer) // => true
            // as a stream
            return chartNode.getImageStream('image/png');
        })
        .then(streamResult => {
            // using the length property you can do things like
            // directly upload the image to s3 by using the
            // stream and length properties
            streamResult.stream // => Stream object
            streamResult.length // => Integer length of stream
            // write to a file
            return chartNode.writeImageToFile('image/png', './testimage.png');
        })
        .then(() => {
            chartNode.destroy();
        });

File save is not complete when the promise is resolved

I'm using chartNode.writeImageToFile
When the promise is resolved the file does exist, but with size 0.
After less than 1 second the file is actually written (not sure exactly how long, but sleep for 1 sec works for me)

chartjs-demo.vmpower.io is down

http://chartjs-demo.vmpower.io/ return 502 Bad Gateway

Window is undefined?

Hello! So, I have tried to use ChartJS on it's on package with no luck so I tried the this package but seem to be running into an error.

Here is my code:

``
const canvas = Canvas.createCanvas(800, 450);
const ctx = canvas.getContext('2d');

var myChart = new Chart(ctx,{
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
    responsive: false
  }
});


const ChartjsNode = require('chartjs-node');
var chartNode = new ChartjsNode(600, 600);
return chartNode.drawChart(myChart)
.then(() => {
    return chartNode.getImageBuffer('image/png');
})
.then(buffer => {
    Array.isArray(buffer) // => true
    return chartNode.getImageStream('image/png');
})
.then(streamResult => {
    streamResult.stream // => Stream object
    streamResult.length // => Integer length of stream
    return chartNode.writeImageToFile('image/png', './testimage.png');
})
.then(() => {
  Canvas.loadImage('./testimage.png').then(async hydra => {
    ctx.drawImage(hydra, 0, 0, canvas.width, canvas.height);``

Error is : ReferenceError: window is not defined

Any ideas?

Allow modification of global ChartJS variables

Hi there!

ChartJS has a number of global variables which would be very useful to be able to set so one doesn't have to set it for every chart they have created. It'd be very useful to have an (optional) way of passing these variables down to ChartJS.

Thanks for your time.

How to ensure destruction of chart?

Is there any way I can check that chart was successfully destroyed via chartNode.destroy() ?

How do I make sure that the generated images have the animation included in the chart options?

This is what my options field looks like:

    var options = {
          responsive: false,
          title: {
            display: true,
            text: 'Individual Shortfall percentage'
          },
            scales: {
                xAxes: [{
                    barPercentage: 0.4
                }],
                yAxes:[{
                    ticks:{
                      max: 100,
                      beginAtZero:true
                    }
                }]
            },
        animation: {
			"onComplete": function() {
				var chartInstance = this.chart,
				ctx = chartInstance.ctx;

				ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
				ctx.textAlign = 'center';
				ctx.textBaseline = 'bottom';

				this.data.datasets.forEach(function(dataset, i) {
				  var meta = chartInstance.controller.getDatasetMeta(i);
				  meta.data.forEach(function(bar, index) {
				    var data = dataset.data[index];
				    ctx.fillText(data + "%", bar._model.x, bar._model.y - 5);
				  });
				});
			}
        }
    }

Allow custom chart types

From what I understand it is not possible to add custom chart types to chartjs-node? At least not without running JSDom separately to import the ChartJS library.

Might I suggest something like this:

drawChart(configuration) {
  ...
  const Chartjs = require('chart.js');
  ...
  if (configuration.options.charts) {
    configuration.options.charts.forEach(chart => {
      Chartjs.defaults[chart.type] = chart.defaults || {};
      if (chart.baseType) {
        Chartjs.controllers[chart.type] = Chartjs.controllers[chart.baseType].extend(chart.controller);
      } else {
        Chartjs.controllers[chart.type] = Chartjs.DatasetController.extend(chart.controller);
      }
    });
  }
  ...
}

which can then be used like so:

var myChartOptions = {
  charts: [{
    type: 'custom',
    baseType: 'bar',
    controller: {
     draw: function(ease) {},
      ...
    },
    defaults: {
      ...
    },
  }]
}

Would a pull request for this be accepted possibly?

Change the background color of generated image

Hi,

I want to change the background color of the generated chart image.

With code like this:

 chartNode.on('beforeDraw', function(ChartJs) {
   var ctx = ChartJs.Chart.ctx;
   ctx.fillStyle = "white";
   ctx.fillRect(0, 0, ChartJs.chart.width, ChartJs.chart.height);
 });

However, I did not manage to access the ctx, from the provided ChartJs.

Can it be accessed? Or is there any other way to change the background color?

Regards,
Thomas

Any compatibility with time scale?

Hi everyone,
I'm trying to use chartjs-node to create time scale charts.
I can't get to have charts when I try to use the time scale, I got

ReferenceError: CanvasGradient is not defined.

Do you know if there is any possibilities for this..?
As far as I know, it's impossible to create a chart without the 'labels' option, and it has to have the same number of arguments than the 'data' option have.
In my case, I would also like to create a chart using points with x axis attribute
ex:
data: [{x: new Date, y: Number}]
I don't have any problems when using it in chart.js
Any ideas for chats-node..?
Thanks in advance!

Problem with font at Centos7

Hi, all!
Thank you for the very useful module:)
Pls, help with the following problem.
I use chartjs-node in my project. It perfectly works on my computer.

But it doesn't work correctly at a server.

I use node.js v8.12.0 at both sides. Mac OC at the computer. The Centos 7 at digitalocean.
How can I fix this bug at Centos 7.

ChartJs version

TypeError: Cannot read property 'plugins' of undefined

chartjs-node: 1.4.1
chart.js: 2.4.0

After setting devicePixelRatio, the chart shows misplacement

Hi, All:
I use chartjs-node in my project. I think the chart is blurry, so I set the devicePixelRatio to 2, and the chart is clearer, but there are some places that show misplacement, please see the image below:

I use node.js v10.4.0 and Centos 7, and below is the code:

    const chartNode = new ChartjsNode(816, 426, 1);
    let datasets = [
      {
        label: _config.pdftemplate.label,
        data: dataSet.y,
        backgroundColor: 'blue',
        borderColor: 'blue',
        fill: false,
        pointRadius: 0,
        borderWidth: 1,
        yAxisID: 'y-axis-1',
      },
    ];

    let yAxes = [
      {
        type: 'linear',
        display: true,
        position: 'left',
        id: 'y-axis-1',
        scaleLabel: {
          display: true,
          labelString: title,
        },
      },
    ];

    const chartJsOptions = {
      type: 'line',
      data: {
        labels: dataSet.x,
        datasets,
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            fontFamily: "'Helvetica', 'Arial'",
            boxWidth: 20,
          },
        },
        scales: {
          yAxes,
        },
      },
    };

    return chartNode
      .drawChart(chartJsOptions)
      .then(() => {
        // chart is created

        // get image as png buffer
        return chartNode.getImageBuffer('image/png');
      })
      .then(buffer => {
        // Array.isArray(buffer); // => true
        // as a stream
        chartNode.destroy();
        return `data:image/png;base64,${buffer.toString('base64')}`;
        // return chartNode.getImageStream('image/png');
      });

TypeError: chartNode.drawChart is not a function

copy and paste the code into editor.

get the error message:

TypeError: chartNode.drawChart is not a function

what is causing this ?

canvas background color

is it possible to change the gray background color to white to increase the contrast?

writeImageToFile uses an unsafe writing method to confirm write complete

Please review this:
http://www.daveeddy.com/2013/03/26/synchronous-file-io-in-nodejs/

fs. createWriteStream is synchronous in the sense that it blocks the event loop while it executes. It does NOT ask the Kernel to do a synchronous write to the underlying file system.

In my use case I'm generating a chart as a png and then uploading to Slack.

Approximately 10% of the time the file hasn't actually finished writing to disk before chartNode.writeImageToFile has returned it's promise. This causes the file upload to fail.

The write to disk should be changed to fs.open() or fs.fsync() to make sure the file is fully written to disk before returning a promise.

Here's a test script for the issue I'm describing.
https://gist.github.com/hparadiz/c20cc3fa1cf9aba7497a7fe89594bf65

Notice line 46 which should never actually be triggered but is.

502 Bad Gateway on the demo website

Support Chart.js@^2.4.0

Seems like when this package is used we get the error message:

ReferenceError: HTMLCanvasElement is not defined.

Which possibly suggests that the node bindings for canvas are somehow to working.

Bump chart.js dependency to 2.7.*

We have been running on the latest chartjs version now for a while with no issues, seems fine to increase version to 2.7.*.

Point to font files directly

Hi all,

Not an issue but a feature request. We're using chartjs-node and it's awesome, however we're using it on AWS Lambda and we are not able to install system fonts. the only way we can add fonts is by targeting the font file directly. Is this something that could be implemented to enable custom fonts when using serverless Lambda?

Thanks!

Blurry Images

CanvasGradient is not defined

I'm using chartjs-node to create a chart and send it in a nodejs Discord bot.

const chartNode = new ChartjsNode(300, 300);
chartNode.drawChart({
	type: 'line',
	data: {
		datasets: [{
			label: 'Ping',
			data: message.client.pings
		}]
	},
	options: {}
})
.then(() => {
	return chartNode.getImageBuffer('image/png');
}).then(stream => {
	message.channel.send({ files: [{ attachment: stream }] }).then(() => {
		chartNode.destroy();
	});
});

message.client.pings is an array of 3 numbers. The graph works fine with 1 and 2 numbers but once it gets 3 it errors with Unhandled rejection ReferenceError: CanvasGradient is not defined

Here is the whole error

1|martin   | Unhandled rejection ReferenceError: CanvasGradient is not defined
1|martin   |     at helpers.color (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.helpers.js:927:25)
1|martin   |     at ChartElement.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/elements/element.point.js:93:23)
1|martin   |     at ChartElement.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/controllers/controller.line.js:298:15)
1|martin   |     at Chart.drawDataset (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:573:20)
1|martin   |     at Chart.drawDatasets (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:548:9)
1|martin   |     at Chart.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:510:7)
1|martin   |     at Chart.render (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:477:8)
1|martin   |     at Chart.update (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:375:8)
1|martin   |     at Chart.construct (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:121:7)
1|martin   |     at new Chart (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.js:7:8)
1|martin   |     at jsdom.envAsync.then.window (/home/kye/apps/martin-discord-bot/node_modules/chartjs-node/index.js:80:31)
1|martin   |     at tryCatcher (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/util.js:16:23)
1|martin   |     at Promise._settlePromiseFromHandler (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:512:31)
1|martin   |     at Promise._settlePromise (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:569:18)
1|martin   |     at Promise._settlePromise0 (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:614:10)
1|martin   |     at Promise._settlePromises (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:693:18)```

Concurrent requests cause cause empty output

Using the code from the README.md.

Pie chart looks weird

This is what I get when trying to get a pie chart.
The code:

var chartJsOptions = {
  type: 'pie',
  data: {
    datasets: [
      {
        data: [10, 10, 20, 30, 40],
        backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue'],
        label: 'Dataset 1'
      }
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue']
  },
  options: {}
};

var chartNode = new ChartjsNode(800, 600);
return chartNode
  .drawChart(chartJsOptions)
  .then(() => {
    // chart is created

    // get image as png buffer
    return chartNode.getImageBuffer('image/png');
  })
  .then(buffer => {
    Array.isArray(buffer); // => true
    // as a stream
    return chartNode.getImageStream('image/png');
  })
  .then(streamResult => {
    // using the length property you can do things like
    // directly upload the image to s3 by using the
    // stream and length properties
    streamResult.stream; // => Stream object
    streamResult.length; // => Integer length of stream
    // write to a file
    return chartNode.writeImageToFile('image/png', './testimage.png');
  });```

Memory leak while generating a lot of server side graphs

Hi,

I am generating a lot of images on server side. During the process, Node is consuming a lot of memory (~ 1.5 GB).
I am calling chartNode.destroy(), still memory is not getting released.

Does anyone knows, where else there could be a memory leak?

PFB my code:

	var ChartjsNode = require('chartjs-node');
	var chartNode = new ChartjsNode(335, 250);

	return chartNode.drawChart(chartJsOptions)
		.then(() => {
			return chartNode.getImageDataUrl('image/jpeg')
		})
		// chart is created		
		// write to a file
		.then(() => {
			return chartNode.writeImageToFile('image/jpeg', 'temp/testimage' + GLOBAL_CHART_COUNT + '.jpeg')
		})
		.then((out_img) => {
			console.log(out_img)
			// chart is now written to the file path
			chartNode.destroy();
			chartJsOptions = null;
		});

Fix for black background on jpeg output

Hi, I tried to export the image as jpeg but because of the way canvas handles transparency, the background becomes black:

The fix is adding a white rectangle to the background, like this:

    plugins: {
      beforeDraw: function (chart, easing) {
        var ctx = chart.chart.ctx;
        ctx.save();
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
      }
    }

Maybe this info can be added to wiki or depending on the output, it can be added automatically.

error when using node-canvas alpha.8

my package.json versions

"canvas": "2.0.0-alpha.8"
"chart.js": "^2.7.1",
"chartjs-node": "^1.6.0",

When using "canvas": "^2.0.0-alpha.2", node-chartjs works like a charm, when using "canvas": "^2.0.0-alpha.8", item is null in acquireContext so item.length errors in platform.dom.js

	acquireContext: function(item, config) {
		if (typeof item === 'string') {
			item = document.getElementById(item);
		} else if (item.length) {
			// Support for array based queries (such as jQuery)
			item = item[0];
		}

		if (item && item.canvas) {
			// Support for any object associated to a canvas (including a context2d)
			item = item.canvas;
		}

		// To prevent canvas fingerprinting, some add-ons undefine the getContext
		// method, for example: https://github.com/kkapsner/CanvasBlocker
		// https://github.com/chartjs/Chart.js/issues/2807
		var context = item && item.getContext && item.getContext('2d');

		// `instanceof HTMLCanvasElement/CanvasRenderingContext2D` fails when the item is
		// inside an iframe or when running in a protected environment. We could guess the
		// types from their toString() value but let's keep things flexible and assume it's
		// a sufficient condition if the item has a context2D which has item as `canvas`.
		// https://github.com/chartjs/Chart.js/issues/3887
		// https://github.com/chartjs/Chart.js/issues/4102
		// https://github.com/chartjs/Chart.js/issues/4152
		if (context && context.canvas === item) {
			initCanvas(item, config);
			return context;
		}

		return null;
	},

Can someone please help me and tell me what im doing wrong?

Switch to canvas-prebuilt ?

Hello,

This is more an idea than an issue.

I would like to suggest using canvas-prebuilt rather than canvas as a dependency.

This will make this library more 'portable' and speed up the installation.

What do you think ?

Cannot read property 'toBlob' of undefined

Hi,

Code works for one chart but when I create more then I get this error. I am new to Node and thought that that it was missing the data?

How to set font file (foo.ttf)

Hi, everyone.
Thank you for the wonderful library.

If Japanese language is set as the label, it will not be output to the graph image.

const chartJsOptions = {
    type: 'line',
    data: {
        labels: ['8/1','8/2','8/3'],
        datasets: [{
                label: "チャート",   // Here!
                borderColor: 'rgb(255, 0, 0)',
                data: [20, 26, 12]
        }]
    }
}

Is there a way to set a font file(foo.ttf) or solve this?

environment

macOS 10.13.6
Node.js v10.1.0
chart.js 2.7.2
chartjs-node 1.7.1
cairo stable 1.14.12

Thanks.

ReferenceError: HTMLCanvasElement is not defined

Trying to apply this library to code ported from the front end:

const ChartjsNode = require('chartjs-node')

let chart = new ChartjsNode(300, 200)

let result = require('./data.json')

let data = {
  labels: result.map(d => d.date[ 2 ] + '-' + d.date[ 1 ]),
  datasets: [
    {
      label: 'x',
      backgroundColor: 'rgba(255, 99, 132, 0.7)',
      borderColor: 'rgba(255, 99, 132, 0.7)',
      data: result.map(d => d.x)
    },
    {
      label: 'y',
      backgroundColor: 'rgba(54, 162, 235, 0.7)',
      borderColor: 'rgba(54, 162, 235, 0.7)',
      data: result.map(d => d.y)
    },
    {
      label: 'z',
      backgroundColor: 'rgba(255, 206, 86, 0.7)',
      borderColor: 'rgba(255, 206, 86, 0.7)',
      data: result.map(d => d.z)
    }
  ]
}

let options = {
  fill: false,
  legend: {
    position: 'bottom'
  },
  elements: {
    line: {
      tension: 0,
      fill: false
    }
  }
}

chart.drawChart({ type: 'line', data: data, options: options })
  .then(() => {
    chart.writeImageToFile('image/png', './chart.png')
    chart.destroy()
  })
  .catch(error => console.log(error))

This results in ReferenceError: HTMLCanvasElement is not defined.

Cairo Errors when Trying to Run chartjs-node

Hello:

On trying your sample after installing Cairo on Mac OSX, I get this error:

W20170110-23:33:15.810(-5)? (STDERR) Assertion failed: (!scaled_font->cache_frozen), function _cairo_scaled_glyph_page_destroy, file cairo-scaled-font.c, line 459.
=> Exited from signal: SIGABRT

Any ideas?

Support Chart.js 2.5.0

I am getting: npm WARN [email protected] requires a peer of chart.js@<=2.4.* but none was installed.

I have 2.5.0 installed.

Why is <=2.4.* required? Why not ^2.4.0 which would allow upgrading until 3.0.0 ?

Unable to stream to concat-stream

I intend to output the stream to string using concat-stream instead of writing to file system, but it doesn't seems to work. below is the sample code:-

let concat = require('concat-stream');

...
.then(streamResult => {
    // using the length property you can do things like
    // directly upload the image to s3 by using the
    // stream and length properties
    streamResult.stream // => Stream object
    streamResult.length // => Integer length of stream
    
    let imgStr = '';
    let cs = concat(buffer => {
      imgStr = buffer.toString('base64');

      console.log(imgStr);
    });
      
    streamResult.stream.pipe(cs);
    
    // write to a file
    // return chartNode.writeImageToFile('image/png', './testimage.png');
})
.then(() => {
    // chart is now written to the file path
    // ./testimage.png
});

I am new to javascript and stream, and hope someone can give me a pointer. Thanks!

Add tooltips on the generated PNG

Hey,

I'm trying to generate the PNG with the tooltips on it. I tried a couple of different things.

First, I've tried adding an addHitRegion() canvas' method on the afterDraw plugin. But it looks like this function is not supported.

And then I tried to find any configuration of the tooltip that makes that for me. But I didn't find one

Is it currently possible to do that?

Can you use a version of canvas greater than alpha2?

Hi,

I have been working with chartjs-node for a few days now and locally it is working great but I have a problem when deploying to Heroku. It seems for Heroku I cannot deploy the alpha2 version of canvas.

I am a bit stuck what I can do to have this working with the latest version of canvas...when I try the latest version of canvas, I get the error Cannot read property 'length' of null which I think comes from line 128 length: buffer.length . Any help to get around this would be greatly appreciated as I am completely stuck :(.

Thanks in advance!

Support Chart.js 2.6.0

I have been using 2.6.0 for a bit with no issues so far, so would be great to get a dependency update to support it :)

Not being able to generate jpeg files

Hi,

Thanks for the great lib. I'm able to generate png's without any issue but I need to generate jpegs. My code is:

        var chartNode = new ChartjsNode(600, 600);
        let graphPNG = chartNode
          .drawChart(riepilogoGraph1Config)
          .then(() => {
            // chart is created

            // get image as png buffer
            return chartNode.getImageStream("image/png");
          })

If I change return chartNode.getImageStream("image/png"); to return chartNode.getImageStream("image/jpeg");

I get the following error:

C:\Users\barcia\Desktop\internal-api\node_modules\canvas\lib\jpegstream.js:44
    canvas[method](options.bufsize, options.quality, options.progressive, function(err, chunk){
                  ^

TypeError: canvas[method] is not a function
    at C:\Users\barcia\Desktop\internal-api\node_modules\canvas\lib\jpegstream.js:44:19
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Any tips on what I might be doing wrong?

Thanks

Unhandled rejection Error: Cannot find module '../build/Release/canvas.node'

Did any one get this issue ? .. I am getting this issue on my local when using chartjs-node api .. let me know if there's any solution .. thanks

create more than one image in the same ChartJSnode

How do you add extensions? e.g chartjs/chartjs-chart-financial

I have the basic built in charts working and generating images, but my ultimate goal is to generate candlestick charts server-side. I found https://github.com/chartjs/chartjs-chart-financial/ is an extension for chart.js, but having trouble implementing this following the current examples (plugins?). Can anyone please help?

Unable to load chartjs-financial file at all

Hey. I've been toying with this all day to no avail so far. I've been using chartjs-node with no issues but I can't even load chartjs-chart-financial.

I've built the library and even used their pre-provided one, but whenever I require() the file, it throws errors such as:

Window is not defined
Chart.Ticks is undefined
These errors are on the loading of this file, not even the execution of the function.

I can't seem to figure out what's wrong and all my workarounds aren't getting anywhere. I feel like I'm missing something right in front of my face, too.

TypeError: Cannot read property 'plugins' of undefined

I am getting the following error when using this library:

Unhandled rejection TypeError: Cannot read property 'plugins' of undefined
    at jsdom.envAsync.then.window (/home/prior/repositories/node-libpng/benchmark/node_modules/chartjs-node/index.js:86:43)
    at tryCatcher (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/promise.js:638:18)
    at Object.done (/home/prior/repositories/node-libpng/benchmark/node_modules/bluebird/js/release/nodeback.js:42:21)
    at process.nextTick (/home/prior/repositories/node-libpng/benchmark/node_modules/jsdom/lib/jsdom.js:320:18)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

My code looks like this:

        const colors = ["rgb(255, 128, 0)", "rgb(80, 80, 255)"];
        const options = {
            labels: ["Decode"],
            xAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: "OP/s (higher is better)"
                    }
                }
            ],
            datasets: suite.map((benchmark, index) => {
                return {
                    label: benchmark.name,
                    backgroundColor: colors[index],
                    data: [benchmark.hz]
                };
            })
        };
        const chartNode = new ChartjsNode(1000, 200);
        chartNode.drawChart(options)
            .then(() => chartNode.getImageBuffer('image/png'))
            .then(buffer => chartNode.getImageStream('image/png'))
            .then(streamResult => chartNode.writeImageToFile('image/png', './benchmark.png'))
            .catch(err => {
                console.error("Error drawing chart", err);
            })

Versions used:

    "chart.js": "2.6",
    "chartjs-node": "^1.6.1",

Remove hardcoded chart dimensions

The canvas object on line 43 of index.js contains hardcoded width and height values of 400px, overriding the ability to specify dimensions when creating a new ChartjsNode:

<canvas id="myChart" width="400" height="400" style="width:400px;height:400px">

Replacing the hardcoded values with this.width and this.height solves the problem.

[Solved] get garbled text after render chartjs unexpectedly

Hi everyone,

I run the sample and output image successful, but all text become garbled text in the image :

Did I miss something ?

[Environment]
OS : centos 7,5
Nodejs : v8.11.3
npm : 5.6.0

Thanks.

Live demo down

The URL for the "live demo" returns 502 Bad Gateway.

increase the radar chart Point label

I was create a radar chart but I can't use the config:
pointLabels: {
pointLabelFontSize: 12
}
Anyone has facing with this problem and could you give me some example about that.
Thanks in advance

Stacked bar with multiples bars widths

I needed to create a stacked bar chart with multiple bars widths so i came with this solution:

chartJsOptions = {
type: 'bar',

    data: {
        labels: [],
        datasets: [
            {
                label: "Ofertado",
                data: [],
                borderColor: 'rgb(83,141,213)',
                borderWidth: 3,
                xAxisID: 'x-axis-2'

            },

            {
                label: '',
                data: [],
                borderColor: '#e26b0a',
                borderWidth: 3,
                xAxisID: 'x-axis-1'
                // yAxisID: '1',
            },

            {
                label: '',
                data: [],
                borderColor: '#961709',
                xAxisID: 'x-axis-3',
                borderWidth: 3,
            },

        ],
    }
    ,
    options: {
        scales: {
            xAxes: [

                {
                    stacked: true,
                },
                {
                    id: 'x-axis-2',
                    display: false,
                    type: 'category',
                    barThickness: 50,
                    stacked: true,
                },
                {
                    id: 'x-axis-3',
                    type: 'category',
                    display: false,
                    barThickness: 40,
                    stacked: true,
                },
                {
                    id: 'x-axis-1',
                    type: 'category',
                    display: false,
                    barThickness: 30,
                    stacked: true,
                }
            ],
            yAxes: [{
                stacked: false,

            }
            ]
        },
        title: {
            display: true,
            text: ''
        }
    }
};

the widths worked but the bars are out of place and i can't get it right.

any solution?

Some valid configuration have no effect

I can't seem to remove the zero-line / border line of the axis.
I've tried this with several options that I thought all should work for the xAxes -> gridLines:
display: false, drawBorder: false, zeroLineWidth: 0, zeroLineColor: 'rgba(255, 255, 255, 0)'
I expected any of these configurations to give me the desired result, yet none work (together or separately).

vmpowerio / chartjs-node Goto Github PK

chartjs-node's People

Contributors

Stargazers

Watchers

Forkers

chartjs-node's Issues

Recommend Projects

Recommend Topics

Recommend Org