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.

Canvas color

Thread ID:

Created:

Updated:

Platform:

Replies:

123659 Apr 7,2016 04:39 AM Jun 13,2016 06:11 AM JavaScript 8
loading
Tags: ejDiagram
Sachin Shah
Asked On April 7, 2016 04:39 AM

Hi,

I set a background image thru API.. Now, I added few diagrams.. which has transparent backgound.. Instead of showing image.. it showing white grid canvas.. how to get  transparent diagram and grid canvas ?

Regards,
Sachin

Attachment: Untitled_9a547c6d.zip

Shyam G [Syncfusion]
Replied On April 8, 2016 12:54 AM

Hi Sachin,

Please set pageSettings pageBackgroundColor as transparent to achieve your requirement. please refer to the code example, help documentation and JSPlayground link.

Code example:

$("#diagram").ejDiagram({

          //setting pagebackgroundcolor as transparent

            pageSettings: { pageBackgroundColor: "transparent" },

            
        });

Help documentation link:http://help.syncfusion.com/js/diagram/page-settings

JSPlayground link:http://jsplayground.syncfusion.com/ccqpdekw

Also if you need to hide the gridlines, please follow the below code example.

Code example:

$("#diagram").ejDiagram({

           //hiding the gridlines

            snapSettings:{snapConstraints:ej.datavisualization.Diagram.SnapConstraints.All &~ ej.datavisualization.Diagram.SnapConstraints.ShowLines},         
        });

Regards,
Shyam G


Sachin Shah
Replied On April 8, 2016 10:20 PM

Thanks Shyam,

It works great...

$("#diagram_0").ejDiagram({ backgroundImage: item.Background });
var diagram = $("#diagram_0").ejDiagram("instance");

var options = {
    mode: "data"
};
var image0 = diagram.exportDiagram(options);

But It does not include background image. (on screen its s

Sachin Shah
Replied On April 8, 2016 10:21 PM

On screen it showing perfect background.. but not in export

Shyam G [Syncfusion]
Replied On April 11, 2016 05:25 AM

Hi Sachin,

We have considered the requirement “ Issue in exporting diagram background image in canvas” as a bug and have logged a report on this. The fix will be included in our Volume 1 Service Pack 1 which has been scheduled to be rolled out by the end of April, 2016.


Regards,

Shyam G


Sachin Shah
Replied On May 31, 2016 11:18 PM

Have you released service pack 1 ?

Shyam G [Syncfusion]
Replied On June 1, 2016 07:56 AM

Hi Sachin, 

The reported issue “ Issue in exporting diagram background image in canvas” has been fixed in our Essential Studio 2016 Volume 1 Service Pack 1 Release v14.1.0.46 and is available for download under the following link: 
                            


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 


Regards, 
Shyam G 


Sachin Shah
Replied On June 10, 2016 06:13 AM

Thanks..

One last request..

How to setup a background image in diagram..

As per your documentation, This api was working before..

 $("#diagram").ejDiagram({ backgroundImage: Base64String });

But now its not working.

Senthil Kumar M [Syncfusion]
Replied On June 13, 2016 06:11 AM

Hi Sachin, 

Please use backgroundImage’s source property to set the image path and set pageSettings “pageBackgroundColor” property as transparent since it will hide the image if it has other than transparent color. 

Please refer to the below code example. 

$scope.backgroundImage = { 
   source: 'https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Innovation_with_ease.png' 
}; 
$scope.pageSettings = { 
   pageBackgroundColor: "transparent" 
}; 
 
<ej-diagram ng-attr-id="{{ 'object-' + index }}" e-height="500px" e-width="700px" e-nodes="nodes" e-backgroundcolor="backgroundColor" 
     e-backgroundImage-source="backgroundImage.source"> 
</ej-diagram> 
 

Regards, 
Senthilkumar M 


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.

;