1. Home
  2. Forum
  3. jQuery
  4. Problem with diagram export when HTML/Native type nodes are used

Problem with diagram export when HTML/Native type nodes are used

Hi all,

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.

Sample code:

<!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>

All the best,
Nebojsa Zecevic


Attachment: ejdiagram_export_8b9581c4.zip

5 Replies
SG Shyam G Syncfusion Team July 12, 2016 04:59 AM UTC

Hi Nebojsa, 
 
Currently we don’t have support to export the native node to image format. We considered this “Export Diagram with native node support” as a feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 
 
Regards, 
Shyam G 


MA Marek July 28, 2016 03:35 PM UTC

Hello, What is the status of the feature request? Is there any way to workaround rather than writing the functionality from scretch? 
Thank you, 
Marek 

SG Shyam G Syncfusion Team July 30, 2016 03:19 AM UTC

Hi Nebojsa,  
 
We can render any HTML template using HTML node and exporting the HTML node has more complexity in implementation. So we are not having immediate plan to provide support to “Export Diagram with native node support”. As a workaround, we have WebKit based HTML Converter to achieve this requirement and this approach is independent of our Syncfusion control. Please refer to the kb link for more details. 
 
 
Regards, 
Shyam G 


MA Marek August 2, 2016 06:51 AM UTC

Thank you for the response. I found a solution using canvg library which is able to render svg to a canvas. 
It would be nice to provide possibility for developers to write their own rendering of the Html/Native objects. You would add some OnHtml/NativeNodeIsRendering event which would be triggered during the export. 


var options = {
    mode: "data",
    format: "svg"
};

var diagram = <any>$("#" + this.id + "diagram").ejDiagram("instance"); 
var svg = diagram.exportDiagram(options);

var mywindow = window.open('', 'my div', '');
mywindow.document.write('<html><head><title>OCD Diagram name</title></head><body id="printArea"></body></html>');

var canvas = mywindow.document.createElement('canvas');
mywindow.document.getElementById("printArea").appendChild(canvas);

canvg(canvas, svg.outerHTML, { ignoreMouse: true, ignoreAnimation: true }); //TODO: achieve better resolution

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();


SG Shyam G Syncfusion Team August 4, 2016 12:14 PM UTC

Hi Marek, 
 
Query 
response 
found a solution using canvg library which is able to render svg to a canvas.  
It would be nice to provide possibility for developers to write their own rendering of the Html/Native objects. 
 
If we export the diagram using canvg library, the html content in the html node will not be exported. This is due to we have rendered the HTML content in the separate div element(outside of the SVG) and we could not append the native HTML elements inside the SVG tag. Also we could not embed the native HTML element inside the foreign object because the IE browser doesn’t support foreign object. 
You would add some OnHtml/NativeNodeIsRendering event which would be triggered during the export.  
We considered this “Event support while exporting the diagram” as an feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 
 
  
 
Regards, 
Shyam G 


Loader.
Up arrow icon