Skip to content

Instantly share code, notes, and snippets.

@unidha unidha/VFChart_Server.page
Last active Apr 20, 2017

Embed
What would you like to do?
<apex:page standardController="Opportunity" extensions="VFChart_Server" title="Pie Chart" sidebar="false">
<apex:includeScript value="{!URLFOR($Resource.HighChart_5,'/api/js/jquery-1.11.3.min.js')}"/>
<script type="text/javascript" src="https://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="https://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="https://canvg.github.io/canvg/canvg.js"></script>
<script>
$(document).ready(function() {
$("#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');
}
} );
});
});
</script>
<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>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.