Tooltips for Multiple Charts

[jpmb...@outlook.com]

Hello!

I found smoothie charts and I'm trying to build an application that will use multiple charts in a dashboard.  An issue I have run into is being able to display a tool tip for each chart/graph.  The examples only show you how to use the following, but it only works for a single chart/graph.  Once a second chart/graph is added it breaks the tooltip on all the charts.  How can this be modified to work for multiple charts/graphs (like four)?

div.smoothie-chart-tooltip {

background: #444;

padding: 1em;

margin-top: 20px;

font-family: consolas;

color: white;

font-size: 10px;

pointer-events: none;

}

James

[Drew Noakes]

Sounds like a bug. I've opened an issue on GitHub:

https://github.com/joewalnes/smoothie/issues/88

Can you make a pull request?

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.
To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[James McGril]

Hi Drew!  Thanks for the quick reply!  I’ve never made a pull request before.  I will be happy to do that but can you send me a good link with instructions on how to do this and what info they will need?

 

James

--

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

 

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to smoothie-char...@googlegroups.com.

[Drew Noakes]

Here are some links that look like they might be helpful.

https://git-scm.com/book/en/v2/GitHub-Contributing-to-a-Project

https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/

http://hisham.hm/2016/01/01/how-to-make-a-pull-request-on-github-a-quick-tutorial/

Drew

On 18 October 2017 at 18:56, James McGril <jpmb...@outlook.com> wrote:

Hi Drew!  Thanks for the quick reply!  I’ve never made a pull request before.  I will be happy to do that but can you send me a good link with instructions on how to do this and what info they will need?

 

James

 

From: drewn...@gmail.com [mailto:drewn...@gmail.com] On Behalf Of Drew Noakes
Sent: Wednesday, October 18, 2017 4:27 AM
To: smoothie-charts <smoothie-charts@googlegroups.com>
Subject: Re: [smoothie-charts] Tooltips for Multiple Charts

 

Sounds like a bug. I've opened an issue on GitHub:

 

https://github.com/joewalnes/smoothie/issues/88

 

Can you make a pull request?

On 17 October 2017 at 14:53, <jpmb...@outlook.com> wrote:

Hello!

 

I found smoothie charts and I'm trying to build an application that will use multiple charts in a dashboard.  An issue I have run into is being able to display a tool tip for each chart/graph.  The examples only show you how to use the following, but it only works for a single chart/graph.  Once a second chart/graph is added it breaks the tooltip on all the charts.  How can this be modified to work for multiple charts/graphs (like four)?

 

div.smoothie-chart-tooltip {

background: #444;

padding: 1em;

margin-top: 20px;

font-family: consolas;

color: white;

font-size: 10px;

pointer-events: none;

}

 

James

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

[James McGril]

Drew,

I can submit the PR now. But, I will need help with making any changes. Will the original developers assist?

James

Sent from Nine

---

From: Drew Noakes <dr...@drewnoakes.com>
Sent: Oct 19, 2017 4:02 AM
To: smoothie-charts

To unsubscribe from this group and all its topics, send an email to smoothie-char...@googlegroups.com.

[Dan Chen]

Hi,  I'm also displaying multiple charts on a page.  The only problem I have is flickering.  I modified the hello world example with two charts and attached the html page.

[James McGril]

I see the flicker and it’s really bad.  So, they do show up but with a lot of flickerin…  it’s not “smooth”….

--

[James McGril]

Actually, you are getting two different problems with the tooltip.

 

#1.  Chart 1. The tool tip will not show up at all unless you start to wiggle the mouse over the chart.  Only then will you see a tooltip and the tooltip is not solid.  It flickers very quickly and is unreadable.

 

#2.  Chart 2.  When you hover your mouse over chart 2 the tooltip toggles between being solid and readable (which is desired) to a very fast unreadable flicker.  This all happens while leaving the mouse pointer alone and simply on the graph.

 

James

 

 

 

From: smoothi...@googlegroups.com [mailto:smoothi...@googlegroups.com] On Behalf Of Dan Chen
Sent: Thursday, October 19, 2017 12:23 PM
To: Smoothie Charts <smoothi...@googlegroups.com>
Subject: [smoothie-charts] Re: Tooltips for Multiple Charts

 

Hi,  I'm also displaying multiple charts on a page.  The only problem I have is flickering.  I modified the hello world example with two charts and attached the html page.

