Cursor with values

TeeChart for Javascript for the HTML5 Canvas
Post Reply
Menant.D
Newbie
Newbie
Posts: 19
Joined: Mon Jun 06, 2016 12:00 am

Cursor with values

Post by Menant.D » Wed Jun 15, 2016 12:11 pm

Hello,

I'm searching a solution to show with the cursor tool the values of all Series in my Chart.

I've already done something with the Tooltip Tool but there are synchronization problems and the mouse pointer needs to be focused on a serie.

Code: Select all

                tip=new Tee.ToolTip(Chart1);
		tip.render="dom";
		tip.autoHide=false;
		tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
		tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
		tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:1; z-index:1000;";

		console.log(tip);
		Chart1.tools.add(tip);
		tip.onhide=function() { scaling=0; poindex=-1; }
		tip.ongettext=function( tool, text, series, index) {
		var s = '';
		for (i = 0; i < Chart1.series.count(); i++) { 
			if(Chart1.getSeries(i).data.values.length> index){
				s = s + '<font face="verdana" color="black" size="1"><strong>'+ Chart1.getSeries(i).title+'</strong></font>';
				s =	s +'<br/><font face="verdana" color="red" size="1">Value: '+Chart1.getSeries(i).data.values[index].toFixed(2)+'</font><br/>';
			}
		}		
		document.getElementById('values').innerHTML = s;
		return s;
		}  
If it is possible I want that (image below). Cursor tool with these options : Mouse: follow mouse:true, Annotation: visible:true.

Image

Thanks for your help.

Yeray
Site Admin
Site Admin
Posts: 8514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Cursor with values

Post by Yeray » Thu Jun 16, 2016 8:47 am

Hello,

It sounds very similar to what the CursorTool_Interpolatedemo does, but with a ToolTip, isn't it?
Playing with that demo and your code snipped, I got this:
- Call tip.refresh at the cursor tool onchange:

Code: Select all

    t.onchange = function (p) {
        xValue = Chart1.axes.bottom.fromPos(p.x);
        posXLabel.textContent = 'X Value = ' + xValue.toFixed(2);
        for (var i = 0; i < Chart1.series.items.length; i++) {
            posYLabel = document.getElementById('ypos' + i);
            posYLabel.textContent = Chart1.series.items[i].title + ' Y Value = ' + interpolateLineSeries(Chart1.series.items[i], xValue).toFixed(2);
        }
        tip.refresh(Chart1.getSeries(0), 0);

        changeTheme(Chart1, "minimal");
        Chart1.draw();
  };
- Remove the hide function at the ToolTip initialization so it can't be hidden:

Code: Select all

tip.hide=null;
- Use the interpolateLineSeries function at ToolTip ongettext function so it correctly updates the texts:

Code: Select all

  tip.ongettext=function( tool, text, series, index) {
    var s = '';
    for (var i = 0; i < Chart1.series.count(); i++) {
      if(Chart1.getSeries(i).data.values.length> index){
        s = s + '<font face="verdana" color="black" size="1"><strong>'+ Chart1.getSeries(i).title+'</strong></font>';
        s = s +'<br/><font face="verdana" color="red" size="1">Value: '+interpolateLineSeries(Chart1.getSeries(i), xValue).toFixed(2)+'</font><br/>';
      }
    }
    return s;
  }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Image Please read our Bug Fixing Policy

Menant.D
Newbie
Newbie
Posts: 19
Joined: Mon Jun 06, 2016 12:00 am

Re: Cursor with values

Post by Menant.D » Thu Jun 16, 2016 9:20 am

Hello,

Thanks a lot, it is exactly what I need ! Good job

Regards

Post Reply