How to add mouseover tooltip in google charts sankey diagram - google-visualization

and have been using Google Charts to visualize my data. I have tried to search for the answer to this question but couldn't not find anyone having the same problem as mine, or maybe my problem is really basic. Appreciate if someone can give me a hand.
I built a sankey diagram by following the steps listed in Google Charts - Sankey Diagram.
Here is my chart:
http://kuangkeng.github.io/keng-data-journalism/procurement%20project/sankey/index.html
However I would like to add tooltip to each line/path/link so when users mouseover, they can see the value and other details of the line.
According to Google Charts (the link above), I can fire a mouseover event using 'onmouseover' and 'onmouseout', but Google Charts does not show how to do it for Sankey diagram.
I then came over an example of using 'onmouseover' and 'onmouseout' in a Google Bar Chart:
https://developers.google.com/chart/interactive/docs/examples#mouseovertooltip
So I copied the code, modified and pasted into my code.
google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
function barMouseOver(e) {
chart.setSelection([e]);
}
function barMouseOut(e) {
chart.setSelection([{'row': null, 'column': null}]);
}
When I mouseover, I got the error message "undefined is not a function". You can see the error message appears at the top of the chart when you mouseover the lines.
I tried to use another alternative showed by Google Charts documentation by adding a another column to my data and set its role as 'tooltip' but it didn't work for my chart because Google Sankey Diagram can only accept 3 columns.
Appreciate if someone can have a look or refer me to any solution available. Thanks.

Related

Chart.js custom tooltip events

I m working on charts using the chart.js library. I want to show image gallery like a carousel on click of any segment of pie/doughnut chart. I'm not able to find the proper solution. Please suggest some solution
If I understand correctly what you are trying is to trigger an event after user clicks on chart segment. chart.js has this prototype method getElementAtEvent(); See the documentation.
It seems as a good place to start - you could create some function to open image gallery and call it there.
And the gallery/slider implementation is a separate issue, but if you are using some of the popular ui libraries some of them have a solution for that already. Bootstrap, for example has carousel, and JQuery has many plugins for that purpose. Here are some examples. Hope this helps...

Google Line Chart Material Curve

I have been trying to migrate some existing charts to the newer Google Material view however the Line chart won't allow me to display it with a curved line.
You can see their new chart half way down this link:
https://developers.google.com/chart/interactive/docs/gallery/linechart
Just wondering if anyone has found a way to get this working?
And yes, i am including this in my JSON options:
curveType: 'function',
Any help would be greatly appreciated!
the list of features not working in Material charts can be found here...
Tracking Issue for Material Chart Feature Parity #2143
which includes...
curveType
series.*.curveType

Google Charts: How to overlay text message when dataset is empty?

I am charting selections made by the user. When my page first loads there are no selections.
How do I show some text over the chart like below?
Note:
I don't care about the formatting - my screen capture tool adds that formatting
This is well documented for the depreciated Google Image Charts, but that doesn't help me

Bar chart with values placed on the chart instead of in tooltip

i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!

Using Google Annotated Time Line Chart Without Flash

I want a similar behavior Chart as Google Annotated Time Line Chart to display my Time Series Data from DataBase In our environment we are restricted using Flash .
But i see that Google Annotated Time Line Chart works only with Flash .
I want a similar behavior as of Google Annotated Time Line Chart showing two charts , where the below Chart helps us to select a Range and the Upper Chart displays the Zoomed Area .
I wanted to develop this by taking two divs , but i am struck up as how to maintain synchronization between these two divs (Chart Div and Slider Div)
If anybody developed has developed Google Annotated Time Line Chart Without Flash , please give some inputs as how to develop this .
Thank you very much for reading .
check out https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control
I believe you can do simple annotations also using data roles 'annotation' and 'annotationtext' (not too much styling though). You can find more info here https://developers.google.com/chart/interactive/docs/roles.
I just ran into this:
http://www.highcharts.com/demo/dynamic-master-detail
It's not free but it looks interesting.
there is no other way to make charts in Google without Flash at the moment