--

[Dan Chen]

Yes, I forgot to mention since my updates only occur every 5 seconds, I have the chart.options.limitFPS=1 so it doesn't flicker as much as the example code.  But yes it still does intermittently flicker.  #1 still occurs though, just need to hold the mouse over the plot line and the tooltip will show up.  

[James McGril]

I wonder if there is a real fix to the problem. Other grap/chart frameworks don't have that problem...

James

Sent from Nine

---

From: Dan Chen <danc...@gmail.com>
Sent: Oct 20, 2017 12:21 PM
To: Smoothie Charts
Subject: Re: [smoothie-charts] Re: Tooltips for Multiple Charts

[James McGril]

Dan,

 

I’m not sure the FPS is the issue.  This problem only happens when more charts are added to the same page.  The CSS for the tooltip is being applied to all the graphs… maybe each graph needs it own CSS???  I’m not sure… I wouldn’t think it would but it seems that way.  I have seen other strange behavior when trying to stream the same data to multiple charts where the line and tool tip show up on one chart, but the data shows up on another.

 

If we could solve those minor issues I could go into beta with this but as it stands I might have to try metricsgraphics or something based on SVG…not sure.  I would like to use this because it is so light and simple, but I don’t know how to fix it…

 

James

 

From: smoothi...@googlegroups.com [mailto:smoothi...@googlegroups.com] On Behalf Of Dan Chen
Sent: Thursday, October 19, 2017 12:23 PM
To: Smoothie Charts <smoothi...@googlegroups.com>
Subject: [smoothie-charts] Re: Tooltips for Multiple Charts

 

Hi,  I'm also displaying multiple charts on a page.  The only problem I have is flickering.  I modified the hello world example with two charts and attached the html page.

--

[James McGril]

Drew,

 

Can multiple issues be submitted in the same pull request?  Or, do I have to use the process below for each bug or feature enhancement?

 

James

 

 

From: drewn...@gmail.com [mailto:drewn...@gmail.com] On Behalf Of Drew Noakes
Sent: Thursday, October 19, 2017 4:02 AM
To: smoothie-charts <smoothi...@googlegroups.com>
Subject: Re: [smoothie-charts] Tooltips for Multiple Charts

 

Here are some links that look like they might be helpful.

--

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-char...@googlegroups.com.

[James McGril]

All,

 

Since FPS doesn’t affect the tooltip display and this issue only appears when there are multiple charts added to the same page, my guess is the following code is responsible for the problem.  I believe if each chart gets its own rendered instance of a tool tip this will fix the problem because each tooltip is trying to display the data at a point on a graph.  In the case of the same tool tip across multiple charts each chart could have a different data value depending on where the mouse is hovered over and I believe that is the problem causing the flickering.  Can someone assist with an idea on how to fix this in the javascript so each graph gets its own tooltip?

 

    SmoothieChart.prototype.getTooltipEl = function () {

        // Use a single tooltip element across all chart instances

        var el = SmoothieChart.tooltipEl;

        if (!el) {

            el = SmoothieChart.tooltipEl = document.createElement('div');

            el.className = 'smoothie-chart-tooltip';

            el.style.position = 'absolute';

            el.style.display = 'none';

            document.body.appendChild(el);

        }

        return el;

    };

 

    SmoothieChart.prototype.updateTooltip = function () {

        var el = this.getTooltipEl();

 

        if (!this.mouseover || !this.options.tooltip) {

            el.style.display = 'none';

            return;

        }

 

        var time = this.lastRenderTimeMillis - (this.delay || 0);

 

        // Round time down to pixel granularity, so motion appears smoother.

        time -= time % this.options.millisPerPixel;

 

        // x pixel to time

        var t = this.options.scrollBackwards

            ? time - this.mouseX * this.options.millisPerPixel

            : time - (this.canvas.offsetWidth - this.mouseX) * this.options.millisPerPixel;

 

        var data = [];

 

        // For each data set...

        for (var d = 0; d < this.seriesSet.length; d++) {

            var timeSeries = this.seriesSet[d].timeSeries,

                // find datapoint closest to time 't'

                closeIdx = Util.binarySearch(timeSeries.data, t);

 

            if (closeIdx > 0 && closeIdx < timeSeries.data.length) {

                data.push({ series: this.seriesSet[d], index: closeIdx, value: timeSeries.data[closeIdx][1] });

            }

        }

 

        if (data.length) {

            el.innerHTML = this.options.tooltipFormatter.call(this, t, data);

            el.style.display = 'block';

        } else {

            el.style.display = 'none';

        }

    };

 

    SmoothieChart.prototype.mousemove = function (evt) {

        this.mouseover = true;

        this.mouseX = evt.offsetX;

        this.mouseY = evt.offsetY;

        this.mousePageX = evt.pageX;

        this.mousePageY = evt.pageY;

 

        var el = this.getTooltipEl();

        el.style.top = Math.round(this.mousePageY) + 'px';

        el.style.left = Math.round(this.mousePageX) + 'px';

        this.updateTooltip();

    };

 

    SmoothieChart.prototype.mouseout = function () {

        this.mouseover = false;

        this.mouseX = this.mouseY = -1;

        if (SmoothieChart.tooltipEl)

            SmoothieChart.tooltipEl.style.display = 'none';

    };

