We Keep Coding

(google charts) I want to show linechart Y-value in a tooltip on mouseover?

How could I implement such mouseover effect that whenever mouse is over the linechart it shows every lines Y-value in an tooltip on hovered X?
So, in the end by moving mouse over the chart it should always show a tooltip that is updated constantly with Y value based on changed X? Now it shows tooltip only on X-scales steps e.g. 2010,2011,2012,2013,2014...

I don't have time at this very moment to write a complete solution, but I can try to point you in the right direction in terms of the part you will need that is directly related to the Google Charts API.
There Is Not A Simple Solution
First off, I'd like to make it very clear that there is not, to my knowledge, a simply solution built into the Google Charts API for this. Anything you right for this will involve rendering your own tooltip element, positioning it to the mouse location, and filling the tooltip with data yourself.
A JavaScript Framework of your choice will probably help a lot. Most have plugins or modules to handle mouseover and mouse position detection, though I can't recommend any specifically because I haven't tried this.
Chart Layout Interface
What you need to get the data values belonging to the mouse location is the Chart Layout Interface. You can get this as follows:
// create a line chart and set up a variable to store your interface
// on outside the scope of your ready handler, so you can use the
// interface in your mouse event code.
var layoutInterface;
var chart = new google.visualization.LineChart(document.getElementById('container-id'));
// set up a handler for the chart's ready event
// the chart layout interface is not available until the chart has
// been drawn
var readyHandler = function(){
layoutInterface = chart.getChartLayoutInterface();
};
// register the event handler
google.visualization.events.addListener(chart, 'ready', readyHandler);
I learned this from the demo here.
You will be using the getHAxisValue(xCoordinate) and getVAxisValue(yCoordinate) methods on the layout interface to get the data values corresponding to the x and y coordinates of the chart. The coordinates are relative to the chart's container element. See the Line Chart Documentation for information on methods available on the layout interface.
Mouse Event Handling
The mouse handling part of this is beyond the scope of my knowledge, but I do know that it is possible. I think you need to register a mouse enter event handler on your chart's container element, which would then register a mouse move, and mouse exit on the same element. The mouse exit would set display:none on your tooltip element and de-register the mouse move handler. The mouse move handler would set the absolute position of your tooltip element to the mouse location, and set it's content to the values retrieved from the chart layout interface.
Good Luck!

Highcharts -- Dynamically apply "halo" effect to points without triggering hover event

In Highcharts, is there a way to dynamically apply "halo" effect to points in scatter type charts without triggering hover event?
This is what I mean by halo:
http://api.highcharts.com/highcharts#plotOptions.series.states.hover.halo

You can call setState function on point and then apply SELECT / HOVER.
$('#btn').click(function(){
chart.series[0].data[2].setState('hover'); //alternatively SELECT state.
});
Example: http://jsfiddle.net/74s1cbmq/1/

C3 Trigger animation and assign id to paths

I'm using c3.js which is a "D3-based reusable chart library." I have also created my own legend for a donut chart with a pie chart inside. I want to link the legend and charts so that if I click a legend item, it'll trigger animation on both the legend div and the corresponding path element on the donut/pie chart, or vice versa (clicking on the pie/donut path will trigger animation on both). I know you can set onclick event listeners for the c3 items, but without any id I can't identify the corresponding legend div. Also, if I set a click handler on the legend divs, I won't know the corresponding path and I also don't know how to trigger c3's built in click animations.
EDIT: I found that you can trigger a selected state (http://c3js.org/reference.html#api-select) but you must pass it an id. On my charts, there are no id's to pass in. Is there a way to set custom id's for each data point?

In order to use the select API call, you need not assign your own id. What you can do, is pass in the data set represented by the graph, and then the index(es) of the data point(s) in the data set to select.
For example, your donut chart is graphing a dataset called salesBreakdown which has 10 elements. When somebody clicks on the first div on the legend, you can call:
chart.select(['salesBreakdown'], [0], true);
This will set the selected state on the arc corresponding to salesBreakdown[0]. The true resets the state of all other arcs, you can leave this false if you want to do multiselect or something of the sort.

Is it possible to select a specific point in javascript HighCharts programatically?

Assuming I have the following:
http://www.highcharts.com/stock/demo/basic-line
Notice that when you hover on the chart, you can see a vertical line through the "column" where your mouse is hovered over.
Is there some function or method I can call so that I can click a button and have the vertical column/selected datapoint be triggered programatically without having to hover the mouse over the graph itself?

Update via mouseover in google charts

I'm using Google charts to interactively draw some data.
I want to draw two charts. The first chart plots f(x) vs. x. The second chart plots g(x,y) vs. y (for a fixed value x). On mouseover for the first chart, the x value will be used to redraw g(x,y) vs. y.
For example, on mouseover of x=1 on the first chart, the second chart would refresh, drawing g(1,y) vs. y.
The only way I've been able to accomplish this was to manually bind the mouseover event in javascript, and trigger a full redraw of the second chart (by erasing its data and copying in data with the moused over x value). However, there is a built-in mechanism to redraw the chart using values from controls (e.g. a slider, example here).
Does anyone know if there is a way to bind two charts so that the mouseover event can be used to redraw one chart with new parameters?

Have a look at the Programmatic Control Changes example. You can change the lower and upper bounds of the slider by code:
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
If you choose a lowValue and highValue of both 5 for example only rows containing this value for the specified column will be shown. Call this inside your onmouseover event of the first chart:
google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
// get the value for x in the current row from the data table
var xValue = data.getValue (e.row, 0);
// set the new bounds of the slider
slider.setState({'lowValue': xValue, 'highValue': xValue});
// update the slider (and chart2)
slider.draw();
}
);
As you will not want the slider being visible, just hide it:
// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";