Home Forums Feature Requests & Feedback Save image automatically on server end

Save image automatically on server end

Viewing 6 posts - 1 through 6 (of 6 total)
  • #21327

    I want to save image on server end so that i can use it in my email.



    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.

    Basic Column Chart

    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,
    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.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.
    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




    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.

    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?



    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.