How to get data index for given pixel in ChartJs? - javascript

On one hand I have input which is mouse position over the chart. On the other hand I have to call ChartJs function which requires data index (I am manually triggering showing tooltip -- https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html).
I can see there are functions like "getValueForPixel" and "getLabelForValue" but I cannot find function which would translate pixel position into index within the data. Is there such function? If no, how can I translate between those two?

Related

How to get xyz values at mouse position without showing the ResultTable popup in lightning chart js

When moving the mouse over a heatmap in a ChartXY, you can get the xyz values of the mouse position by setting up the AutoCursor and displaying the ResultTable. But how can you get those values as an event for instance or at least by calling a method in the chart component?
You can solve the nearest heatmap data point relative to a location on screen using series.solveNearestFromScreen method.
Please refer to this example for usage reference. While it is using a LineSeries, this methods usage is almost identical for heatmaps.
Something that is unfortunately missing from the documentation (as well as typings) is the property for the data point intensity in case of heatmaps. This you can access via location.cellValue property.

When having mulitple Y lines data, how can I let the chart automatically scale to show them all?

Suppose I have a linechart with multiple lines (the number is dynamic) and I would need to always scale the Y so that all lines are shown - so the scale should always be based on the range with highest values. Is there a way how to it automatically? I found some example with automatic yScaling using d3.max but that is done for a known dataset. In my case, I do not know what range will be the one to use.

translate event in highcharts

Here I am drawing a rectangle in highcharts by selection event ,i am getting the the co-ordinates of the box by translating the axis values of the chart i:e
chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).min)
. My question is how can I get the reverse of this, i:e
event.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).min).
I have attached the fiddle below , please see to it for better understanding of my question, Thanks in advance.
Js-Fiddle containing above question's code.
It seems that what you are looking for are coordinates in pixels from axis scale. If yes, then there is API function for that - Axis.toPixels.
toPixels (Number value, [Boolean paneCoordinates])
Translates a value in terms of axis units in to pixels within the chart.
Parameters:
value: Number A value in terms of axis units.
paneCoordinates: Boolean
Whether to return the pixel coordinate relative to the chart or just
the axis/pane itself.
Returns: Number

Adding dynamic mean to time series chart

I will try to explain my problem as much accurate as possible. I am looking for a javascript chart library filling the two following conditions:
From an ajax request retrieving time series,
display dynamically data when changing the time window.
such as it is perfectly done on highstocks: http://www.highcharts.com/stock/demo/basic-line
And
plot an horizontal line corresponding to the mean,
changing when the user update the time window on the chart.
Actually it is possible to display an horizontal line. But they are fixed on the whole data and do not change accordingly when the time window is modified:
http://www.highcharts.com/stock/demo/yaxis-plotlines
I am quite new to the topic and would like to know if it'sp ossible to modify Highstock classes to have such a result. Or maybe some other js libraries exists?
Using a combination of the answer here:
Highchart, get total of visible series data after setExtremes
And an example of dynamic average using all visible series that I made for a previous question, here:
http://jsfiddle.net/jlbriggs/gweuLegq/
I put together this example, using the afterSetExtremes event, like this:
xAxis : {
events:{
afterSetExtremes:function() {
var ext = this.getExtremes();
getAverage(this.chart, ext.min, ext.max, show, width, avgColor, dashStyle);
}
}
},
Working example here:
http://jsfiddle.net/jlbriggs/c93543yL/
The idea is:
1) capture the afterSetExtremes event
2) get the resulting axis min and max
3) loop through the series data
4) if a point is between the min and max, increment the count, and add the
point's y value to the sum
5) calculate the average accordingly, check for existence of average series, if exists, update, if not, add
It could as easily use a plot line that you add/remove as needed instead of a series, but I like having it as a series so that it has a legend entry.

Get position in array element

In JavaScript, I am unable to figure out how to use the data object in the function below to get the position of the clicked-on data point (e.g. third data point in the series).
Using chartsNew.js, a popular fork of charts.js, this code shows the value of the datapoint at the mouse click:
function fnMouseDownLeft(event,ctx,config,data,other){
if(other != null){
window.alert("["+ data.labels[other.v12]+", "+data.datasets[other.v11].data[other.v12] +"]");
}else{
window.alert("You click Left but not on a data");
}
}
How do I display the clicked element's position in the data series?
jsFiddle Example
This seems the most promising but I don't understand the relationship between data.datasets, data.datasets[other] and data.datasets[other].data[other]
window.alert("Position: " + data.datasets[other.v11].data[other.v3] );
Here is documentation:
https://github.com/FVANCOP/ChartNew.js/wiki/100_095_Mouse_Actions
https://github.com/FVANCOP/ChartNew.js/wiki/120_Template_variables#inGraphDataTmpl-annotateLabel
My confusion: v12 (for a line chart) should display the position of data in the series (which is what I want) but instead it displays the x-axis value for that datapoint.
other.v12 seems to do the trick
alert(other.v12);
http://jsfiddle.net/wesn0xm5/1/
Not sure why it's not giving you the series, it does for me.

Categories