You must be logged in to post your query.
Home › Forums › Feature Requests & Feedback › Save image automatically on server end
Tagged: your code not working
I want to save image on server end so that i can use it in my email.
@richa2112dawar,
In order to render chart on the server side you would require a headless browser like PhantomJS. Here is an article which might help.
Please take a look at this sample PhantomJS project, that captures the chart image from web page and saves it to a particular location. Please refer to instructions.txt file for clear understanding.
__ Priyanka M S Team CanvasJS
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);
@gargprateek526,
You are passing Column as chart-type in the code shared above which is not a valid chart-type. Changing chart-type from Column to column should work fine in your case. Please take a look at this updated sample.
Column
column
Please refer to this documentation page for more information about chart-types available in CanvasJS.
—– Manoj Mohan Team CanvasJS
Hi. The website I’m trying to create charts to email is a shared linux server which doesn’t have phantomjs or any headless browser software installed. Is there any other way (preferably in php) to achieve this?
@arthurtechninjas-co-za,
CanvasJS is a javascript library that runs on the client-side(in browser). To save an image on server side, you need to run CanvasJS library on a headless browser. Please refer to this Stack Overflow thread to know more about running headless browser in shared hosting.
—- Manoj Mohan Team CanvasJS
You must be logged in to reply to this topic. Login/Register