Develop Reference

Which plot.ly json property enables all hover data to be displayed when hovering over one line

I am plotting two lines on a graph in Matlab, and converting it to plot.ly using the Matlab library. When I use the 'strip' = false json property, it preserves the Matlab layout. However, it removes the nice feature where by you get all the data when you hover over one line. When 'strip' = false, you only get data pertaining to the line you hover over.
Does anyone know how to use 'strip' = false and yet retain all the hover overs?
Sample code in Matlab:
X = linspace(0,2*pi,50)';
Y = [cos(X), 0.5*sin(X)];
figure
plot(X,Y)
Then generate two plot.ly plots:
fig2plotly(gcf, 'strip', 0);
fig2plotly(gcf, 'strip', 1);
These can be respectively found at:
https://plot.ly/~alexdp/0
https://plot.ly/~alexdp/2
Note the difference in the hover over behaviour.

When you convert a matlab figure to Plotly Figure with strip=false, the hovermode attribute is set to closest by default, hence it only shows data pertaining to nearest curve on hovering. To override this behaviour:
X = linspace(0,2*pi,50);
Y = [cos(X), 0.5*sin(X)];
figure
plot(X,Y)
% Convert the chart..
plotly_fig = fig2plotly(gcf, 'strip', 0)
% Set hovermode to blank (basically disable the attribute)
plotly_fig.layout.hovermode=''
% Send the updated figure to plotly:
resp = plotly(plotly_fig)
url = resp.url

Search for and zoom in to a scatter plot point (Highcharts, react.js)

I'm using the highcharts library in react.js and it's working great. However, I'm plotting ~15,000 scattered points and it's a bit tricky finding the one I want among all that. I'd like to be able to search for a specific point, since each point has its own unique name property along with its x and y coordinates (not id, but I could put the name as id if that made the solution easier). When the point is found, the graph should zoom in a bit, since at default zoom level there's quite a few overlaps of points so just making it blink/bigger/something wouldn't help much. I've looked through the Highcharts API docs but I can't find anything that will do a manual zoom into specified coordinates.
I found the mapZoom function, but that's only for maps, and... well, this isn't a map. It's a scatter plot.
Also, since this is react, it's a bit tricky to see how I can access the chart object to do stuff with it, since the only time it exists is when it's being returned to be rendered:
var CosinePlot = React.createClass({
componentDidMount: function() {
let chart = this.refs.chart.getChart();
},
render: function() {
return <ReactHighcharts config={plotConfig} isPureConfig={true}/>;
}
});

If you know exact point you want to zoom in, simply get it's x and y. Then zoom into that point using chart.xAxis[0].setExtremes(min, max) and chart.yAxis[0].setExtremes(min, max).
And regarding accessing the chart object, I guess you are using this this wrapper. There is an explanation how to retrieve that chart object here.

canvas js: how to remove a datapoint dynamically but without creating a "hole" in chart?

After hours and hours playing with canvasJS I couldn't find a way to dynamically remove points from my chart in an elegant way.
What I want to do is to allow users to select/deselect data he want to see plotted. For instance, on a chart that shows data from Jan/2014 to Dec/2014 (axis X), if the user choose not to show Feb/2014, I iterate thru dataPoints, remove such point and call render(). The column with data corresponding to February then disappear, but on X axis, the label for February is still shown, creating a "hole".
If First or Last item is deselected, then the result is OK, such month is not displayed.
I have tried using Date() for x, tried using Integers for x and formatting the Date as a label but none worked for me.
So, before starting looking for another solution I would like to know if you guys could help me out figuring what I`m doing wrong.
Best regards!!

I have gone through the question and created an example. Here is the JSFiddle
Here is the logic which I used:
for(var i=0; i<dataPoints.length ; i++){
var dp = dataPoints[i];
var dataPointMonth = (new Date(dp.label).getMonth());
if( dataPointMonth !== monthToHide){
dp.x = index++;
newDataPoints.push(dp);
}
}
You can use labels instead of x value in this case and use formatDate method in order to format date values as required and use labelFormatter for further customization.
labelFormatter : function ( e ) {
return CanvasJS.formatDate( e.label, "MMM");
}

Chart.js: Get point index from chart.getPointsAtEvent(e)

I am looking to make my chart (made with Chart.js) a little more interactive and I would like to get a point's index (of its dataset) with the following code:
canvas.onclick = function(e) {
const points = chart.getPointsAtEvent(e);
// something like `point.getIndex()` would be great so that I know where this point is in the original dataset
};
Anybody have a good solution for this?

You should be able to do an indexOf (instead of a label lookup) because it refers to the exact same object in the points collection
canvas.onclick = function (evt) {
var points = chart.getPointsAtEvent(evt);
alert(chart.datasets[0].points.indexOf(points[0]));
};
Also, for a multi series line chart getPointsAtEvent(evt) returns points from all datasets. So the same code would work irrespective of how many datasets you have or which of the datasets you click on.
Fiddle - http://jsfiddle.net/yxz2sjam/

flot: zoom, hover and series selection in the same plot

I am trying to plot 3 different series on the same plot. I want to do the following in the plot:
allow the user to select which series are plotted ("Turning series on/off" example on the flot website),
allow the user to zoom in and zoom out ("Rectangular selection with zooming" example),
show the values of the curves when the user hovers the mouse ("Tracking curves" example).
I have been trying to make it work for a long time now, and I can't get everything to work. My current attempt fails to properly turn series on/off. As soon as I check a box, the graph becomes blank. The javascript file which defines all the plotting functions etc., is plot_displacement.js.
The relevant part of the code is:
var choice_container = jQuery("#choices");
choice_container.find("input").change(do_plot);
The HTML is:
<p id="choices">Show:</p>
<div id="plotdiv" style="width:600px;height:300px;position:static;"></div>
I am using change and not click because of this question's answer. If I use click, then selecting/unselecting the checkboxes doesn't seem to have any effect.
I am sure I am overlooking something simple, but I can't figure out what. I would love to be able to do all the 3 things that I am trying to do in flot.
Thanks!

Your problem is simply that do_plot is being called from your change event with xmin being a jQuery Event object. You expect it to be undefined and then set to 0, but instead you're passing xmin: jQuery.Event to flot, which doesn't know what to do with it.
Edit: Since someone asked, the actual code you might want to put in there, when checking if xmin is undefined, additionally check whether it is an object (jQuery.Event has a typeof object):
if (typeof(xmin) == 'undefined' || typeof(xmin) == 'object') xmin = 0;

Click does work for me.
I use the code from the Flot example:
$("#checkboxes").find("input").click(plotAccordingToChoices);
Clicking the checkboxes calls:
function plotAccordingToChoices() {
var data = [];
$("#checkboxes").find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});
if (data.length > 0){
plot = $.plot($("#chart1"), data, options);
}
}
datasets is a global array keyed by the set name and was created at initialization.