update to chart.js 2? - Githubissues

diwu1989 commented 8 years ago

Will you be able to upgrade to chartjs 2.0 when it comes out?

piti118 commented 8 years ago

This is a hack I put together to for 2.0 with no modification to the source.

var jsdom = require('jsdom');
var _ = require('lodash')

global.document = jsdom.jsdom('<!doctype html><html><body><div style="height: 200px; width: 200px"><canvas id="main" width="200" height="200"></canvas></div></body></html>');
global.window = document.defaultView;

var Canvas = require('canvas')
  , canvas = new Canvas(200, 200, 'png')
  , ctx = canvas.getContext('2d');
var Chart = require('chart.js')
console.log(ctx)
ctx.canvas = _.extend( document.getElementById("main"), ctx.canvas)
console.log(ctx)

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

      datasets: [{
          backgroundColor: '#FF0000',
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3]
      }]
  },

  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero:true
              }
          }]
      },
      backgroundColor: 'rgba(63, 191, 150, 0.3)',
      responsive: false,
      animation: false
  }
});
console.log(ctx)
var fs = require('fs')
fs.writeFile('out.png', canvas.toBuffer());

out

Ponjimon commented 8 years ago

@piti118 I get this error with your "hack"


/root/node/watchbot/node_modules/chart.js/src/core/core.js:39
                this.originalCanvasStyleWidth = context.canvas.style.width;
                                                                    ^
TypeError: Cannot read property 'width' of undefined
    at new Chart (/root/node/watchbot/node_modules/chart.js/src/core/core.js:39:55)
    at getChart (/root/node/watchbot/app.js:341:17)
    at DiscordClient.<anonymous> (/root/node/watchbot/app.js:63:10)
    at DiscordClient.emit (events.js:107:17)
    at checkForAllServers [as _onTimeout] (/root/node/watchbot/node_modules/discord.io/lib/index.js:1030:20)
    at Timer.listOnTimeout (timers.js:119:15)

:(

silverma commented 7 years ago

@piti118 thank you, that worked great for me! BTW, I noticed that my code based on the above seemed to break with chart.js version 2.4 that was recently released. Not sure if it's directly related your workaround, but going back to 2.3 seemed to fix it.

Thank you!

my-archives / nchart

update to chart.js 2? #11