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";
Related
I have a chartJS line graph, with x-axes labels being the last 72 hours on each hour mark ( for example: [8:00am, 9:00am, 10:00am,...]). Is there a way I can return the closest xAxis label on click? I have found a way to return the x-y coordinates of the graph, but these coordinates are in pixels, and the graph is able to resize its self based on the size of the browser window. If I were to take into account for the current browser window size, and the number of labels displaying, I could calculate which label would be closest, but I am hoping that there is an easier way to do this.
One Idea I have is to return the label that the "ToolTip" is on, on Click. This would be logically equivalent, as in my options I have the tooltip always display for the closest tick whenever the mouse is on the graph. Would it be possible to return the tooltips label onclick?
My ultimate goal is to have access to the nearest x-axis label (as a string) when I click on the graph. Is this possible?
You can add a custom onclick function to the chart and then ask chartjs for the elements at that location.
See this issue for the complete answer with example: get yLabel value onclick chart js
document.getElementById("myChart").onclick = function (evt) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var xLabel = myChart.data.labels[firstPoint._index];
// Do things with your x label
};
I have a nvd3 chart and a html table. I need to update table values as the user moves the mouse over the chart. Is there an event I can use to catch a nvd3 tooltip change and get the date value at the current mouse position?
My first idea was to get the nv.tooltip values on mousemove over the chart element. Not of much help.
$('#chart').mousemove(function(e) {
console.log(nv.tooltip);
});
I have a doughnut chart made by Chart.js. When my mouse comes over a portion, the portion label appears such as RED: 300.
What I want is to show this label in the middle when I click it.
I have the code to write in the middle, but I need to know how to make portions to behave as buttons.
I think you're looking for the getSegmentsAtEvent(evt) method.
canvas.onclick = function(evt){
var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
// => activePoints is an array of segments on the canvas that are at the same position as the click event.
};
If activePoints is empty, that means you can just return because no segment was clicked. Otherwise, go ahead and draw your tooltip.
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!
I'm trying to create a highstock chart which:
Renders an initial chart with one series
After an event (button click) adds another series
Dynamically get's updated by adding points (to both series).
1 and 2 work, but adding points to the newly (dynamically) added series doesn't seem to work, see: http://jsfiddle.net/albertsikkema/KGTBB/1/
When I add the series at chart creation time adding points work, so I'm guessing it has something to do with how the series is added.
The problem is that your navigator is an object within chart.series.
If you console log chart.series you will see that:
0 = Plot line A
1 = The navigator
2 = Plot line B
So you are trying to addPoints onto the navigator series, instead do:
chart.series[0].addPoint([x, y], true, true);
chart.series[2].addPoint([x, y], true, true);
or, a better method would be to target your series by their name.