0

I am making a report,In that particular report there is a chart of Apex when i rendered this as PDF the chart Disappears all the data is rendered as pdf but not that chart.I try this chart using the approach apex chart and google chart but nothing is working for me.

MY VF PAGE

 <div >
               <p class="valve-notes" >
                    <label class="valve-notes">Flow Curve Graph:</label>
                </p>

                <apex:chart animate="false" resizable="true" height="480" width="680" data="{!chartData}">
                    <apex:legend position="bottom"/>
                    <apex:axis steps="10" type="Numeric" position="left" fields="percentCv" 
                               title="% Cv"/>        
                    <apex:axis steps="5" maximum="100" type="Numeric" position="bottom" fields="percentOpen" 
                               title="% Open"/>
                    <apex:lineSeries title="Maximum Flow" axis="left"  xField="maximumFlow" yField="percentCv"
                                     markerType="circle" markerSize="2" markerFill="#FF0000"/>
                    <apex:lineSeries title="Normal Flow" axis="left"  xField="normalFlow" yField="percentCv"
                                     markerType="circle" markerSize="2" markerFill="#17ff00"/>
                    <apex:lineSeries title="Minimum Flow" axis="left"  xField="minimumFlow" yField="percentCv"
                                     markerType="circle" markerSize="2" markerFill="#0063ff"/>
                    <apex:lineSeries smooth="4" title="Valve Inherent Characteristic" axis="left" xField="percentCv" yField="requiredCv" 
                                     markerType="circle" markerSize="3" markerFill="#00000"/>
                </apex:chart>
            </div>

When i rendered as HTML enter image description here When i Rendered As Pdf enter image description here

1

An apex:chart is generated on the fly in the page using JavaScript and unfortunately the present Visualorce to PDF conversion mechanism doesn't execute any JavaScript so the chart is lost. One solution is to use a service that generates an image on the fly as the Visualforce to PDF conversion can handle images.

You could try that out using Google's Image Charts but that service is deprecated:

While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, although we have no plans to do so.

I haven't used it, but have noticed this commercial Image Charts alternative (that is free to try out too).

  • Thanks @keith-c for your response. I have tried google charts in visualforce via javascript. To render into PDF, it provides the only way to create an image of that chart and save it in force.com. But as in my scenario, i have a dynamic chart based on the values of a list chartData . Which not a feasible solution. What you recommend. Is there any other solution for rendering chart to pdf in visualforce. – Shoaib Khan May 17 '17 at 11:07
  • 1
    @ShoaibKhan Google have both pure JavaScript charts (no good to you) and a deprecated mechanism where they return an image to you (that I think should work). I'm suggesting you try the latter (or the equivalent commercial service). – Keith C May 17 '17 at 11:13
0

As Keith said you can use the image version of the Google Chart API(deprecated) to generate the image on the fly. You have to append all your chart values as URL parameters to generate the chart image.Fetch this image and embed into the PDF.

As google image chart API deprecated, you can look for other options like ChartURL, IMAGE CHARTS which provides similar service. (Please note I am not affiliated with either of the services.)

VF Page

<apex:page controller="ChartController" renderAs="pdf">
    <apex:image url="{!dynamicURL}"/>
</apex:page>

Controller

public class ChartController {
    public String dynamicURL {get;set;}
    public ChartController3(){
        //I have used a static URL here. You can generate a dynamic URL with all chart parameters.
        dynamicURL = 'https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World';
    }
}

Generated PDF

enter image description here

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.