<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<div id="myDiv"></div>
</body>

var myDiv = document.getElementById('myDiv');

var d3 = Plotly.d3,
    N = 40,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y } ];
    layout = { title:'Click-drag to zoom' };

Plotly.plot(myDiv, data, layout, {showSendToCloud: true});

myDiv.on('plotly_relayout',
    function(eventdata){  
        alert( 'ZOOM!' + '\n\n' +
            'Event data:' + '\n' + 
             JSON.stringify(eventdata) + '\n\n' +
            'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +
            'x-axis end:' + eventdata['xaxis.range[1]'] );
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.