Customized Chart
We can customize chart at any level, with filters and custom css. Here we are representing chart with custom design of each node.
Click on Name to view popup.
CSS
To achieve similar chart as above, add CSS shown below to area from where you are managing your theme’s style, it can be style.css under theme folder, Additional CSS under customizer or under theme option panel.
As shown below “.chart_792″ , replace 792 with your chart ID used in shortcode. You must have noticed this style is not for mobile and media query is used to avoid any conflicts.
@media only screen and (min-width:767px) {
.chart_792 .jOrgChart .node {
position: unset;
font-size: 15px;
border: 1px solid #e5e5e5;
color: #333;
width: 150px ;
max-width: 150px ;
background-color: #fff;
border-radius: 5px;
padding:0;
line-height: 1.8;
}
span.org_dept {
display: block;
background: #da617f;
color: #fff;
}
.chart_792 .jOrgChart .node > a {
display: inline-block;
text-align: center;
float: none;
padding:5px 0 0 0!important;
font-size:18px;
}
.chart_792 .jOrgChart .node > a small{
background-color:#f1f1f1;
font-size:14px;
color:#000;
padding: 2px 0;
margin-top:5px;
}
.social_popup {
position:absolute;
left:0;
bottom:-10px;
padding:7px;
background-color:#f1f1f1;
width: 100%;
text-align: center;
}
}
.social_popup i {
font-size: 21px;
width: 25%;
border-right: 1px solid #e4e4e4;
}
.social_popup i:last-child {
border-right:0px;
}
i.fa.fa-envelope {
color:#da617f;
}
i.fa.fa-phone {
color:#38B549;
}
i.fa.fa-facebook {
color: #3B5997;
}
i.fa.fa-twitter {
color: #1DA0F1;
}
i.fa.fa-linkedin {
color: #0077B5;
}
.white-popup {
padding-bottom:40px !important;
}
.popup1 h3 {
font-size:29px !important;
margin-bottom:10px;
}
.popup1 h3 small {
display:inline-block !important;
color:#DA6180 !important;
font-size:20px !important;
}
PHP
In order to display social media icon on popup like demo, copy PHP code shown below to your theme or child-theme functions.php file. You can modify it to display any information after popup content. Social media links can be pulled using “$user_id“.
Minimum version – 1.0.2
add_action("popup_content", "org_contact_icon", 15, 2);
function org_contact_icon($chart_id, $user_id) {
if($chart_id==792) {
echo "<div class='social_popup'>";
echo '<i class="fa fa-envelope"></i>';
echo '<i class="fa fa-phone"></i>';
echo '<i class="fa fa-linkedin"></i>';
echo '<i class="fa fa-facebook"></i>';
echo "</div>";
}
}