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);