Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

Page Size Diagram

Responsive design

Like any other Data Visualization component it combines scalable and non-scalable graphics elements. For example we would like to show 10'000 labels but it is just physically impossible to fit them, because their total square size is multiple times bigger than available screen space. At the same time we cannot scale all of them down to points, since they become simply unreadable. Try to disable "fit to page" for large hierarchy demo, the resulting diagram is going to be so big that its visualization makes no sense, this rendering mode is useful only for PDF generation for reporting purposes only. If we speak about BI applications designed for data analysis then we need to show nodes only in the scope of current user focus of interest, so diagramming applications should be dynamic and adopt to user data and requirements. Another argument in favour of diagramming applications having auto layout is the fact that in large organizations where we have over 500 people the rate of changes is so high that any organizational structure becomes obsolete as soon as we make its hard copy. So we use various strategies to show as mush data as possible to the user within available screen space, so control needs to be notified about its placeholder size changes in order to trigger rendering cycle. 

Chart sizing is applications responsibility

We don't try to refresh control ourselves for the following reasons: 

  • Chart does not add any event listeners outside of placeholder. There is no cross browser possibility to notify widget on <div> size change. The only workaround is to handle window resize event, but it creates unavoidable conflicts with host application. 
  • Chart does not update itself without explicit call of "update" method or end user mouse or keyboard action.

Pixel Alignment

When we draw SVG and Canvas lines it is important to have them pixel aligned otherwise they become blurred, so when we call "update" method control aligns placeholder position within pixel range via adding additional margins to left and top sides of the div, so that way pixel rounded lines matches physical pixels of monitor, so they look sharp and clean. 

In the following example we show how to listen to window size change event and use Timer to throttle it so our application stays responsive.  

  

 

Comments 

 
#5 Administrator 2018-10-05 18:23
Quoting BashaShaik:
Is there any way that i can print complete organisation chart?

See Client Side PDF Generation Demo
Quote
 
 
#4 BashaShaik 2014-12-23 00:26
Is there any way that i can print complete organisation chart?
Quote
 
 
#3 denys rodriguez 2014-02-04 15:04
Quoting Administrator:
Quoting denys rodriguez:
How I can change the way the children are minimized instead of circles are square.

If you render chart in IE6-IE8 then it uses VML for graphics. VML is quite slow in general, so in order to improve rendering speed, chart uses regular DIVs instead of VML for dots.


apology Might give me an example that I'm new at this thank you very much
Quote
 
 
#2 Administrator 2014-02-04 14:44
Quoting denys rodriguez:
How I can change the way the children are minimized instead of circles are square.

If you render chart in IE6-IE8 then it uses VML for graphics. VML is quite slow in general, so in order to improve rendering speed, chart uses regular DIVs instead of VML for dots.
Quote
 
 
#1 denys rodriguez 2014-02-04 13:59
How I can change the way the children are minimized instead of circles are square.
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support