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.  

  

{jcomments on}

 

Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support