Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/chart2Image.js

Created July 22, 2015 13:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ikiw/312ca2ef9d23b95adf3d to your computer and use it in GitHub Desktop.
Save ikiw/312ca2ef9d23b95adf3d to your computer and use it in GitHub Desktop.
Download ZIP
ui5 chart to image
Raw
chart2Image.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.viz'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script>
var chart = new sap.viz.ui5.Bar( {
dataset: new sap.viz.ui5.data.FlattenedDataset( {
dimensions: [
{ axis: 1, name: "Product", value: "{ProductName}" }
],
measures: [
{ name: "Unit Price", value: "{UnitPrice}" }
],
data: "{/Categories(1)/Products}"
} )
} ).setModel( new sap.ui.model.odata.ODataModel(
"/uilib-sample/proxy/http/services.odata.org/V2/Northwind/Northwind.svc/",
{ json: true, loadMetadataAsync: true }
) ).placeAt( "content" );
new sap.m.Button( {
text: "SVG to Image",
press: function() {
var svg = chart.getDomRef().getElementsByTagName( "svg" )[0];
var canvas = document.createElement( "canvas" );
canvas.setAttribute( "width", svg.getAttribute( "width" ) );
canvas.setAttribute( "height", svg.getAttribute( "height" ) );
var context = canvas.getContext( "2d" );
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage( imageObj, 0, 0 );
img.setSrc( canvas.toDataURL() );
};
imageObj.width = svg.getAttribute( "width" );
imageObj.height = svg.getAttribute( "height" );
imageObj.src = "data:image/svg+xml," + jQuery.sap.encodeURL(
svg.outerHTML.replace( /^<svg/, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"' ) );
}
} ).placeAt( "content" );
var img = new sap.m.Image( {
src: "about:blank"
} ).placeAt( "content" );
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment