I have been looking for a while to be able to run a specific function when I click on a specific bar on the barchart. The function would either be as simple as opening a link or changing the graph to a different graph.
In the html file, there is a slider (not shown) that changes the graph data. However, the layout and everything else in the graph stays the same.
I think I figured out that I need an embedded link of my graph in order to be able to put in an iframe tag in my html.
However, I'm not sure how to do that and if it is possible.
In short, my HTML is :
<!DOCTYPE html>
<html>
<head>
<script src=".min.js"></script>
<script src="graphing_barchart.js"></script>
<script src="graphing_heatmap.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body onload="barchart_graph()">
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
...
And my Javascript is :
function create_graph_barchart(matrix_list){
switch(matrix_list) {
var zValues=[];
var date_list;
case "0":
zValues = [-2.45,-0.4,1.3,
2.9,3.9,-5.66,
0.5,-2.6,-3.2,
-8.3,-0.5,-3.0];
date_list = "January 2015"
break;
case "1":
zValues = [3.75,6.6,-2.5,
6.2,1.3,6.3,
0.2,7.5,7.3,
7.7,4.4,5.6];
date_list = "Febuary 2015"
break;
.....
var data = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
opacity: 0.6,
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: [],
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
Plotly.newPlot('myDiv',data,layout);
}
I have been looking for a while to be able to run a specific function when I click on a specific bar on the barchart. The function would either be as simple as opening a link or changing the graph to a different graph.
In the html file, there is a slider (not shown) that changes the graph data. However, the layout and everything else in the graph stays the same.
I think I figured out that I need an embedded link of my graph in order to be able to put in an iframe tag in my html.
However, I'm not sure how to do that and if it is possible.
In short, my HTML is :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="graphing_barchart.js"></script>
<script src="graphing_heatmap.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body onload="barchart_graph()">
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
...
And my Javascript is :
function create_graph_barchart(matrix_list){
switch(matrix_list) {
var zValues=[];
var date_list;
case "0":
zValues = [-2.45,-0.4,1.3,
2.9,3.9,-5.66,
0.5,-2.6,-3.2,
-8.3,-0.5,-3.0];
date_list = "January 2015"
break;
case "1":
zValues = [3.75,6.6,-2.5,
6.2,1.3,6.3,
0.2,7.5,7.3,
7.7,4.4,5.6];
date_list = "Febuary 2015"
break;
.....
var data = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
opacity: 0.6,
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: [],
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
Plotly.newPlot('myDiv',data,layout);
}
2 Answers
Reset to default 8Try the following :
document.getElementById("myDiv").on('plotly_click', function(data){
console.log(data.points[0].x);
});
This function will be invoked on the graph click.The logged data is the name of the bar on the x axis.data holds other metadata regarding the click event.Leverage it to achieve desired functionality.
Try this:
HTML
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
JS
var myPlot = document.getElementById('myDiv');
var data = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
Plotly.newPlot('myDiv', data);
myPlot.on('plotly_click', function(data){
var pts = '';
for(var i=0; i < data.points.length; i++){
pts = 'x = '+data.points[i].x +'\ny = '+
data.points[i].y.toPrecision(4) + '\n\n';
}
alert('Closest point clicked:\n\n'+pts);
console.log('Closest point clicked:\n\n',pts);
});
Codepen link: https://codepen.io/prakashchoudhary07/pen/jOPgzdr