Results 1 to 6 of 6

Thread: Save charts as image

  1. #1
    Sencha User
    Join Date
    Jan 2015
    Posts
    104
    Answers
    11
    Vote Rating
    40
      0  

    Default Answered: Save charts as image

    Hi guy,

    I'm using EXTJS 5.1, and I have a panel with many charts in it. I would like to save as image (jpg or png):
    • The panel containing all the charts
    • If the panel cannot be saved, just on chart then
    I know that there is the method chart.save() in Extjs 4, but it isn't present in Extjs 5.1 ^^ !
    Do you guys have any ideas on how I could save the panel or at least on chart?

    Thanks in advance !

  2. Hi!


    I do as follows (for a single chart):


    Code:
    dockedItems: [{
            xtype: 'toolbar',
            items: [{
                        xtype: 'button',
                        text: 'Download as PNG',
    
                        handler: function(btn, e, eOpts) {
                            btn.up('panel').down("cartesian").download({
                                filename: "theName",
                            //  format: 'jpeg',
                                format: 'png'
                            })
                        }
                    }, {
                        xtype: 'button',
                        text: 'Preview chart',
                        handler: function(btn, e, eOpts) {
                            btn.up('panel').down("cartesian").preview()
                        }
                    }]
                }]
    I hope this helps!

  3. #2
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22
    Vote Rating
    41
      0  

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
      0  

    Default

    You can either do

    chart.preview(); which will bring up a window that you can right click and save the image

    OR

    In JS
    Code:
    currentChart.getImage().data.replace('data:image/png;base64,', '');
    If sending to java
    Code:
    // Save Base64 To Image
        public String saveBase64ToImage(SenchaChart senchaChart) {
            try {
                Long chartWidth = senchaChart.getWidth() + 100;
                Long chartHeight = senchaChart.getHeight() + 100;
    
    
                // Set Save File Base Path
                StringBuilder filePath = new StringBuilder();
                StringBuilder uri = new StringBuilder();
                filePath.append(this.getRealPath());
                filePath.append("/");
                filePath.append(this.getDownloadFolder());
                File tempFolder = new File(filePath.toString());
                if (!tempFolder.exists()) {
                    tempFolder.mkdir();
                }
    
    
                // Set FileName
                StringBuffer fileName = new StringBuffer();
                fileName.append("Apogee_Report");
                fileName.append("_");
                fileName.append(new Date().getTime());
                fileName.append(".png");
    
    
                // Set Created Image File Path
                uri.append(this.getRealPath());
                uri.append("/");
                uri.append(this.getDownloadFolder());
                uri.append("/");
                uri.append(fileName);
    
    
                // Create Image File
                byte[] data = Base64.decodeBase64(senchaChart.getSvg().getBytes());
                FileOutputStream stream = new FileOutputStream(uri.toString());
                stream.write(data);
    
    
                return uri.toString();
            } catch (Exception e) {
                throw new AirException(e);
            }
        }

  5. #4
    Sencha User
    Join Date
    Jan 2015
    Posts
    104
    Answers
    11
    Vote Rating
    40
      0  

    Default

    Hi The0s,Thanks a lot for your answer !! If I understand correctly, if I want to save my panel containing my charts, I first have to render the panel and it's chart inside a canvas, and then save the canvas using the link you provided ^^ !I thought it would be easier to do so ^^" ! Never mind, I just hope that I can transform my panel into a canvas even if the charts inside my panel are already canvas !Thanks again buddy ! If anyone has other ideas, I'm taking !

  6. #5
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    268
    Answers
    15
    Vote Rating
    7
      0  

    Default

    Hi!


    I do as follows (for a single chart):


    Code:
    dockedItems: [{
            xtype: 'toolbar',
            items: [{
                        xtype: 'button',
                        text: 'Download as PNG',
    
                        handler: function(btn, e, eOpts) {
                            btn.up('panel').down("cartesian").download({
                                filename: "theName",
                            //  format: 'jpeg',
                                format: 'png'
                            })
                        }
                    }, {
                        xtype: 'button',
                        text: 'Preview chart',
                        handler: function(btn, e, eOpts) {
                            btn.up('panel').down("cartesian").preview()
                        }
                    }]
                }]
    I hope this helps!

  7. #6
    Sencha User
    Join Date
    Jan 2015
    Posts
    104
    Answers
    11
    Vote Rating
    40
      0  

    Default

    Thanks you bernard and josei for the solutions !! I tried both worked as I wanted !!I will now try to render the panel into a canvas which I can save, otherwise your solutions fits my need also ! Thanks again guys !

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •