- Welcome, Guest. Please Login or Register
MindFusion  
  Now beta testing first versions of our Scheduler and Virtual Keyboard components for HTML & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Poll Poll
Question: how to use custom font in mindfusion org chart ?



This Poll ends automatically in 343 days, 1 hours and 35 minutes.
« Created by: Surhar on: Nov 24th, 2017 at 8:33am »

Pages: 1 2  Send Topic Print  
custom fonts in org chart
Read 383 times

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #15 - Nov 28th, 2017 at 1:32pm
 
Before try this I have one question is resizeTofitTextethod increase node size if yes then it's not workfull for me because I don't need to change node size in my requirement all nodes in static size. I want to wrap the text it must start from second line when size of string is greater then node.  Pls reply is your above code work for wrap text inside the node
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #16 - Nov 28th, 2017 at 2:07pm
 
Hi,

The resizeToFitText method will indeed enlarge the node if needed.

Although, text inside ShapeNodes will wrap by default, so it seems this fits your requirements. If you have nonbreaking text that you need to wrap, you must set the enableStyledText property to true and it will wrap the text on char by char basis:

Code (Javascript):
var shapeNode1 = diagram.getFactory().createShapeNode(new Rect(0, 0, 30, 25));
shapeNode1.setText("Hello from ShapeNode 1!");
shapeNode1.setEnableStyledText(true); 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #17 - Dec 1st, 2017 at 6:21am
 
Hi Lyudo

I cant understand where i can write code in my example can you explain it.
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #18 - Dec 1st, 2017 at 7:19am
 
Hi,

You can write this code, after the diagram is created - for example, like in the OrgChartEditor sample, inside the document.ready handler:

Code (Javascript):
var tree, diagram;
$(document).ready(function () {
  // we apply the tree layout to arrange the diagram
  tree = new MindFusion.Graphs.TreeLayout();
  // customize the tree layout
  tree.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
  tree.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;

  // create the diagram object
  diagram = MindFusion.Diagramming.Diagram.create($("#diagram")[0]);

  // create and add some nodes to the diagram
  var shapeNode1 = diagram.getFactory().createShapeNode(new MindFusion.Drawing.Rect(0, 0, 30, 25));
  shapeNode1.setText("Hello from ShapeNode 1!");
  shapeNode1.setEnableStyledText(true);

  var shapeNode2 = diagram.getFactory().createShapeNode(new MindFusion.Drawing.Rect(0, 0, 30, 25));
  shapeNode2.setText("Hello from ShapeNode 2!");
  shapeNode2.setEnableStyledText(true);

  var shapeNode3 = diagram.getFactory().createShapeNode(new MindFusion.Drawing.Rect(0, 0, 30, 25));
  shapeNode3.setText("Hello from ShapeNode 3!");
  shapeNode3.setEnableStyledText(true);

  // create and add some links to the diagram
  diagram.getFactory().createDiagramLink(shapeNode1, shapeNode2);
  diagram.getFactory().createDiagramLink(shapeNode1, shapeNode3);

  // apply a tree layout to arrange the diagram items
  diagram.arrange(tree);
}); 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #19 - Dec 3rd, 2017 at 5:24am
 
i cant understand more how can i use this code in my example please help me if you have my code please find solution or download again my code from :

https://drive.google.com/open?id=1OBeGziJ8goqvKVpfl_LaBPWGMcIvjcRZ

please reply early i can pay you if you want.
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #20 - Dec 4th, 2017 at 8:19am
 
Hi,

We've modified your code to use ShapeNodes instead of TableNodes. In addition to that, we've removed some of the code that was intended to work with tables in mind. Now, images and fonts also should show up.

You can download the modified sample from this link: https://mindfusion.eu/_samples/OrgChartModified.zip.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #21 - Dec 4th, 2017 at 5:38pm
 
Hey Lyoodo

thank you for reply i got solution without using shape node i want just more help i want to create link on some text inside :
Code (Javascript):
samji.setFullName(";FD\nDFGAF>"); 



i want to create html link on ;FD\nDFGAF> which is name of person in Gujarati language please help me
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #22 - Dec 5th, 2017 at 7:42am
 
