Because when I download a project it does not work correctly?

[Francisco José]

I downloaded the code of the proyect http://jsfiddle.net/7t1p5j0y/ but it does not work, I have aññ the files but it not work, I need help

[Shyam G]

Hi Francisco, 

We have created a fiddle sample locally and it is available in below link for download. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/networksample496842839 

Regards, 

Shyam G 

[Francisco José]

I am happy! I do not know how I can thank you. Is it possible to change the images? I want to put images of my pc jpg, is that possible?

[Ramya Thirugnanam]

Hi Francisco,  

 

In previous sample, we have rendered a native node in symbol palette not an image. We can use Image node to achieve your requirement. please refer to the code example and help documentation.  

 

Help documentation: https://help.syncfusion.com/js/diagram/shapes#image  

 

Regards,  

Ramya T 

[Francisco José]

I tried but it does not work! I apologize but I do not have so much knowledge

This code was inserted but nothing works.

I want to use my images, some solution?

// Defines JSON to create node with image
var nodes = [{
	name: "imageNode", 
	width: 100, 
	height: 60, 
	offsetX: 40, 
	offsetY: 40,
	type: ej.datavisualization.Diagram.Shapes.Image,
	source: "sample/employee.png"
	borderWidth:3,
	borderColor:"white",
}];
//Initializes Diagram
$("#diagram").ejDiagram({
	width: "100%", 
	height: "100%",
	//Initializes nodes collection
	nodes: nodes,
});

[Ramya Thirugnanam]

Hi Francisco,  

 

We have modified the sample in which we have rendered an image node in palette. Please refer to the code example and sample below.  

 

Code example:  

var palettes = [  

           {  

               name: "Basic Shapes", expanded: true,  

               items: [  

                    {name: "image", width: 40, height: 40, offsetX: 20, offsetY: 20, type: ej.datavisualization.Diagram.Shapes.Image, source: "scripts/image30.png" },  

             ]  

          }  

];  

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/networkimagesample424234308  

 

Note: We have saved an image(image30.png) in the scripts folder.  

 

Regards,  

Ramya T  

[Francisco José]

I cannot adequately express how deeply indebted I am to you.

Great job!!!!!

Thank you very much!

[Ramya Thirugnanam]

Hi Francisco, 

Thanks for your update. 

Regards, 

Ramya T 

[Francisco José]

Last question, is it possible to insert PNG with transparency? I want the white border not to be visible, it's possible?

Attachment: Captura_8e7a461d.rar

[Ramya Thirugnanam]

Hi Francisco,  

  

Please set node’s fillColor as transparent to achieve your requirement. Please replace the below code example in our sample provided earlier.  

  

Code example:  

  

{ name: "image", fillColor:"transparent", width: 40, height: 40, offsetX: 20, offsetY: 20, type: ej.datavisualization.Diagram.Shapes.Image, source: "scripts/image30.png" },  

  

Regards,  

Ramya T 

[Francisco José]

It works but the border is still not transparent, is it possible?

Thank you very much!

[Francisco José]

It works but the border is still not transparent, is it possible?

Thank you very much!

Solved! borderColor: "transparent"

Thanks again!

[Ramya Thirugnanam]

Hi Francisco, 

 

Thanks for update. 

 

Regards, 

Ramya T 

[Francisco José]

Another query, is it possible to hide the grid?

Thanks again!

[Ramya Thirugnanam]

Hi Francisco,   

 Please remove snapSettings snapConstraints ShowLines from All to hide the gridlines in diagram. Please refer to a code example and sample below.  

 Code example:   

  $("#diagram").ejDiagram(  

        {   

          //To remove the Gridlines  

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

        });  

 

   

Sample: https://jsplayground.syncfusion.com/3ow10opw  

 

Regards, 

Ramya T 

[Francisco José]

Hi! is it possible to put a backgroung image of the grid?

Thanks!

[Arunkumar Manoharan]

Hi Francisco,

 

We have created a sample to put a background image of the grid. The diagram supports to set the background image to the diagram with custom properties to stretch and align the background image anywhere over the diagram area. The source property of backgroundImage allows you to set the path of the image. The scale and the align properties help to stretch or align the background images. For more information, please refer to the sample link and code snippet. 

 

Code snippet: 

backgroundImage: { 

alignment:ej.datavisualization.Diagram.ImageAlignment.XMidYMin, 

scale: "meet", 

source:"https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Image.png"}, 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BackgroundIMG-580130562  

 

Regards,
Arun