i have problem with ejDiagram export function. If I put in diagram nodes that are HTML or Native type with templates I don't get fine results when doing export of diagram image.
Nodes with HTML/Native type are not visible on exported image, they are left blank.
If you have any idea how to fix this please let me know.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential Studio for JavaScript">
<meta name="author" content="Syncfusion">
<title>
Untitled
</title>
<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/14.1.0.46/js/web/flat-azure/ej.web.all.min.css" />
<!-- Essential Studio for JavaScript script references -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js">
</script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js">
</script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js">
</script>
<script src="http://cdn.syncfusion.com/14.1.0.46/js/web/ej.web.all.min.js">
</script>
<!--Add custom scripts here -->
</head>
<body>
<div style="padding:10px">
<h2>
ejDiagram export function with HTML/Native nodes
</h2>
<hr />
<button type="button" id="export">
Export Image
</button>
<hr />
<div id="diagram">
</div>
</div>
<script>
$(function () {
var nodes = [
{
name: 'test1',
offsetX: 100,
offsetY: 100,
width: 50,
height: 50,
borderWidth: 1,
borderColor: '#333'
},
{
name: 'test2',
offsetX: 170,
offsetY: 170,
width: 50,
height: 50,
borderWidth: 1,
borderColor: '#333',
type: ej.datavisualization.Diagram.Shapes.Html,
templateId: 'node-template',
data: {
text: 'test'
}
},
{
name: 'test3',
offsetX: 230,
offsetY: 230,
width: 50,
height: 50,
borderWidth: 1,
borderColor: '#333',
type: ej.datavisualization.Diagram.Shapes.Native,
templateId: 'node-svg-template',
data: {
text: 'test'
}
},
{
name: 'test4',
offsetX: 300,
offsetY: 300,
width: 50,
height: 50,
borderWidth: 1,
borderColor: '#333'
}
];
$('#diagram').ejDiagram({
height: 600,
nodes: nodes
});
$('#export').ejButton({
title: 'Export Image',
click: function () {
var diagram = $('#diagram').data("ejDiagram");
diagram.exportDiagram({
margin: { top: 30, right: 30, bottom: 30, left: 30 }
});
}
})
});
</script>
<script id="node-template" type="text/x-jsrender">
<div style="display: block; width: 50px; height: 50px;">
<p style="width: 100%; height: 100%; text-align: center; margin: 0; padding: 0; font-size: 32px;">{{:data.text}}</p>
</div>
</script>
<script id="node-svg-template" type="text/x-jsrender">
<g>
<rect x="0" y="0" width="50" height="50" style="fill: transparent;" />
<path d="M 0 25 L 50 25" stroke="#0068b8" stroke-width="10" fill="none"></path>
</g>
</script>
</body>
</html>
