function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Radhika pawar 5Radhika pawar 5 

convert google chart to image in VF page

  I have one Requirement to convert google chart(graph) to image.i m using in VF Page
<!--- Bar Char Code -->
<center>
<script type="text/javascript">
      //google.setOnLoadCallback(drawChart);
      var functionname ="reading_report";
      functionname = functionname.replace(/[^A-Z0-9]+/ig, "_");
      //functionname = functionname.replace(/./g, '_');
      window[functionname] = function() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Metrics', 'Beginner', 'Letter', 'Word', 'Para', 'Story'],
      <apex:repeat value="{!lstReport}" var="report">
         ["{!report[0]}", {!report[1]}, {!report[2]}, {!report[3]}, {!report[4]}, {!report[5]}], 
       </apex:repeat>
    ]);
  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById("reading_report")).
      draw(data,
           {title:"Reading Baseline Trends - National",
            width:600, height:400,isStacked:true,
            hAxis: {title: ""},
            vAxis: {minValue: 0},
            vAxis: {maxValue: 100}}
      );
}
</script>
<div id="reading_report" class="googlechart"></div> </center>
<!--​ End of Bar Chart -->
Gaurav NirwalGaurav Nirwal
<apex:page controller="GoogleDataEncoding">
    <apex:form >
        <apex:pageBlock 
               title="Create a Google Chart for Time and Distance">
            <apex:outputLabel 
               value="Enter data set, separated by commas: " 
               for="dataInput"/><br/>
            <apex:inputTextArea 
               id="dataInput" title="First Data Point" 
               value="{!dataSet}" rows="3" cols="50"/><br/>
            <apex:selectRadio value="{!graph}" 
               layout="pageDirection">
                <apex:selectOption itemValue="barChart" 
               itemLabel="Horizontal Bar Chart"/>
                <apex:selectOption itemValue="lineChart" 
               itemLabel="Line Chart"/>
            </apex:selectRadio>            
            <apex:commandButton action="{!create}" 
               value="Create"/>
        </apex:pageBlock>
    </apex:form>
    <apex:image url="{!chartURL}" alt="Sample chart" 
               rendered="{!displayChart}"/>
</apex:page>