Display values in graph by cursor position
Closed, DeclinedPublicFeature
Actions

Assigned To

None

Authored By

	Baum64
	Aug 16 2021, 12:40 PM

Description

Feature summary (what you would like to be able to do):
It would be nice if plots/graphs could show the exact y values of the curves at the position of the cursor on the x axis

Steps to reproduce (a list of clear steps to create the situation that made you report this, including full links if applicable):

Create Graph: {{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legende|type=stackedarea|x=1,2,3,4,5,6|y1Title=Jahr|y1=10,12,6,14,2,10|y2=2,4,6,8,13,11|y3=5,2,6,1,13,1|interpolate=monotone|colors=seagreen,orchid,red}}

or try here: https://de.wikipedia.org/wiki/Benutzer:Baum64/Artikelentwurf

hover with curser over the compiled graph
Position/section is alredy recognised and coloured red, but no values of the three lines is displayed

Use case(s) (describe the actual underlying problem which you want to solve, and not only a solution):
The data is not visible in the graph despite being in the code behind it. E.g. if you hover over position x=2 it would show y1=2, y2=12, y3=2.
Else to make the values visible one needs to create a wikitable that is redundant. A Table on its own is not easy to visualise and can require lots of space. Precise values and trends in data tables should be visualized in a "interactive" graph and display precise values at the position of the cursor.

Thank you for ideas to implement this!

Event Timeline

Baum64 created this task.Aug 16 2021, 12:40 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 16 2021, 12:40 PM

Theklan subscribed.Sep 26 2021, 7:39 PM

I'm sure this can already be done with Vega. You can also make it show entire popups with information about what data you are hovering, like the map graphs do. Please consult Vega resources on how to use Vega.

Sorry but the current used Vega version does not support tooltips (text
hover), I am perhaps missing something.

Le jeu. 20 janv. 2022 à 15:21, TheDJ <no-reply@phabricator.wikimedia.org> a
écrit :

TheDJ a fermé cette tâche en tant que "Declined".
TheDJ a ajouté un commentaire. View Task
https://phabricator.wikimedia.org/T288949

I'm sure this can already be done with Vega. You can also make it show
entire popups with information about what data you are hovering, like the
map graphs do. Please consult Vega resources on how to use Vega.

*DÉTAIL DE LA TÂCHE*
https://phabricator.wikimedia.org/T288949

*PRÉFÉRENCES DE COURRIEL*
https://phabricator.wikimedia.org/settings/panel/emailpreferences/

*To: *TheDJ
*Cc: *TheDJ, Theklan, Aklapper, Baum64, Timbaaa, Pietrasagh, Bouzinac,
Esc3300, Base, fbstj, Yurik, Jay8g

Yes it does, see for example the examples at: https://www.mediawiki.org/wiki/Extension:Graph/Demo#Vega_2.0_interactive_examples
Or for instance: https://eu.wikipedia.org/wiki/Giza_Immunoeskasiaren_Birusa#Epidemiologia

The template you are using just hasn't implemented them.
P.S. I'm not saying it is easy to do ....Vega is difficult and you really need to learn the language if you want to make use of all of its features. But it can be done. Nothing is blocking people from making very difficult graphs with lots of features, other than learning a lot about Vega ;)

And where can we find documentation on how to implement it?

Apart from https://www.mediawiki.org/wiki/Extension:Graph/Demo I guess that would be http://vega.github.io/vega-editor/ in combination with https://www.mediawiki.org/wiki/Help:Templates or such

In T288949#7636592, @Theklan wrote:

And where can we find documentation on how to implement it?

Per Google, https://vega.github.io/vega/

In T288949#7636592, @Theklan wrote:

And where can we find documentation on how to implement it?

you google Vega graphs.. https://vega.github.io/vega/docs/ (note that this documentation is for vega3 and later while we are still on Vega2, but some more googling should allow you to surface the differences between Vega 2 and later versions. )

Tooltipping would greatly improve the end user experience with graphs in
wiki. If anyone could update one of the most common graph template on
enwiki with tooltipping, it'd be great.

Le jeu. 20 janv. 2022 à 15:46, Aklapper <no-reply@phabricator.wikimedia.org>
a écrit :

Aklapper a ajouté un commentaire. View Task
https://phabricator.wikimedia.org/T288949

Apart from https://www.mediawiki.org/wiki/Extension:Graph/Demo I guess
that would be http://vega.github.io/vega-editor/ in combination with
https://www.mediawiki.org/wiki/Help:Templates or such

*DÉTAIL DE LA TÂCHE*
https://phabricator.wikimedia.org/T288949

*PRÉFÉRENCES DE COURRIEL*
https://phabricator.wikimedia.org/settings/panel/emailpreferences/

*To: *Aklapper
*Cc: *Bouzinac, TheDJ, Theklan, Aklapper, Baum64, Timbaaa, Pietrasagh,
Esc3300, Base, fbstj, Yurik, Jay8g

Thanks for the links and the tips. I will try to implement this with the existing documentation. This task was about asking for help, because I felt that the original documentation page wasn't enough. I'm not an advanced user in Vega, and I feel difficult to find info *on wiki* about how to do cool stuff we could be doing.

I fell that the answers here are quite harsh. I took the time, as a volunteer, to search, develop, even correct some things in the code, and is self-evident that I know how to google things. Asking for documentation, even if obvious for others, can be answered in a more polite way.

Thank you Theklan and Bouzinac, I feel the same.
By far the most common diagrams are of line or column type, see https://www.mediawiki.org/wiki/Extension:Graph/Demo/OverviewDetail
However it is yet not possible to get the exact values displayed, that are in the code of the diagram anyway.

I am sure it is possible and that is the reason I created this task. Unfortunately there seems to be no one who can actually program in Vega to give more specific advice on how to do so.
If there were just one template it could be adapted and distributed to many wikipedia sites...

Hello, sorry, I did not mean to be unpolite.

Vega does show tooltips, eg this very simple sample
https://vega.github.io/editor/#/examples/vega/bar-chart
Plus, as you said, there are somehow tooltippings/mouse interaction with
the demo on the mediawiki page.
What's unclear, is that they are under Vega 5.0 and (if I have got it well)
the module "Graph" of mediawiki is only on Vega 2.0. Does 2.0 prevent the
tooltipping events (on mouse hover, etc) or to be written differently ? Is
this the code needed to be produced by the Graph module so that tooltips
are possible ?

"signals": [
  {
    "name": "tooltip",
    "value": {},
    "on": [
      {"events": "rect:mouseover", "update": "datum"},
      {"events": "rect:mouseout",  "update": "{}"}
    ]
  }
],

and

"update": {
  "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5

"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2

  "text": {"signal": "tooltip.amount"},
  "fillOpacity": [
    {"test": "datum === tooltip", "value": 0},
    {"value": 1}
  ]
}

Sincerely,

Alexis

In T288949#7638505, @Bouzinac wrote:

Plus, as you said, there are somehow tooltippings/mouse interaction with
the demo on the mediawiki page.
What's unclear, is that they are under Vega 5.0 and (if I have got it well)
the module "Graph" of mediawiki is only on Vega 2.0.

MediaWiki ONLY supports vega2. So the interactivity you see on the demo page is also written in vega2.

Does 2.0 prevent the tooltipping events (on mouse hover, etc) or to be written differently ? Is
this the code needed to be produced by the Graph module so that tooltips are possible ?

Its likely different in vega5 yes. I don't know exactly know either.

Display values in graph by cursor positionClosed, DeclinedPublicFeatureActions

Description

Event Timeline

Display values in graph by cursor position
Closed, DeclinedPublicFeature
Actions