We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

124964 Jul 11,2016 09:12 AM Aug 4,2016 08:14 AM JavaScript 5
loading
Tags: ejDiagram
Nebojsa Zecevic
Asked On July 11, 2016 09:12 AM

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

Shyam G [Syncfusion]
Replied On July 12, 2016 12:59 AM

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 


Marek
Replied On July 28, 2016 11:35 AM

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 

Shyam G [Syncfusion]
Replied On July 29, 2016 11:19 PM

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 


Marek
Replied On August 2, 2016 02:51 AM

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();


Shyam G [Syncfusion]
Replied On August 4, 2016 08:14 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;