Cursor with values

TeeChart for Javascript for the HTML5 Canvas

Cursor with values

Postby 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.
Menant.D
Newbie
Newbie
 
Posts: 19
Joined: Mon Jun 06, 2016 12:00 am

Re: Cursor with values

Postby 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 ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8467
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Re: Cursor with values

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

Hello,

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

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


Return to Javascript / HTML5

Who is online

Users browsing this forum: No registered users and 1 guest

cron