[Drew Noakes]

Hi all,

Apologies for the delay in responding. Yes, the two charts are fighting over the same tooltip element, causing the flicker.

I agree it would be worth giving each chart its own instance of the tooltip element.

So, instead of caching it 'statically' on the SmoothieChart type, you could cache it on the instance.

Resulting code would look like this (untested):

SmoothieChart.prototype.getTooltipEl = function () {

    // Create the tool tip element lazily

    if (!this.tooltipEl) {

        this.tooltipEl = document.createElement('div');

        this.tooltipEl.className = 'smoothie-chart-tooltip';

        this.tooltipEl.style.position = 'absolute';

        this.tooltipEl.style.display = 'none';

        document.body.appendChild(this.tooltipEl);

    }

    return this.tooltipEl;

};

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

[James McGril]

Drew,

 

This works beautifully!  I tested it with three charts/graphs on the same page and no issues.  I am moving forward with smoothie for my project!

 

If I want to request a feature would I just email you?

 

James

 

From: drewn...@gmail.com [mailto:drewn...@gmail.com] On Behalf Of Drew Noakes
Sent: Monday, October 23, 2017 5:54 AM
To: smoothie-charts <smoothi...@googlegroups.com>
Subject: Re: [smoothie-charts] Re: Tooltips for Multiple Charts

 

Hi all,

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Drew Noakes]

Glad it works. Can you make a pull request with the fix?

Please use the list for discussion, and the GitHub issue tracker for bugs.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

[James McGril]

Drew,

 

Should I make a branch off or your master?  Or, should I create my own master with a branch for my project (which includes smoothie), and after making a pull request use @mention to contact you?

 

Let me know…  thanks!

 

James

 

 

From: drewn...@gmail.com [mailto:drewn...@gmail.com] On Behalf Of Drew Noakes
Sent: Tuesday, October 24, 2017 5:20 AM
To: smoothie-charts <smoothi...@googlegroups.com>
Subject: Re: [smoothie-charts] Re: Tooltips for Multiple Charts

 

Glad it works. Can you make a pull request with the fix?

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to smoothie-char...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[James McGril]

Actually, I should be able to fork yours.  I just need to find the master on github so I can fork it….

 

I’ll try searching for it…

 

James

[James McGril]

Drew,

 

I think I did it.  I forked your branch.  Then I cloned my fork.  I updated smoothie.js and added a new version number with note and fix.  I submitted the change then made a pull request.  Can you validate that I did this correctly?

[Drew Noakes]

Looks good, thanks. I'll get a new version published on npm soon.

On 28 October 2017 at 16:27, James McGril <jpmb...@outlook.com> wrote:

Drew,

 

I think I did it.  I forked your branch.  Then I cloned my fork.  I updated smoothie.js and added a new version number with note and fix.  I submitted the change then made a pull request.  Can you validate that I did this correctly?

 

James

 

From: smoothie-charts@googlegroups.com [mailto:smoothie-charts@googlegroups.com] On Behalf Of James McGril
Sent: Saturday, October 28, 2017 11:10 AM

To: smoothie-charts@googlegroups.com

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Smoothie Charts" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/smoothie-charts/fCCeDsPzjZA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to smoothie-charts+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.

To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-charts+unsubscribe@googlegroups.com.