I recently purchased your gerOrgChart plugin and have been struggling with a few things. I am using custom theme 1. The theme works great for me. However, the name tag of each card is quite long in my case. I prefer not to have the '...' , but the entire text split into multiple lines depending on the width of the card. I also need to add a link to it. But the dataSource does not render the html href tag Im adding to the particular data.
Script:
getOrgChart.themes.myCustomTheme =
{
size: [270, 400],
toolbarHeight: 46,
textPoints: [
{ x: 30, y: 50, width: 240},
{ x: 30, y: 120, width: 240},
{ x: 30, y: 150, width: 240}
],
textPointsNoImage: [
{ x: 30, y: 50, width: 240},
{ x: 30, y: 120, width: 240},
{ x: 30, y: 150, width: 240}
],
expandCollapseBtnRadius: 20,
defs: '<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>',
box: '<rect x="0" y="0" height="400" width="270" rx="10" ry="10"
class="myCustomTheme-box" filter="url(#f1)" />',
text: '<text text-anchor="start" width="[width]" class="get-text
get-text-[index]" x="[x]" y="[y]">[text]</text>',
};
var name = '<a href=www.google.com> Google </a>;
data.push({id: current_record_number++ ,parentId: level,
name: name,
Stake: ' 10% Stake',
RevHeading: 'Revenue'
});
data = [{id: 1, parentId: null, name: 'xyz', Stake: '-'}];
var peopleElement = document.getElementById("peoples");
var orgChart = new getOrgChart(peopleElement, {
theme: "myCustomTheme",
enableEdit: false,
scale: 0.5,
enableSearch: false,
linkType: "B",
color: "neutralgrey",
enableGridView: true,
primaryFields: ["name", "Stake", "Date", "RevHeading"],
dataSource: data
});
</script>
We have modified our create-your-own-theme-1 page in order to show you how to achieve requested functionality http://www.getorgchart.com/experimental/create-your-own-theme-1.html