Rodney Vg

Rodney Vg

1602543540

Interactive Organization Chart For Vue

Description:

A complete solution to generate and publish an orgchart without the need of a webserver and database.

Features:

  • Just runs everywhere, no install, no webserver, no database needed!
  • Edit in excel (bulk updates, external source)
  • Edit in the webpage
  • Supports multiple 1000’s departments
  • Panzoom and interactive expansion of subdepartments
  • Deeplinks to departments
  • Save as image
  • Search for departments and managers
  • Add employees to departments
  • Use photo’s from api (not included), or local folder
  • Click on employee to link to api (not included) or local folder

Download Details:

Author: Hoogkamer

Demo: https://hoogkamer.github.io/vue-org-chart/#/

Source Code: https://github.com/Hoogkamer/vue-org-chart

#vuejs #vue #javascript

What is GEEK

Buddha Community

Interactive Organization Chart For Vue
Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Einar  Hintz

Einar Hintz

1593235440

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today’s world. A huge amount of data is being generated and analyzed every day. So communicating the insights from that data becomes crucial. Charts help visualize the data and communicate the result of the analysis with charts, it becomes easy to understand the data.

There are a lot of libraries for angular that can be used to build charts. In this blog, we will look at one such library, NGX-Charts. We will see how to use it in angular and how to build data visualizations.

What we will cover:

  1. Installing ngx-chart.

  2. Building a vertical bar graph.

  3. Building a pie chart.

  4. Building an advanced pie chart.

A brief introduction about NGX-Charts

NGX-Chart charting framework for angular2+. It’s open-source and maintained by Swimlane.

NGX-Charts does not merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the renderings it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.

NGX-Charts supports various chart types like bar charts, line charts, area charts, pie charts, bubble charts, doughnut charts, gauge charts, heatmap, treemap, and number cards.

Installation and Setup

1. Install the ngx-chart package in your angular app.

npm install @swimlane/ngx-charts --save

2. At the time of installing or when you serve your application is you get an error:

ERROR in The target entry-point "@swimlane/ngx-charts" has missing dependencies: - @angular/cdk/portal

You also need to install angular/cdk

npm install @angular/cdk --save

3. Import NgxChartsModule from ‘ngx-charts’ in AppModule

4. NgxChartModule also requires BrowserAnimationModule. Import is inAppModule.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxChartsModule }from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgxChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Amazing! Now we can start using ngx-chart component and build the graph we want.

In the AppComponent we will provide data that the chart will represent. It’s a sample data for vehicles on the road survey.

#angular #angular 6 #scala #angular #angular 9 #bar chart #charting #charts #d3 charts #data visualisation #ngx #ngx charts #pie

Arun A

1622790351

Blazor Charts Component | Interactive Live Charts | Syncfusion

Blazor Charts is a well-crafted charting component to visualize data. It contains a rich UI gallery of 30+ charts and graphs, ranging from line to financial that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also comes with features such as zooming, panning, tooltip, crosshair, trackball, highlight, and selection.

#charts #blazor #best #interactive charts #chart types

Arun A

1623650248

Vue Charts - Rich & Interactive Graphs with Real-time data

Overview
The Vue Chart is a well-crafted charting component to visualize data. It contains a rich UI gallery of 30+ charts and graphs, ranging from line to financial that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also comes with features such as zooming, panning, tooltip, crosshair, trackball, highlight, and selection.

#vue #charts #graphs #web-development #rich & interactive

Asmait Ermias

Asmait Ermias

1596154440

Interactive Organization Chart For Vue

vueOrgChart Organization chart: A complete solution to generate and publish an orgchart without the need of a webserver and database © Michael Hoogkamer

Chart Profile

Do you want to show your (Agile) teams instead of an orgchart? Try: Teamviewer open source.

Features

  • Just runs everywhere, no install, no webserver, no database needed!
  • Edit in excel (bulk updates, external source)
  • Edit in the webpage
  • Supports 1000’s of departments
  • Panzoom and interactive expansion of subdepartments
  • Deeplinks to departments
  • Save as image
  • Search for departments and people
  • Add employees to departments
  • Use photo’s from api (not included), or local folder
  • Click on employee to link to api (not included) or show profile information (new)

Use as static website

To use this website as-is:

  1. Copy content of \docs folder to any location, like a folder on your computer, AWS S3 bucket or webserver
  2. Open index.html in the browser. When you use Internet Explorer it will not work if you placed the files on a folder (Chrome does work). S3 or webserverer will work for both browsers

Configure

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

User manual for website

  • Options > Column view:
    Shows underlying departments in a column, giving a compact overview. You can also prevent this for staff departments
  • Options > Show manager photo/Show manager name
    Show/hide the photos and/or names in the graph

FAQ

  • 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?

    • Left-click on a department and edit the name, description of type staff in the left screen. To change the manager, press the pencil and search for the right person. You can also add a new person, by filling in a name and id. First unselect the current manager then, if the department already has a manager
    • Add people the same way (use the people tab in the left screen). You can also provide the role the person has in the department
    • Right-click on a department in the chart to add a department below
    • With right-click you can also move a department: select Cut, then click on another department and right-click and select paste. Do not paste a parent under one of its children (this check has to be build)
  • How does editing work in excel?
    Select File > Export excel. It contains:

    • chart: id, name, description, parent, indicator for staff department, and id of the manager (from the people tab)
    • people: id, name, link to photo (see also config.js above), and main role/function of the person
    • assignment: department id (from chart tab), person id (from people tabl) and role. These are the people working for the department. (manager is assigned in the chart tab) People can be assigned to multiple departments, or even more times to 1 department (with different role for example)

    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.

Build Setup

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

Download Details:

Author: Hoogkamer

Live Demo: https://hoogkamer.github.io/vue-org-chart/#/

GitHub: https://github.com/Hoogkamer/vue-org-chart

#vuejs #vue #javascript #vue-js