vueOrgChart Organization chart: A complete solution to generate and publish an orgchart without the need of a webserver and database © Michael Hoogkamer
Do you want to show your (Agile) teams instead of an orgchart? Try: Teamviewer open source.
To use this website as-is:
var CONFIG = {
title: {
color: '#05668d',
text: 'Interactive organization chart'
},
photoUrl: {
prefix: 'photos/',
suffix: '.png'
},
linkUrl: {
prefix: 'photos/',
suffix: '.png'
},
startView: {
photos: true,
names: true,
columnview: true,
staffColumnview: false,
showNrDepartments: true,
showNrPeople: true
},
enableScreenCapture: true,
levelColors: ['#0c058d', '#05668d', '#8d6e05', '#8d2305', '#cfb303']
}
The config file is in /config.js
title
You can set the header color and title, and the colors of each level in the orgchart
photoUrl
The position where to get the photo’s
For these locations it is fetched from “prefix” + photo + “suffix”. So if you have photo P0001, it will be fetched from “photos/P0001.png”. If you have an api or other locations which delivers photo’s based on the photo field you can change that here.
linkUrl
It will open a new tab to navigate to that page when clicked in the sidescreen on a person. If you have an api which shows a user profile page you can enter the location here. Don’t specify this object if you want to see the profile information from this application (default)
startView
Sets the inital options (the user can change them in the menu bar)
enableScreenCapture
This shows the icon to make an image of the graph to save. This does not work when you are on a local folder, so disable this option then
How can I change/edit the graph?
Type _edit in the searchbar to swith to editmode. Now you can edit the graph in the application or update via excel
How does editing work in the application?
How does editing work in excel?
Select File > Export excel. It contains:
When done, select File > Import excel
How do I save the changes for others to see?
Everything happens at client side, so changes are only available for you. And if you refresh the page the changes will be gone. To make the changes persistent you must select File > Generate inputfile to create a javascript file which contains the data. This file (data.js) you then must place in the root folder this application is at, replacing the already existing file data.js
Who can edit the graph?
Anyone can edit, but as stated above, it will be only available for that person. To make the data available for others, you need write access to the folder this application is at, so you can overwrite the data.js file
How do I change the order of the departments under a parent?
This is not directly supported. There are 2 possibilities however. First switch to editmode. 1) export to excel, then change the order in the sheet, and then read the excel in again 2) cut the department, and paste it under the same parent again. It will be placed last.
Why does running from a local folder not work in Internet Exporer (IE11)?
I do not know, but who uses it anyways :) It does work in Chrome however, and running from a webserver or S3 bucket works for both browsers
How can I use this in my own code
This is not meant to be a plugin/library, but it is a complete solution. If you want to use this as a part of your own application I recommend to search for a real orgchart plugin.
This is only needed if you want to build/change your own version. If you want to use it without modification, see: use as static website
The config.js, data.js and photos folder used for development are in the \static folder
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
static output will be place in \dist folder, copy this to any location
Author: Hoogkamer
Live Demo: https://hoogkamer.github.io/vue-org-chart/#/
GitHub: https://github.com/Hoogkamer/vue-org-chart
#vuejs #vue #javascript #vue-js