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

This topic contains 2 replies, has 3 voices, and was last updated by  gargprateek526 3 hours, 25 minutes ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21327

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

    #21339

    @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

    #25274

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

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

You must be logged in to reply to this topic.