In the click event "this.x" is the first point in the data group.
dataGrouping occurs when you play with the scroll, for example if select show all data, each point represent a week but you have information about every day, so in this point is represented info of all week instead of each day.
¿how I can get the last point in the data group clicked? ¿Hoy can I get the last point represented in this group (in this week)? (week is an example when you play with the scroll grouped data can happen in non common intervals)
plotOptions : {
series : {
point : {
events : {
click : function(event) {
alert(this.x + ' ' + this.y);
//HERE?
}
}
}
}
},
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/13/
After deep testing and several implementations and reimplementations... the conclusion.
You can access to the points variable. It is the solution because it always has the points draw in the screen and you can access it with no change when dataGrouping occurs.
var point = event.point;
var points = event.point.series.points;
var index = points.indexOf(point);
var index_next = index+1;
Here a working example:
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/88/
You can not work with series.data variable because it change depending on cropThreshold and number of data.
series.data
here doc:
http://api.highcharts.com/highstock#Series::data
There is no simple way to get it, but here is what you can do:
you have this.x value, now loop through this.series.options.data and compare x-value with your this.x
last object from that comparison (this.x > this.series.options.data[index][0])will be point you are looking for
You can access the series data in the click event by using this.series
events: {
click: function (event) {
var last = this.series.data[this.series.data.length - 1];
alert(last.x + ' ' + last.y);
}
}
http://jsfiddle.net/38FmW/
Related
If i zoom an HighStock multi series chart (using either the Navigator or the Range Selector), is there a way to fetch the point.y data only for the zoomed series?
For example, if I am showing the sales information for a period across multiple branches (each branch plotted as series), and if zoomed to a week, I would like to know the total of sales for the week across the branches. Does highstock provide access to the zoomed dataset?
You can check isInside flag on every point:
redraw: function() {
var sum = 0;
Highcharts.each(this.series[0].points, function(point) {
if (point.isInside) {
sum += point.y;
}
});
console.log(sum)
}
Live demo: http://jsfiddle.net/BlackLabel/7kmzhecy/
A very brute force approach to this is to loop over your data upon zooming and evaluate if it is visible. That is, is a given point within the range of the x-axis (and y-axis, if you allow zoom in that direction)?
chart: {
events: {
redraw: function() {
sum = 0;
xAxis = this.xAxis[0];
// Loop over your series
this.series[0].data.forEach(function(point) {
// Add to sum if within x-axis visible range
if(point.x >= xAxis.min && point.x <= xAxis.max) {
sum += point.y;
}
// If too large, stop summing
if(point.x > xAxis.max) {
return;
}
});
// Print sum
console.log('Visible sum: '+sum);
}
}
}
See this JSFiddle demonstration of it in use.
You might evaluate xAxis.events.setExtremes, but it offers min and max values that might change after it takes effect, which might give some unexpected results.
I have a requirement where i have to show custom points on x-axis instead of dates values. Also same custom data points needs to be shown on navigator as well. In the below Js fiddle, i am converting data (Per13/2016 etc) into equivalent date values and then binding the chart using converted date values.
Below is the link of the JS fiddle:- Fiddle link
In the Js fiddle, i am showing Per1,Per2 etc.on x-axis and same has to be shown on navigator as well.
Now i am facing problem with the navigator,when i changes the range using slider ,the x-axis labels changes but not according to the range selected.Also tool-tip formatting is getting changed.
Can you please let me know how to handle this scenario and best way to do the same.
//few code lines to post fiddle link
xAxis: {
labels: {
formatter: function () {
if(fiscal13){
var perDate = new Date(this.value);
return 'Per' + (perDate.getMonth() + 1);
}
}
}
}
I am not sure if I am right, but I think you are overdoing this.
Let's keep original data, so remove fiscal13Data.Data.forEach(function(item) { .. }); function. And When creating data, use simply index of the point as x-value:
var cost = [],
usage = [],
dataLength = fiscal13Data.Data.length
i = 0;
for (i; i < dataLength; i += 1) {
// need to sum costs
cost.push([
i, // the index
fiscal13Data.Data[i]['Cost'] // cost
]);
usage.push([
i, // the index
fiscal13Data.Data[i]['Usage'] // Usage
]);
}
Now you can get to the "Per13/2016" strings in a simple way in xAxis labels' formatters:
var str = fiscal13Data.Data[this.value].Date;
In tooltip formatter, it is almost exactly the same:
var str = fiscal13Data.Data[this.x].Date;
And here is working demo: http://jsfiddle.net/qneuh4Ld/3/
Note: You data looks a bit strange - don't you want to sort it first? Also, you have twice every date (e.g. "Per13/2016" - once for "water" and once for "electric").
how can I access to the next point of the series from the tooltip formatter.
Because I want to do a sum between both points.
Like this.y + next.y.
But I don't know how to have an access to the next point.
If someone have an answer. Thanks
This need to be done in a few steps:
get x-index according to x-value: var index = this.series.xData.indexOf(this.x);
now get y-value: var nextY = this.series.yData[index+1];
And all you need to do is to sum values, like this: var sum = this.y + nextY;.
For a JQplot chart with 2 y axes, I am able to set the tooltip but when i hover over a datapoint i need to know to which y axis the tooltip belongs. I need this so that i can display the tooltip after multiplying with the appropriate scale factor. The code i tried is shown below. I thought y will be null when we hover over a data point belonging to y2 axis. But y is never null.
$("#"+sTargetId).bind('jqplotcustomDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]),
y = oPlot.axes.yaxis.u2p(data[1]),
y2 = oPlot.axes.y2axis.u2p(data[1]);;
if(y===null|| y===undefined){ //this condition doesnt work
var tooltipDataYaxis = data[1]*scaleYaxis1;
var sYDisplay = this.sYAxis1MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
}
else{
tooltipDataYaxis = data[1]*scaleYaxis2;
sYDisplay = this.sYAxis2MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y2, marginRight:chart_right});
}
$('#tooltip').html(
'<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">'+ sYDisplay+': ' + tooltipDataYaxis +'</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
}
The variable seriesIndex will help to identify which series the tooltip belongs to. :)
I was just playing with jqplot for the first time. quite fun.
In the highlighter plugin jqplot.highlighter.js
I extended it on line 336
elem.html(str + " component:"+neighbor.data[2]);
You might use Chrome developer tools to get the data model at this point and look at the contents of the neighbor object.
(scope variables > Local > neighbor > data )
That's how I did it anywho. Hope it helps.
I'm seeing some odd behavior in a Highcharts line chart. I have multiple series displayed, and need to let the user change what's called the "Map level" on the chart, which is a straight line across all time periods. Assuming that the correct series is
chart.series[i]
and that the new level that I want it set to is stored in var newMapLevel,
I'm changing that series' data like so:
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
chart.series[i].setData(data);
Calling this function has the desired effect UNLESS the new map level y_value is ONE greater than the highest y_value of all other series, in which case the y-axis scale blows up. In other words, if the y_axis scale is normally from 0 to 275,000, and the highest y_value of any of the other series is, say, 224,000, setting the new map level value to 224,001 causes the y_axis scale to become 0 to 27500M. Yes, that's 27.5 billion.
Might this be a bug in Highcharts? Or is there a better way to change the data in a series?
I've posted a fiddle: http://jsfiddle.net/earachefl/4FuNE/4/
I got my answer from the Highcharts forum:
http://highslide.com/forum/viewtopic.php?f=9&t=13594&p=59888#p59888
This doesn't work as smoothly as I'd like. When you go from 8 as your line to 2 as your line, the scale doesn't adjust back down until you enter another value. Perhaps it's a start in the right direction.
$(document).ready(function(){
$('#clickme').click(function(){
var newMapLevel = $('#newMAP').val();
if(newMapLevel){
for(i=0; i<chart.series.length; i++){
if(chart.series[i].name == 'Map Level'){
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
// get the extremes
var extremes = chart.yAxis[0].getExtremes();
//alert("dataMin: " + extremes.dataMin);
//alert("dataMax: " + extremes.dataMax);
// define a max YAxis value to use when setting the extremes
var myYMax = extremes.dataMax;
if (newMapLevel >= myYMax) {
myYMax = Number(newMapLevel) + 1; // number conversion required
}
if (myYMax > chart.yAxis[0].max) {
alert('cabbbie');
myYMax = chart.yAxis[0].max + 1;
}
//alert("myYMax: " + myYMax);
chart.yAxis[0].setExtremes(extremes.dataMin, myYMax)
// finally, set the line data
chart.series[i].setData(data);
}
}
}
}); });