Poll
Poll closed Question: how to use custom font in mindfusion org chart ?
bars   pie
*** This poll has now closed ***


in sample.css filr    
  1 (100.0%)
in jquery-ui.min.css file    
  0 (0.0%)
in jquery-ui.structure.min.css file    
  0 (0.0%)
or in jquery-ui.theme.min.css file    
  0 (0.0%)




Total votes: 1
« Created by: Surhar on: Nov 24th, 2017 at 8:33am »
Page Index Toggle Pages: 1 [2] 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) custom fonts in org chart (Read 17002 times)
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #15 - Nov 28th, 2017 at 1:32pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #16 - Nov 28th, 2017 at 2:07pm
Print Post  
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)
Select All
var shapeNode1 = diagram.getFactory().createShapeNode(new Rect(0, 0, 30, 25));
shapeNode1.setText("Hello from ShapeNode 1!");
shapeNode1.setEnableStyledText(true); 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #17 - Dec 1st, 2017 at 6:21am
Print Post  
Hi Lyudo

I cant understand where i can write code in my example can you explain it.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #18 - Dec 1st, 2017 at 7:19am
Print Post  
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)
Select All
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
  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #19 - Dec 3rd, 2017 at 5:24am
Print Post  
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.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #20 - Dec 4th, 2017 at 8:19am
Print Post  
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
  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #21 - Dec 4th, 2017 at 5:38pm
Print Post  
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)
Select All
samji.setFullName(";FDÒ\nDFGAF>"); 



i want to create html link on ;FDÒ\nDFGAF> which is name of person in Gujarati language please help me
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #22 - Dec 5th, 2017 at 7:42am
Print Post  
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)
Select All
//...

this.setHyperLink("<insertYourUrlHere>");

//...

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

  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #23 - Dec 6th, 2017 at 5:15pm
Print Post  
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)
Select All
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
  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #24 - Dec 6th, 2017 at 6:05pm
Print Post  
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......
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #25 - Dec 7th, 2017 at 8:17am
Print Post  
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)
Select All
	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
  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #26 - Dec 7th, 2017 at 5:55pm
Print Post  
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 ..
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #27 - Dec 8th, 2017 at 9:54am
Print Post  
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)
Select All
	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)
Select All
// 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)
Select All
	// 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 »  
Back to top
 
IP Logged
 
Surhar
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 32
Joined: Nov 23rd, 2017
Re: custom fonts in org chart
Reply #28 - Dec 12th, 2017 at 9:47am
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: custom fonts in org chart
Reply #29 - Dec 15th, 2017 at 3:40pm
Print Post  
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)
Select All
// 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
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 
Send TopicPrint