Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

plotly.js bargraph need onclick event when clicking on bar

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);

}
like image 964
VincFort Avatar asked Sep 12 '16 15:09

VincFort


2 Answers

Try 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.

like image 94
Rambler Avatar answered Nov 13 '22 08:11

Rambler


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

like image 27
Prakash Choudhary Avatar answered Nov 13 '22 10:11

Prakash Choudhary