Page 1 of 1

PointXY - Tooltip

Posted: Thu Apr 04, 2024 1:40 am
by 17797791
I would like to inquire about how to resolve the tooltip error.
When you hover the mouse pointer over the red square box area, a tooltip will appear.
I would like to inquire about a solution so that the tooltip is displayed only when the mouse pointer is placed on the chart pointer.
Demo source and image are attached.

thank you

============================ Demo source ===================================

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript JSON to Series Example</title>
<meta charset="UTF-8"/>

<!--[if lt IE 9]>
    <script src="../../src/excanvas/excanvas_text.js"></script>
    <script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../../src/teechart.js" type="text/javascript"></script>
<script src="../../src/teechart-extras.js" type="text/javascript"></script>
<script src="../../src/teechart-table.js" type="text/javascript"></script>
<script src="../3rd_party/jquery/js/jquery-1.7.1.min.js"></script>
<script src="../demo.js" type="text/javascript"></script>

<!-- Bootstrap -->
<link href="../3rd_party/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../3rd_party/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<!-- Custom Theme Style -->
<link href="../3rd_party/build/css/custom.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../demo.css">

<script type="text/javascript">
var Chart1, Chart2;

function draw() {

  // XY Data, multiple series:
  Chart2 = new Tee.Chart("canvasXY");
  Chart2.title.text="JSON XY to Chart";

  loadXYData(Chart2);
}

function loadXYData(chart) {
  var jsonXY = document.getElementById("jsonXY").value,
      list = JSON.parse(jsonXY).chart,
      xyLine;

  chart.series.items=[];

  for (var t=0; t<list.length; t++) {
     xyLine = chart.addSeries(new Tee.PointXY());
     xyLine.pointer.visible=true;
     xyLine.pointer.style=list[t].series.pointer;

     xyLine.loadJSON( { value: list[t] });
  }

  changeTheme(chart, "minimal");
  chart.draw();
  
  
	//tooltip
	var tooltip = new Tee.ToolTip(chart);
		tooltip.render = "dom";
		tooltip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
		tooltip.domStyle = tooltip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
		tooltip.domStyle = tooltip.domStyle + "border-style:solid;border-color:#ff0000;border-width:1px; z-index:1000;";

	chart.tools.add(tooltip);

	tooltip.onhide=function() { scaling=0; poindex=-1; }

	var t = new Tee.CursorTool(chart);
	t.direction="both";

	tooltip.onshow=function(tool,series,index) {
	  if (!enableCursor){
		chart.tools.add(t);
		enableCursor = true;
	  }
	}	
	
	tooltip.old_refresh=tooltip.refresh;
      
	tooltip.refresh = function(series,index) {
		tooltip.old_refresh(series,index);
	}

	tooltip.ongettext = function( tool, text, series, index)
	{
		return "<font color='black' >title : " + series.title + " text : " + text + "</font>";
	}
}

</script>
</head>
<body onload="draw();">
	<div class="right_col" role="main">
		<div class="page-title">
			<div class="title_left">
				<h3>TeeChart for JavaScript <span class="smallLetters">Tee Chart from JSON</span></h3>
			</div>
		</div>
		<div class="clearfix"></div>
	
		<div class="row">
			<div class="x_panel">
				<div class="x_title">
					<h2><span class="smallLetters">JSON XY to Chart</span></h2>
					<ul class="nav navbar-right panel_toolbox">
						<li><a class="collapse-link" onclick="showHide(this)"><i class="fa fa-chevron-up"></i></a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="x_content">
					<div style="float:left;">
						<b>JSON data, multiple series including X and Y values:</b><br/>
						<textarea id="jsonXY" rows="20" cols="40" wrap="soft" style="width: auto">
{
  "chart": [
    {
      "series": {
        "name":"Data 1",
        "color":"Blue",
        "metric":"Y Axis",
        "category":"X Axis",
        "pointer":"rectangle",
        "point": [
          { "value":123, "x": 21 },
          { "value":456, "x": 14 },
          { "value":789, "x": 33 }
        ]
      }
    },
    {
      "series": {
        "name":"Data 2",
        "color":"Red",
        "metric":"Y Axis",
        "category":"X Axis",
        "pointer":"triangle",
        "point": [
          { "value":321, "x": 15 },
          { "value":555, "x": 24 },
          { "value":111, "x":  3 }
        ]
      }
    },
    {
      "series": {
        "name":"Data 3",
        "color":"Green",
        "metric":"Y Axis",
        "category":"X Axis",
        "pointer":"ellipse",
        "point": [
          { "value":321, "x": 35 },
          { "value":555, "x": 17 },
          { "value":111, "x": 23 }
        ]
      }
    }
  ]
}
						</textarea>
						<br/>
						<button type="button" onclick="loadXYData(Chart2)">Refresh</button>
					</div>

					<br><canvas id="canvasXY" height="400">
					This browser does not seem to support HTML5 Canvas.
					</canvas>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Re: PointXY - Tooltip

Posted: Mon Apr 08, 2024 1:35 pm
by yeray
Hello,
yk.kim wrote:
Thu Apr 04, 2024 1:40 am
I would like to inquire about a solution so that the tooltip is displayed only when the mouse pointer is placed on the chart pointer.
Try setting continuous property to false. Ie:

Code: Select all

  for (var t=0; t<list.length; t++) {
     xyLine = chart.addSeries(new Tee.PointXY());
     xyLine.pointer.visible=true;
     xyLine.pointer.style=list[t].series.pointer;

     xyLine.loadJSON( { value: list[t] });
     xyLine.continuous = false;
  }