Tooltip is slow

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Tooltip is slow

Post by SenSeo » 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?

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>
Last edited by SenSeo on Tue Jun 28, 2016 2:51 pm, edited 1 time in total.
Top
Yeray
Site Admin
Site Admin
Posts: 9613
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:
Contact yeray

Re: Tooltip is slow

Post by Yeray » Wed Jun 29, 2016 9:35 am

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy
Top
Post Reply

Return to “JavaScript / HTML5”