I have used your code to generate your image which you gave as an example. Its not working at all.
Following is my code:
“use strict”;
var page = require(‘webpage’).create();;
page.viewportSize = { width: 600, height : 600 };
page.content = ‘<html><body><div id=”chartContainer” style=”height: 370px; width: 100%;”></div></body></html>’;
var now = new Date();
if(page.injectJs(‘/Downloads/canvasjs-2.3.1/jquery.canvasjs.min.js’)){ //inject the CanvasJS file. Set the file path accordingly
page.evaluate(function(fs) {
var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: false,
title:{
text: “Basic Column Chart”
},
data: [
{
type: “Column”,
dataPoints: [
{ label: “apple”, y: 10 },
{ label: “orange”, y: 15 },
{ label: “banana”, y: 25 },
{ label: “mango”, y: 30 },
{ label: “grape”, y: 28 }
]
}
]
});
chart.render();
chart.exportChart({format: “png”});
});
}
//Use clipRect if only a part of page has to be captured
var clipRect = page.evaluate(function() {
return document.getElementById(“chartContainer”).getBoundingClientRect();
});
page.clipRect = {
top : clipRect.top,
left : clipRect.left,
width : clipRect.width,
height : clipRect.height
};
//page.render(); //uncomment this line to render the entire web page.
console.log(now);
page.render(“BasicColumnChart”+” ” +now.getHours()+”h “+now.getMinutes()+”m “+now.getSeconds()+”s “+”.jpg”); //This line captures required parts of the page, comment this line to capture the entire page.
//Here, the image is stored in the same directory as of Phantom Project. Specify the required location to save the image Ex: D:/charts/BasicColumnChart.png
phantom.exit(0);
