Cursor with values

[Menant.D]

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.



Thanks for your help.

[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;
  }

[Menant.D]

Hello,

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

Regards