1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    3
    Vote Rating
    0
    jagadeeshkasa is on a distinguished road

      0  

    Default Unanswered: How to get chart as Image

    Unanswered: How to get chart as Image


    I draw line,bar,column,pie charts etc using extjs4 charts .
    Now i want those graphs to download as jpeg/png or like an image by click on download button. and save those image in server.
    How to get Image from those graphs and store.

  2. #2
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    636
    Answers
    9
    Vote Rating
    15
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default Converts the canvas to a PNG

    Converts the canvas to a PNG


    For your use-case, it's not practical to upload an image to the server programmatically. Regarding enabling the user to "download" an image of the chart, you could look at using the canvas feature to convert the data to a base64 URL. Check this out:

    PHP Code:
    /**
     * Converts the canvas to a PNG and modifies the document location to it
     
     * @param canvasElement
     */
    function convertToPng canvasElementoutputElement )
    {
       var 
    canvas document.getElementById(canvasElement);
       var 
    url canvas.toDataURL();
       
    /*
       var img = document.createElement("img");
       img.src = url;
       // document.location.href = strDataURI;
       
       var output = document.getElementById(outputElement);
       while (output.hasChildNodes())
       {
            output.removeChild(output.firstChild);
       }
       output.appendChild(img);
       */
       
    newwindow window.open(url'canvas generated image');

    Here's some recommended reading: http://msdn.microsoft.com/en-us/ie/dd797413
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...
    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.
    ================================================
    Simple. Enjoy.

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    3
    Vote Rating
    0
    jagadeeshkasa is on a distinguished road

      0  

    Default


    i place one button to download. when i click on that button it is saying
    canvas
    .toDataURL() is not function.
    can u give complte code to download as image.

Thread Participants: 1