Tooltip is slow
Posted: Mon Jun 27, 2016 1:43 pm
I have added the below CSS class and html code to achieve the chart responsive and working fine. But sometime tooltip is not showing or sometime it took more time to show tool tip. You can reproduce the same issue using sample code. Is there any way to fix the tooltip related issue? or How can we improve the tooltip speed?
One more thing what I observed is that this problem occurs when we assign height and width 100% to canvas using style sheet ( "<canvas id="canv" style="width:100%;height:100%;display:block;padding-left: 0;padding-right: 0; margin-left: 0; margin-right: 0;">")
If I don't set width and height to canvas the chart is displaying out of div(box), so how can we fix tooltip issue in this scenario?
One more thing what I observed is that this problem occurs when we assign height and width 100% to canvas using style sheet ( "<canvas id="canv" style="width:100%;height:100%;display:block;padding-left: 0;padding-right: 0; margin-left: 0; margin-right: 0;">")
If I don't set width and height to canvas the chart is displaying out of div(box), so how can we fix tooltip issue in this scenario?
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Custom Axis Labels Example</title>
<!--[if lt IE 9]>
<script src="../../src/excanvas/excanvas_text.js"></script>
<script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->
<style type="text/css">
.col-md-12 {
width: 100%;
}
#canvas {
width: 90%;
height: 100%;
/*background-color: pink;*/
z-index: 100;
}
</style>
<script src="../../src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1 = new Tee.Chart("canvas");
var pointXY = new Tee.PointXY([355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200,
191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145,
153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273,
276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108,
104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270,
279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275,
269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238,
229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128,
137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276,
279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101,
97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304,
311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163,
154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228,
239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278,
275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220,
210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163,
172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320,
314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262,
256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115,
122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268,
267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95,
96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328,
331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266,
270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108,
104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296,
304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154,
143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239,
250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275,
269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210,
200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172,
183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314,
305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256,
252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122,
128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350,
346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267,
268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96,
98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331,
333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270,
271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104,
101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304,
311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258,
259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143,
135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250,
259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269,
264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200,
191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183,
194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305,
299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252,
244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128,
137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289]);
pointXY.format.stroke.size = 4;
pointXY.pointer.style = "ellipse";
pointXY.pointer.width = 5;
pointXY.pointer.height = 5;
Chart1.addSeries(pointXY);
Chart1.axes.left.setMinMax(80, 360);
Chart1.axes.left.format.stroke.fill = "green";
Chart1.axes.left.title.text = "Left Axis";
Chart1.axes.bottom.title.text = "Bottom Axis";
Chart1.title.text = "Mouse-over Tooltips";
Chart1.title.format.font.style = "18px Verdana";
Chart1.series.items[0].format.stroke.fill = "darkorange";
Chart1.series.items[0].pointer.visible = true;
Chart1.panel.format.stroke.fill = "";
Chart1.panel.format.shadow.visible = true;
tip = new Tee.ToolTip(Chart1);
tip.render = "dom";
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:3; z-index:1000;";
Chart1.tools.add(tip);
tip.ongettext = function (tool, text) { return '<font face="verdana" color="blue" size="1">' + "Text:\n" + text + '</font>'; }
Chart1.legend.visible = false;
Chart1.draw();
}
function resize(chart) {
var canvas = chart.canvas;
var width = 80, height = 70;
var w = width * window.innerWidth / 100;
var h = height * window.innerHeight / 100;
canvas.width = w;
canvas.height = h;
chart.bounds.width = w;
chart.bounds.height = h;
chart.draw();
}
window.addEventListener('resize', function () {
if (Chart1 != undefined)
resize(Chart1);
}, false);
</script>
</head>
<body onload="draw()" >
<div class="class=" col-md-12">
<center>
<br><canvas id="canvas" width="1240" height="460">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</div>
</body>
</html>