Charting Tools - Steema/TeeChartJS GitHub Wiki

Some features are implemented as “tool” objects. These objects can be added to a chart tools array property to activate them.

• Annotations
• Tooltips
• Cursors
• Dragging Points
• Slider
• Scroller
• Series Animations

Custom text can be displayed at any chart position using annotation tools:

Chart1.tools.add( new Tee.Annotation( Chart1, “Hello”, 50, 50 ) );

The annotation object has a format, text and position properties.

Annotations can also act as buttons when using the onclick event:

var  b1=new Tee.Annotation(Chart1, “button 1”, 100, 100);
b1.cursor="pointer";
b1.onclick=function(button,x,y) { alert("Clicked button 1"); }
Chart1.tools.add( b1 );

This tool displays series data when moving the mouse over series data point.

var  tip=new Tee.ToolTip(Chart1);
tip.format.font.style="16px Tahoma";
Chart1.tools.add(tip);

The ToolTip tool provides onshow, onhide and ongettext events.

Draggable cursor lines are implemented as a tool object:

var t=new Tee.CursorTool(Chart1);
t.format.stroke.size=2;
t.format.stroke.fill="#BB0000";
Chart1.tools.add(t);

The cursor tool includes a direction property (to display cursor as an horizontal line, vertical or both) and an onchange event that is triggered when the cursor is dragged.

The DragTool implements mouse / touch point dragging.

Chart1.tools.add(new Tee.DragTool(Chart1));

Includes onchanging and onchanged events.

The target property determines which series and which series point index is being dragged.

A generic slider control that can be used inside a chart to change any value.

var slider=new Tee.Slider(Chart1);
slider.min=1;
slider.max=100;
slider.position=10;
slider.thumbSize=12;
slider.horizontal=true;
slider.bounds.x=50;
slider.bounds.y=10;
slider.bounds.width=150;
slider.bounds.height=20;
slider.onChanging=function(slider,value) {
  Chart1.title.format.font.style = value.toFixed(0) + “ Verdana”;
  return value;
}

Chart1.tools.add(slider);

The scroller tool displays a simplified view of another chart and allows scrolling it.

Please refer to this demo for a complete example.

Simple animations performed by changing axis scales or rotating transformations:

var a=new Tee.SeriesAnimation(Chart1);
a.duration=500; // milliseconds
Chart1.tools.add(a);

The animate method to start the animation can be called for example from an html button:

<BUTTON type="button" onclick="Chart1.tools.items[0].animate();">Animate</BUTTON>