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. Image for the cookie policy date
close icon

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

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

16 Replies

SG Shyam G Syncfusion Team July 1, 2019 09:34 AM UTC

Hi Francisco, 

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


Regards, 
Shyam G 



FJ Francisco José July 2, 2019 06:35 AM UTC

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?


RT Ramya Thirugnanam Syncfusion Team July 2, 2019 12:00 PM UTC

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.  
 
 
Regards,  
Ramya T 



FJ Francisco José July 3, 2019 05:54 AM UTC


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,
});


RT Ramya Thirugnanam Syncfusion Team July 3, 2019 10:33 AM UTC

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" },  
              
           
];  
 
 
 
Note: We have saved an image(image30.png) in the scripts folder.  
 
Regards,  
Ramya T  



FJ Francisco José July 4, 2019 05:34 AM UTC

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

Great job!!!!!

Thank you very much!




RT Ramya Thirugnanam Syncfusion Team July 4, 2019 10:02 AM UTC

Hi Francisco, 
Thanks for your update. 
Regards, 
Ramya T 



FJ Francisco José July 5, 2019 07:41 AM UTC


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


RT Ramya Thirugnanam Syncfusion Team July 5, 2019 11:55 AM UTC

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 



FJ Francisco José July 5, 2019 01:54 PM UTC

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

Thank you very much!


FJ Francisco José replied to Francisco José July 6, 2019 06:43 AM UTC

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

Thank you very much!

Solved! borderColor: "transparent"

Thanks again!


RT Ramya Thirugnanam Syncfusion Team July 8, 2019 05:48 AM UTC

Hi Francisco, 
 
Thanks for update. 
 
Regards, 
Ramya T 



FJ Francisco José July 19, 2019 06:11 PM UTC

Another query, is it possible to hide the grid?
Thanks again!



RT Ramya Thirugnanam Syncfusion Team July 22, 2019 07:09 AM UTC

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 }  
        });  
 
   
 
Regards, 
Ramya T 



FJ Francisco José July 2, 2021 12:41 PM UTC

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


Thanks!





AM Arunkumar Manoharan Syncfusion Team July 5, 2021 10:32 AM UTC

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"}, 
 
 
Regards,
Arun
 


Loader.
Live Chat Icon For mobile
Up arrow icon