Hi,

You can use the HyperLink property the node to store your url and then use that value inside a nodeClicked event handler to open the link. There is already an existing handler in the OrgChart sample, you can see how to use it there.

Code (Javascript):
//...

this.setHyperLink("<insertYourUrlHere>");

//...

function onNodeClicked(sender, args)
{
  // ...
  window.open(args.getNode().getHyperLink());
}
 

 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #23 - Dec 6th, 2017 at 5:15pm
 
hey lyoodo

I see your customized code for me its perfect and it use full for family tree. i tried your code for link on node but i don't want to consider node as a like actually in my code some persons are married i want to display their wife's name together when user clicked on wife's name not on person but only wife's name other page open with which for detail of person like phone no. etc. so i want to create link on text inside node not on full node i tried to type this code :
Code (Javascript):
ladha.setFullName(",WF");
ladha.setFullName('<a href="https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript">,WF\nJLZA</a>', ""); 



but isn't working please give your batter idea

after get this solution i also want to data from database in my database there are given perent id for every child.. i will try this after get this soltion i will ask you if i am not success to do this but at this time i just want to create link on some text inside node
 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #24 - Dec 6th, 2017 at 6:05pm
 
hey lyoodo

i know you are trying best to give best answer i want to complate my project before 15 december i can do other things but family tree is new concept for me you may not free and for some reason i get reply after two or three days so can soy suggest other forum for get quick reply i also stay with you but some time i want solution early so if you have any idea about other forums or other part in this forum please suggest me......
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #25 - Dec 7th, 2017 at 8:17am
 
Hi,

You can use an attached node to set another text and link - that way when you click on the master node it will open one link and when you click on the attached node it will open another. Use the Locked and IgnoreLayout properties to make the node follow it's master. Something like this (this is modified code form the OrgChart sample I sent you earlier) :

Code (Javascript):
	var kanji = new OrgChartNode(diagram);
	kanji.setBounds(new Rect(25, 15, 10, 10));
	kanji.setFullName("SFG");
	kanji.setHyperLink("http://kanji");
	kanji.resize();
	diagram.addItem(kanji);
	var kanji2 = new OrgChartNode(diagram);
	kanji2.setBounds(new Rect(35, 15, 10, 10));
	kanji2.setFullName("Text");
	kanji2.setHyperLink("http://kanji2");
	kanji2.resize();
	kanji2.setLocked(true);
	kanji2.setIgnoreLayout(true);
	kanji2.attachTo(kanji);
	diagram.addItem(kanji2); 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #26 - Dec 7th, 2017 at 5:55pm
 
Smiley Hey Lyoodo

Thank you so much for customizing for me i also go with shapenode because itsb atter option for me. you give batter idea for attach node i tried it. but attached node display to far from master node its look like different then master code i tried to decrease x postion in setbounds but in but its not working, it working in with tablenode but not working in shapenode example, in my requirement node should be in Rectangle shape if i use attach node it display complicated

i also create this website for our community and in our community peoples are not educated they can understand by only reading text so  that's why i want to create link on some text inside node, other problem with attach node is is made to wide when many peoples have many wifes its mean many nodes display horizontal so people can not see other sons they must scroll to view so is it not possible to create link on some text inside node.

i also want to know about you are you employer in company or own bussiness, are on facebook ? if yes please share your id so we can caht  Shockedand fun Grin together ?

i have some other project i decided that i give you contract if you want ? please reply and give your idea about create link inside node ..
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #27 - Dec 8th, 2017 at 9:54am
 
Hi,

