Steema Central

Posted: **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.

Thanks for your help.

Posted: **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;
  }

Posted: **Thu Jun 16, 2016 9:20 am**

Hello,

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

Regards

Steema Central

Cursor with values

Cursor with values

Re: Cursor with values

Re: Cursor with values