10

Got a tricky one. I want to be able to create rich HTML emails to our clients which include graphs etc.

Problem is, Google Image Chart is being depreciated, Visualforce Charts can't be output to an image and Google Visualisation API needs JavaScript which is not good for emails.

I saw this post from August '13 How can I create a custom chart without JS besides Google Charts? and wondered if anyone has made any progress since then?

I've exhausted Google searching and there doesn't seem to be anything out there.

Please can you help?

1
  • Have you bump into any solution?
    – unidha
    Dec 8 '16 at 3:19
7

You can get standard report charts, via a dashboard, into a pdf - I have this working for a client so I know this works.

What you need to do add the report +chart to a dashboard and then view the dashboard. Right click on a chart and open in new tab.

enter image description here

Copy the image url and paste into your pdf page into an img html component. This is an example I have working (ids changed to protect identity):-

<apex:page showheader="false" renderAs="pdf">
  <img src="https://cs8.salesforce.com/servlet/servlet.ChartServer?rsid=0FLL00000009XXX&ruid=00580000003BXXX&did=01ZC00000013SP0&s=8&fs=12&tfg=12&tfs=-16777216&explode=0&c=bar&cs=0&title=Top+10+Users+-+%23+of+Followers&eh=yes&compo=yes&fg=-16777216&bg1=-1&bg2=-1&bgdir=2&dl1=Full+Name&dl2=&l=2&sax=yes&Yman=no&nc=10&actUrl=%2F00OC0000004nUGU%3Fdbw%3D1&sd=4&scv=no&sct=no&spt=no&cu=USD&ab=X&u=0&vt=0&ab2=Y&u2=0&vt2=0&vl0=Record+Count&spoc=no&topn=no&gc0=-1&gc1=-1&gc2=-1&sona=0&refreshts=1389629381000"/>

  </apex:page> 

Whats really interesting is that when the dashboard is refreshed, the chart is also refreshed and so although this is a static url, the chart is 'dynamic'.

1
  • Wow! That is a neat solution. Thanks for the tip. This will help in some scenarios, the trouble we face is that I need to combine multiple data sources into a single graph. I'd prefer not to use a £££ BI platform just to build a graph or too.
    – Weeden
    Nov 20 '14 at 13:12
6

Until SF updates the PDF render engine, which I believe is the Flying Saucer render engine, there's little that's going to change unless you have a means of rendering the graphics and saving them in a format that the render engine will recognize and I'm not aware of any such method.

There's a Flying Saucer User Group Forum that you may want to visit and see what you can discover.

1

Use google image charts as a temporary measure. Something better will come along before they totally kick us all off it. Or they might stop hosting it and one source it, so someone else can keep it running.

That's what I did.

1

I am not sure if this question is already answered, but I found solution to save visualforce chart to image using canvas.

You need to include canvg library.

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 

The example is below:

<input type="button" id="save_img_att" value="Save as Attachment"/>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    <apex:chart height="350" width="450" data="{!pieData}" id="pieChart" renderTo="container">
        <apex:pieSeries dataField="data" labelField="name" id="pieSeries"/>
        <apex:legend position="right"/>
    </apex:chart>
    <canvas id="canvas" style="display:none;"></canvas>

At javascript , I use javascript remoting to save the chart as Attachment to the respective object.

$("#save_img_att").click(function(){
        var mainDiv=document.getElementById('container');
        var svg = mainDiv.children[0].children[0].innerHTML;
        console.log('@@svg .... ' + svg);
        canvg(document.getElementById('canvas'),svg);
        var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
        img = img.replace('data:image/png;base64,', '');
        var data = "bin_data=" + img;
        console.log('@@oppId =' +     '{!Opportunity.Id}');
        Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.VFChart_Server.saveChartAsAttachment}',
       '{!Opportunity.Id}',img,
          function(result,event){
             if(event.status){

               console.log('@@@ success');

             }
             else {
               console.log('@@@ fail');

             }


          } );


    });

Once you save it as Attachment, I believe you can try to attach in Email or render it as PDF.

The detail of solution can be found here :Save Visualforce Chart as Image in Attachment

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.