CODEWITHSUNDEEP
javascriptd3.jsplotly
Anil Jagtap
Anil Jagtap

Reputation: 1810

why graph is getting blank after dragging it

When I'm dragging(expanding) multiple times then graphs coming blank. I referred this code.

I want to plotly graph should work likeHigh Cahrt line graph. In high chart when we drag 4-5 times then its stop zoom-in graph and not getting blank graph.

I want to stop it. I don't want blank. I didn't get how to stop it. Before dragging graph like this: enter image description here

After dragging multiple times graph coming like following: enter image description here

My code is:

<script>
 var server1 = ['server1','server1','server1','server1','server1','server1','server1'];
 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');
</script>

please help me. I'm new with plotly.js. Thank you in advance.

Upvotes: 0

Views: 353

Answers (1)

nixkuroi
nixkuroi

Reputation: 2279

The drag you're using acts as a filter to look at (zoom in) the data in finer detail. Each time you drag, it filters your view of the data to fewer data points. After a few drags, you have filtered yourself into a smaller section of time than can be accommodated by the data, so the chart displays no data. Try double clicking your chart to see (zoom out) to the original data. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
 <script type="text/javascript" src="//plot.ly/static/plotlyjs/build/plotlyjs-bundle.63b9876b722c.js"></script>
<div id="myDiv"></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);


</script>

Upvotes: 1

Related Questions