I am attempting to create an onclick event on my plotly chart. Following the documentation i have created the following chart:
var graphDiv = document.getElementById('uniqueId');
Plotly.newPlot('uniqueId', charData, layout);
graphDiv.on('plotly_click', function (data) {
var i = 0;
})
However when i run this i get the following error:
graphDiv.on is not a function
So can anyone tell me what im doing wrong?
Note i have also attempted with jquery:
$('#uniqueId').on('plotly_click', function(){})
This didnt throw an error but the function was not called when clicking the chart.
fiddle:
https://jsfiddle.net/c1kt3r82/127/
In your fiddle you are using plotly-basic.js, you would need to use plotly-latest.min.js to get the on functionality.
TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
TESTER.on('plotly_click', function(data){
alert('did you just click on me?!')
})
/* Current Plotly.js version */
console.log( Plotly.BUILD );
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:250px;"></div>
Related
I'm trying to plot 10+ scatter plots on one page using Plotly. However, I've noticed that if more than 8 plots are created, some of the plots show a square with a frowny face. I've read that this means Chrome failed to render the chart.
It does not matter how complex the chart is. Even 9 basic charts will cause one not to render. See below for example with code to replicate the issue:
https://codepen.io/ceds/pen/wvrGoLa
HTML
<div id="graphDiv1"></div>
<div id="graphDiv2"></div>
<div id="graphDiv3"></div>
<div id="graphDiv4"></div>
<div id="graphDiv5"></div>
<div id="graphDiv6"></div>
<div id="graphDiv7"></div>
<div id="graphDiv8"></div>
<div id="graphDiv9"></div>
<div id="graphDiv10"></div>
<div id="graphDiv11"></div>
<div id="graphDiv12"></div>
<div id="graphDiv13"></div>
JS
for (let i = 1;i < 13;i++) {
var trace1 = {
x: [1, 2, 3, 4],
y: [4, 1, 5, 3],
mode: 'markers',
type: 'scattergl',
marker:{
size: [30, 80, 50, 80],
color: 'blue'
},
name: 'Third Trace'
};
var data = [trace1];
var layout = {
title: `Chart ${i}`
};
var graphDiv = document.getElementById('graphDiv' + i.toString());
Plotly.newPlot(graphDiv, data, layout);
}
Any idea how to get past this ?
Seems like there is a Github issue open on this. The issue is not resolved as it's a limitation of Chrome:
https://github.com/plotly/plotly.js/issues/2333
I want to plot the scattered data with a colorscale and the errorbars should have the same colorscale.
I found answers for plotly R (How do you make plotly error bars follow a colorscale?), but I can't translate it to js. Also using the name attribute for this seems strange to me.
Here is a minimal example (https://jsfiddle.net/ztqoemkd/1)
var trace1 = {
type: 'scatter',
mode: 'markers',
y: [2, 1, 3],
marker: {
size: 20,
color: [1, 2, 3],
showscale: true
},
error_y: {
type:'data',
array: [0.5, 0.7, 0.5],
color: [1, 2, 3]
}
}
Plotly.newPlot('myDiv', [trace1])
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>
I still don't know, if can be done self consistently with plotly itself.
At least, I could now develop this work around with d3:
// get colors from data points
rgbs = Plotly.d3.selectAll('.points .point').data().map(d => d.mcc)
// apply colors to errorbars
Plotly.d3.selectAll('.yerror').style('stroke', (d,i) => rgbs[i])
Here is the full demo:
https://jsfiddle.net/vor6e9wj
and the output is
Note 1: After zooming, the errorbars are again black.
Note 2: It does not work for scattergl.
Edit 1: To keep the colors while zooming, the work around can be attached to plotly_relayout (see https://jsfiddle.net/9s64y5cv).
In a chart I render using Plotly.js, I define titles for each axis. When mouse hovering the items within the chart, a popup is shown, but the "labels" shown do not use the titles I had defined.
For example, the default value for the x axis is x. I defined hellox as title and that value is show in the chart, but not when mouse hovering a value (x is still shown).
See a live example here of what I mean: https://codepen.io/anon/pen/qoGQvx
I've been looking a the documentation and I didn't find anything so far that did exactly what I wanted: simply change the labels in the popup.
Also the question is quite old, I would like to write a solution I came up when facing the same problem. I did define a var text array for hover info which I filled with the labels for x, y and z values. Please have a look at the following fiddle where I use a heatmap plot for demonstration (this is what I am using in my project, but it can be easily adapted for your chart option): http://jsfiddle.net/zLc5y63g/
This is the html code:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
And this the JavaScript:
var zValues = [[1, 20, 30], [20, 1, 60], [30, 60, 1]];
var yValues = ['data1', 'data2', 'data3'];
var xValues = ['condition1', 'condition2', 'condition3'];
var config = {
displaylogo: false
};
// fill in 'text' array for hover
var text = zValues.map (function(zValues, i) { return zValues.map (function (value, j) {
return ` ID: ${yValues[i]}<br> Condition: ${xValues[j]}<br> Value: ${value.toFixed(2)} `
});
});
Plotly.newPlot('plotly_chart', [{x: xValues, y: yValues, z: zValues, text: text, hoverinfo: 'text', hoverlabel: {bgcolor: '#41454c'}, type: 'heatmap', colorscale: 'Viridis'}], config );
Maybe this is still useful.
Is it possible to link all/some of the points of a scatter plotly plot so whenever you click on them a new tab is opened and the hyperlink linked on that point is fired?
I am using plotly within a Django webserver implementation, this means that plotly is rendered with javascript.
You can use the click handler to implement this. But it may be hard to open in new tab, given most browsers try to prevent popups at all times.
var trace1 = {
x: [1, 2, 3],
y: [1, 6, 3],
mode: 'markers',
type: 'scatter',
text: ['Plotly', 'StackOverflow', 'Google'],
hoverinfo: 'text',
marker: { size: 12 }
};
var links = ['https://plot.ly/', 'http://stackoverflow.com/', 'https://google.com/'];
var data = [ trace1 ];
var layout = {
title:'Hyperlinked points'
};
var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data, layout);
myPlot.on('plotly_click', function(data){
if (data.points.length === 1) {
var link = links[data.points[0].pointNumber];
// Note: window navigation here.
window.location = link;
}
});
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 300px;"></div>
I'm trying to add a paragraph of text underneath a Chartist chart. However, it seems that Chartist defers the actual creation of the DOM element until some unknown future point.
Expectation:
Create new Chartist chart, then
Append element to dom after chart
Chart appears before element in DOM
Actual:
Chart appears after element in DOM
How do I get my element to occur after the chart? I see an event API but they don't list if there are any "complete" or "added" event.
var data = {
series: [5, 3, 4]
};
new Chartist.Pie('.thing', data);
$('.thing').append("<p>should appear after/below chart!</p>")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.js"></script>
<div class="thing"></div>
As #blm suggests, you could add an additional DOM element, but just in case you've got some constraint requiring you to build it this way, you can .append() your paragraph to .thing in Chartist's .on('draw') method.
var data = {
series: [5, 3, 4]
};
var chart = new Chartist.Pie('.thing', data);
chart.on('draw', function(){
$('.thing').append("<p>should appear after/below chart!</p>")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.js"></script>
<div class="thing"></div>
I came across this question because I needed if for a project myself.
Problem with #brianrhea's answer is that you will append the p tag for every item in the series array. If you want only to append it a single time use following code
var data = {
series: [5, 3, 4]
};
var chart = new Chartist.Pie('.thing', data);
chart.on('draw', function (data) {
if (data.index === 0) {
$('.thing').append("<p>should appear after/below chart!</p>");
}
});
There is a created event which seems perfect for this job.
var data = {
series: [5, 3, 4]
};
var chart = new Chartist.Pie('.thing', data);
chart.on('created', function(){
$(id).append("<p>should appear after/below chart!</p>");
});