Canvas color

[Sachin Shah]

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]

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]

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]

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

[Shyam G]

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]

Have you released service pack 1 ?

[Shyam G]

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: 

                            

Link: http://www.syncfusion.com/forums/123963/essential-studio-2016-volume-1-service-pack-release-v14-1-0-46-available-for-download 

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]

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]

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> 

 

JS playground link: http://jsplayground.syncfusion.com/guqyvrfn 

Regards, 

Senthilkumar M