I'm using google charts and I'm trying to get the value of the x and y values along with the series name that a user clicks on. I believe I have the X value by using the following in a click event.
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
This get me the X value, but how do I get the series and Y value? Its exactly what shows up on the hover on the point. I just need to be able to grab these values to pass on to another function.
After some research, I've got what I wanted.
//X Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,0))
//Y Axis
console.log(dataTable.getValue(chartObject.getSelection()[0].row,chartObject.getSelection()[0].column));
//Series Label
console.log(dataTable.getColumnLabel(chartObject.getSelection()[0].column))
Related
I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
The current data is displayed in the form of a line chart through dimple.js. If the same value data appears for the year, the points overlap. In this case, I want to display the tooltips for all the overlapping data when I move the mouse over that point. What should I do?
You need to handle mouseover event of Series object like this,
mySeries.addEventHandler("mouseover", function (e){
var xValue = e.xValue; // e.xValue returns X Axis value of hovered data point
var yValue = e.yValue; // e.yValue returns Y Axis value of hovered data point
// Filter your data with both xValue and yValue, to find overlapped `series` data.
});
This sample demonstrates how to override default tooltip and might be helpful for you too
http://dimplejs.org/advanced_examples_viewer.html?id=advanced_custom_styling
I have made a scatter plot by merging two individual scatter plots with data sets [x,y1] and [x,y2] (two values of y for one value of x). And I want to create tooltips for all the points depicting their x and y coordinates .So tooltips depicting any point with coordinates (x,y1) should have the value of x and y1 and tooltips with coordinates x and y2 should show (x,y2) .Is there any way to create such a tooltip?
P.S :- The chart also has overlapping points.
Use 'title' in the x or y..
For Ex: {x=value; title='Title Name'}
currently i am using chartjs to generate chart data for 12 countries.
i have date for 12 countries in Line Chart.
but the problem is that i cannot get country details when i hover over the points. Instead i get x and y axis values which are time and (sum) on y axis. how could i get data about country when i hover.
also if clicked on certain point i should get that data on click.
supposes i hovered on england and cliecked on it i should get a alert box containing england data only.
is there any solution to it in chartjs
The second point's functionality has been added in the ChartJS v2 beta if you're still having problems. As for the first point I don't think that's easily possible unless you're just wanting what country/dataset it is.
I'm using barChartPlotter to show power (kWh) values for each day and it works great.
Now I would like to put price (kWh value * 0.08) on y2 axis. So that on y axis I have kWh and on the right y2 axis price (but to have only 1 column). I tried adding extra y2 into axes option, but I cannot get it work without adding another series.
Is this possible?
It's not. You have to add another series.