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

Call-out

In order to create call-out widget we have to make instance of its options class primitives.callout.Config and provide some <div> on HTML page as a placeholder for it. Widget creates callout inside of provided div in graphics format dependent on browser: VML in IE6-IE8, Canvas in early versions of Android and in SVG in all other browsers. Widget's instance stays in browser's memory till its placeholder is removed from the web page. So in order to be sure that widget's instance is destroyed and avoid unexpected memory leaks you have to remove HTML elements having widgets inside only with jQuery remove method.

jQuery(".callout").remove();

Be aware that for obvious logical reasons jQuery(".callout").empty() method cleans up widget contents without actual widget  removal, so its state would be invalid after that.

Next example demonstrates creation of call-out widget.

  

 

Comments 

 
#4 Poulomi Nag 2015-03-25 03:40
Quoting Poulomi:
Hi,
I am able to create the callout in a div as shown above. But I need to know how to display the callout on hovering over the dots. Please point towards some code that illustrates my need.

Thanks.


This is resolved now. I was using IE9 in compatibility mode which restricts displaying the callouts. Adding the meta tag (as displayed here :stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e) at the head of my page fixed it.
Thanks!
Quote
 
 
#3 Poulomi 2015-03-24 07:23
Hi,
I am able to create the callout in a div as shown above. But I need to know how to display the callout on hovering over the dots. Please point towards some code that illustrates my need.

Thanks.
Quote
 
 
#2 Administrator 2014-02-06 18:46
Quoting Nevermind:
How can I make callout appear when a button is clicked? Thanks.

Chat provides callout for minimized items for two purposes:
1. In order to make it obvious to the users that actually dots are regular items, but minimized. So it is extended form of mouse over feedback. Any mouse over feedback gives hint to user that object is clickable, so it is important for usability.
2. Callout instantly displays content of minimized item.

So if you need callout to sync application with chart then it is better to change current cursor position to required object.

If you need callout to show more detailed version of item then it is better to make just custom item template and activate it only for cursor item. So your detailed item is not going to obscure items around.

If you need a really large detailed item template then you have a problem of how to place it on the screen and avoid overlapping of actual item you make callout for. So in that case it is better to make a regular popup dialog or place an extra form side by side with chart.
Quote
 
 
#1 Nevermind 2014-02-06 11:12
How can I make callout appear when a button is clicked? Thanks.
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support