Created
September 17, 2016 00:54
-
-
Save sedouard/d38cef864c66686bcbfa1d458710c67b to your computer and use it in GitHub Desktop.
Using Canvas.js in Node.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Using the node canvas module | |
var fs = require('fs'); | |
var jsdom = require("jsdom"); | |
jsdom.defaultDocumentFeatures = { | |
FetchExternalResources: ["script"], | |
ProcessExternalResources: true | |
}; | |
jsdom.env('<html><body><div id="chart-div" style="font-size:12; width:800px; height:800px;"><canvas id="myChart" width="400" height="400" style="width:400px;height:400px"></canvas>></div></body></html>', | |
['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js'], | |
function (err, window) { | |
global.window = window; | |
global.document = window.document; | |
// Comes from the Chart.js link above just like <script src="... | |
global.Chart = window.Chart; | |
var canvas = document.getElementById('myChart'); | |
var 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: { | |
responsive: false, | |
animation: false, | |
width: 400, | |
height: 400, | |
scales: { | |
yAxes: [{ | |
ticks: { | |
beginAtZero:true | |
} | |
}] | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment