Page 1 of 1

Cursor with values

Posted: Wed Jun 15, 2016 12:11 pm
by 16578476
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.

Re: Cursor with values

Posted: Thu Jun 16, 2016 8:47 am
by yeray
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;
  }

Re: Cursor with values

Posted: Thu Jun 16, 2016 9:20 am
by 16578476
Hello,

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

Regards