Page 1 of 1

Tooltip is slow

Posted: Mon Jun 27, 2016 1:43 pm
by 15677821
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?

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>

Re: Tooltip is slow

Posted: Wed Jun 29, 2016 9:35 am
by yeray
Hello,

I've modified a line of your code, because I believe it was wrong. From:

Code: Select all

<div class="class=" col-md-12">
To:

Code: Select all

<div class="col-md-12">
Now, I see in the css you are setting the canvas to use the 90% of the given width:

Code: Select all

#canvas {
            width: 90%;
If you remove that part, I believe everything works fine. And If you draw the zoom rectangle with the mouse, you'll see it is drawn in an incorrect place.
So I believe the width:90% is breaking the cursor coordinates given to the chart.