Istead of the attached shape node you can use an attached table node, and list each member on a different row. You can use the table cell's Tag property to store the hyperlink:
Code (Javascript):
	var kanji = new OrgChartNode(diagram);
	kanji.setBounds(new Rect(25, 15, 30, 30));
	kanji.setFullName("SFG");
	kanji.setHyperLink("http://kanji");
	kanji.resize();
	diagram.addItem(kanji);
	var kanji2 = new MindFusion.Diagramming.TableNode(diagram);
	kanji2.redimTable(1, 2); // define a table with 1 column and two rows;
	kanji2.setBounds(new Rect(55, 15, 30, 30));
	kanji2.setCaptionHeight(0); // hide the header
	kanji2.getCell(0, 0).setText("Attached entry A"); // add first entry to the first row
	kanji2.getCell(0, 0).setTag("http://A/"); // set the link to first entry information in the tag property
	kanji2.getRow(0).height = 15; // resize the first row to fit the text
	kanji2.getCell(0, 1).setText("Attached entry B"); // add sedcond entry to the sedcond row
	kanji2.getCell(0, 1).setTag("http://B/"); // set the link to second entry information in the tag property
	kanji2.getRow(1).height = 15; // resize the second row to fit the text
	kanji2.setLocked(true);
	kanji2.setIgnoreLayout(true);
	kanji2.attachTo(kanji);
	diagram.addItem(kanji2); 



To handle different type node clicks, modify your nodeClicked handler like this:

Code (Javascript):
// raised when the user clicks on a node
function onNodeClicked(diagram, eventArgs)
{
	var link = null;
	var node = eventArgs.getNode();
	if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.ShapeNode, node))
		link = node.getHyperLink();
	else if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.TableNode, node))
	{
		var cellInfo = node.cellFromPoint(eventArgs.mousePosition);
		if (cellInfo)
			link = cellInfo.cell.getTag();
	}
	if (link)
		window.open(link);
} 



If you think horizontal space is an issue, you can use the treeLayoutAssistant layout trait for leaf nodes, so that they position vertically. Set the enableAssistants property on the TreeLayout, iterate over diagram's nodes collection to identify leaf nodes and set their layoutTraits property, before arranging the graph:

Code (Javascript):
	// we apply the tree layout to arrange the diagram
	tree = new MindFusion.Graphs.TreeLayout();
	// customize the tree layout
	tree.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
	tree.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;
	tree.enableAssistants = true;
// ...

	for (var i = 0; i < diagram.getNodes().length; i++)
	{
		var node = diagram.getNodes()[i];
		if (MindFusion.AbstractionLayer.isInstanceOfType(OrgChartNode, node))
		{
			if (node.getOutgoingLinks().length == 0) // node is a leaf
				node.layoutTraits = { treeLayoutAssistant: MindFusion.Graphs.AssistantType.Left };
		}
	}

	// arrange the diagram with the TreeLayout
	diagram.arrangeAnimated(tree);
 



...

Regards,
Lyubo
 
 
« Last Edit: Dec 8th, 2017 at 11:21am by Forum Admin »
 
IP Logged    
 
     

Surhar   Offline
YaBB Newbies
*
Posts: 20
I Love MindFusion!


   
     
 
Re: custom fonts in org chart
Reply #28 - Dec 12th, 2017 at 9:47am
 
Hey Lyoodo !

Thank you for working on my project i want to add link on text inside node and i dont want to use attach node because i dont want to reapete nodes i want to keep wife's name in same node, is it possible if yes, can take this whole project for me, because i am buse in some other projects, i also want to make this project early as i will pay bill of project development after get estimate(quotation) from you or if you are not free can your company do this ? please reply
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 121
Gender: male
MindFusion team


   
     
 
Re: custom fonts in org chart
Reply #29 - Yesterday at 3:40pm
 
Hi,

We've added hyperlink support in this beta version: https://mindfusion.eu/_beta/jsdiag_links.zip.

Hyperlinks can be nested inside styled text between anchor tags. When a link is clicked, a hyperlinkClicked event is raised by the component; the hyperlink value can be retrieved from the Hyperlink property of the event args object. An example usage of the new feature will be:

Code (Javascript):
// node is a ShapeNode instance
node.setText("test <a='http://mindfusion.eu'>link</a> test");
node.setEnableStyledText(true);

//...

// attach an event listener to the hyperlinkClicked event
diagram.addEventListener(Events.hyperlinkClicked, onHyperlinkClicked);

function onHyperlinkClicked(sender, args)
{
  alert(args.getHyperlink()); // or open in another browser window.
} 



Regards,
Lyubo
 
 
 
IP Logged    
 
     
Pages: 1 2  Send Topic Print