How to unfold only x axis of a graph graph plot on drag

I want to expand only the x-axis when I drag the chart area of ​​the graph. I don't want to expand the y-axis. When I drag the area plot at this time, the x and y axes expand. I named this code . I don't want to expand the y-axis. Please give me a solution.

My code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
  x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00',  '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
  y: [1, 3, 6,9, 4, 5],
   fill: 'tozeroy',
   fillcolor: 'red',
   text: server1,
   hoverinfo: "x+y+text",
   name:"Server 1",
   type: 'scatter',
   mode:"markers",
   marker:
   {
    size:5,
    color:"gray"
   },
   uid:"c2e171"
 };
 var layout = {
  margin: {
    l: 20,
    r: 40,
    b: 40,
    t: 10
  },
  legend: {
    "orientation": "h"
  },
 };
 var data = [trace1];
 Plotly.newPlot('myDiv', data,layout);

 var plotDiv = document.getElementById('myDiv');
 plotDiv.on('plotly_relayout',
 function(eventdata){  
    alert( 'ZOOM!' + '\n\n' +
        'Event data:' + '\n' + 
         JSON.stringify(eventdata) + '\n\n' +
        'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
        'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
        var xVal = new Date(eventdata['xaxis.range[0]']);
        var yVal = new Date(eventdata['xaxis.range[1]']);
    });
    </script>
    </body>
   </html>

      

0


source to share





All Articles