Why plotly area graph is not displaying data properly?

Data is coming from beck end correctly but on graph is not displaying properly sometimes. Why its happening sometimes? I referred this code.

Area of graph not filling properly. My graph is looking like this some time: enter image description here

Here is my code:

<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 abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00',  '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00'];
abc[6]='2014-05-02 20:23:00';
var trace1 = {
x: abc,
y: [1, 3, 6,9, 4, 5,8],
  fill: 'tozeroy',
  fillcolor: 'red',
  text: server1,
  hoverinfo: "x+y+text",
  type: 'scatter',
  mode:"markers",
  marker:
  {
    size:4,
    color:"gray"
  },
  uid:"c2e171",
  dragmode:"turntable"
};
var layout = {
  margin: {
    l: 35,
    r: 40,
    b: 50,
    t: 10
  },
  legend: {
    "orientation": "h"
  },
  xaxis: {
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  yaxis : {
    fixedrange: true,
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  dragmode:false,
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']});

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>

I'm getting data for x and y dynamically from backend. Don't consider above x and y data.

I'm getting following data for x and y from backend: date for x and value for Y

{
 "results": [
  {
   "date": "2017-04-06 11:57:48",
   "value": 302
  },
  {
   "date": "2017-04-06 11:58:18",
   "value": 329
  },
  {
   "date": "2017-04-06 11:58:48",
   "value": 344
  },
  {
   "date": "2017-04-06 11:59:18",
   "value": 372
  },
  {
   "date": "2017-04-06 11:59:48",
   "value": 391
  },
  {
   "date": "2017-04-06 00:00:18",
   "value": 428
  },
  {
   "date": "2017-04-06 00:00:48",
   "value": 445
  },
  {
   "date": "2017-04-06 00:01:18",
   "value": 287
  },
  {
   "date": "2017-04-06 00:01:48",
   "value": 302
  },
  {
   "date": "2017-04-06 00:02:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:02:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:03:18",
   "value": 374
  },
  {
   "date": "2017-04-06 00:03:48",
   "value": 388
  },
  {
   "date": "2017-04-06 00:04:18",
   "value": 417
  },
  {
   "date": "2017-04-06 00:04:48",
   "value": 433
  },
  {
   "date": "2017-04-06 00:05:18",
   "value": 461
  },
  {
   "date": "2017-04-06 00:05:48",
   "value": 474
  },
  {
   "date": "2017-04-06 00:06:18",
   "value": 316
  },
  {
   "date": "2017-04-06 00:06:48",
   "value": 330
  },
  {
   "date": "2017-04-06 00:07:18",
   "value": 357
  },
  {
   "date": "2017-04-06 00:07:48",
   "value": 374
  },
  {
   "date": "2017-04-06 00:08:18",
   "value": 402
  },
  {
   "date": "2017-04-06 00:08:48",
   "value": 415
  },
  {
   "date": "2017-04-06 00:09:18",
   "value": 443
  },
  {
   "date": "2017-04-06 00:09:48",
   "value": 460
  },
  {
   "date": "2017-04-06 00:10:18",
   "value": 301
  },
  {
   "date": "2017-04-06 00:10:48",
   "value": 314
  },
  {
   "date": "2017-04-06 00:11:18",
   "value": 344
  },
  {
   "date": "2017-04-06 00:11:48",
   "value": 359
  },
  {
   "date": "2017-04-06 00:12:18",
   "value": 385
  },
  {
   "date": "2017-04-06 00:12:48",
   "value": 400
  },
  {
   "date": "2017-04-06 00:13:18",
   "value": 429
  },
  { 
   "date": "2017-04-06 00:13:48",
   "value": 444
  },
  {
   "date": "2017-04-06 00:14:18",
   "value": 470
  },
  {
   "date": "2017-04-06 00:14:48",
   "value": 301
  },
  {
   "date": "2017-04-06 00:15:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:15:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:16:18",
   "value": 373
  },
  {
   "date": "2017-04-06 00:16:48",
   "value": 425
  },
  {
   "date": "2017-04-06 00:17:18",
   "value": 453
  },
  {
   "date": "2017-04-06 00:17:48",
   "value": 468
  },
  {
   "date": "2017-04-06 00:18:18",
   "value": 307
  },
  {
   "date": "2017-04-06 00:18:48",
   "value": 322
  },
  {
   "date": "2017-04-06 00:19:18",
   "value": 350
  },
  {
   "date": "2017-04-06 00:19:48",
   "value": 365
  },
  {
   "date": "2017-04-06 00:20:18",
   "value": 393
  }, 
  {
   "date": "2017-04-06 00:20:48",
   "value": 408
  },
  {
   "date": "2017-04-06 00:21:18",
   "value": 436
  },
  {
   "date": "2017-04-06 00:21:48",
   "value": 449
  },
  {
   "date": "2017-04-06 00:22:18",
   "value": 291
  },
  {
   "date": "2017-04-06 00:22:48",
   "value": 306
  },
  {
   "date": "2017-04-06 00:23:18",
   "value": 333
  },
  {
   "date": "2017-04-06 00:23:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:24:18",
   "value": 375
  },
  {
   "date": "2017-04-06 00:24:48",
   "value": 392
  },
  {
   "date": "2017-04-06 00:25:18",
   "value": 419
  },
  {
   "date": "2017-04-06 00:25:48",
   "value": 434
  },
  {
   "date": "2017-04-06 00:26:18",
   "value": 462
  },
  {
   "date": "2017-04-06 00:26:48",
   "value": 476
  },
  {
   "date": "2017-04-06 00:27:18",
   "value": 317
  },
  {
   "date": "2017-04-06 00:27:48",
   "value": 332
  },
  {
   "date": "2017-04-06 00:28:18",
   "value": 359
  },
  {
   "date": "2017-04-06 00:28:48",
   "value": 374
  },
  {
   "date": "2017-04-06 00:29:18",
   "value": 406
  },
  {
   "date": "2017-04-06 00:29:48",
   "value": 421
  },
  {
   "date": "2017-04-06 00:30:18",
   "value": 449
  },
  {
   "date": "2017-04-06 00:30:48",
   "value": 463
  },
  {
   "date": "2017-04-06 00:31:18",
   "value": 305
  },
  {
   "date": "2017-04-06 00:31:48",
   "value": 319
  },
  {
   "date": "2017-04-06 00:32:18",
   "value": 346
  },
  {
   "date": "2017-04-06 00:32:48",
   "value": 361
  },
  {
   "date": "2017-04-06 00:33:18",
   "value": 389
  },
  {
   "date": "2017-04-06 00:33:48",
   "value": 404
  },
  {
   "date": "2017-04-06 00:34:18",
   "value": 433
  },
  {
   "date": "2017-04-06 00:34:48",
   "value": 447
  },
  {
   "date": "2017-04-06 00:35:18",
  "value": 476
  },
  {
   "date": "2017-04-06 00:35:48",
   "value": 303
  },
  {
   "date": "2017-04-06 00:36:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:36:48",
   "value": 347
  },
  {
   "date": "2017-04-06 00:37:18",
   "value": 374
  },
  {
   "date": "2017-04-06 00:37:48",
   "value": 389
  },
  {
   "date": "2017-04-06 00:38:18",
   "value": 416
  },
  {
   "date": "2017-04-06 00:38:48",
   "value": 432
  },
  {
   "date": "2017-04-06 00:39:18",
   "value": 461
  },
  {
   "date": "2017-04-06 00:39:48",
   "value": 475
  },
  {
   "date": "2017-04-06 00:40:18",
   "value": 318
  },
  {
   "date": "2017-04-06 00:40:48",
   "value": 332
  },
  {
   "date": "2017-04-06 00:41:18",
   "value": 360
  },
  {
   "date": "2017-04-06 00:41:48",
   "value": 373
  },
  {
   "date": "2017-04-06 00:42:18",
   "value": 403
  },
  {
   "date": "2017-04-06 00:42:48",
   "value": 418
  },
  {
   "date": "2017-04-06 00:43:18",
   "value": 446
  },
  {
   "date": "2017-04-06 00:43:48",
   "value": 459
  },
  {
   "date": "2017-04-06 00:44:18",
   "value": 305
  },
  {
   "date": "2017-04-06 00:44:48",
   "value": 320
  },
  {
   "date": "2017-04-06 00:45:18",
   "value": 347
  },
  {
   "date": "2017-04-06 00:45:48",
   "value": 364
  },
  {
   "date": "2017-04-06 00:46:18",
   "value": 391
  },
  {
   "date": "2017-04-06 00:46:48",
   "value": 444
  },
  {
   "date": "2017-04-06 00:47:18",
   "value": 475
  }
 ]
 }

Answers:

Answer

It seems to work fine in this code. I got an error that server1 was not defined, but otherwise it seems to work as expected. My initial thought was that something was off with your x axis, but everything seem to render fine here. What version of d3 are you using? Also, what browser? I'm using Chrome on Ubuntu.

enter image description here

Update:
I added the updated data. There was a missing comma near the date "2017-04-06 00:44:18" that was causing some problems parsing it. I fixed that, but am able to render it all with the same code as before. The new chart looks like this:

enter image description here

I'm still not able to reproduce your rendering error, but I'll see if I can do it by playing with margin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>  
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>




var realData = {
 "results": [
  {
   "date": "2017-04-06 11:57:48",
   "value": 302
  },
  {
   "date": "2017-04-06 11:58:18",
   "value": 329
  },
  {
   "date": "2017-04-06 11:58:48",
   "value": 344
  },
  {
   "date": "2017-04-06 11:59:18",
   "value": 372
  },
  {
   "date": "2017-04-06 11:59:48",
   "value": 391
  },
  {
   "date": "2017-04-06 00:00:18",
   "value": 428
  },
  {
   "date": "2017-04-06 00:00:48",
   "value": 445
  },
  {
   "date": "2017-04-06 00:01:18",
   "value": 287
  },
  {
   "date": "2017-04-06 00:01:48",
   "value": 302
  },
  {
   "date": "2017-04-06 00:02:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:02:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:03:18",
   "value": 374
  },
  {
   "date": "2017-04-06 00:03:48",
   "value": 388
  },
  {
   "date": "2017-04-06 00:04:18",
   "value": 417
  },
  {
   "date": "2017-04-06 00:04:48",
   "value": 433
  },
  {
   "date": "2017-04-06 00:05:18",
   "value": 461
  },
  {
   "date": "2017-04-06 00:05:48",
   "value": 474
  },
  {
   "date": "2017-04-06 00:06:18",
   "value": 316
  },
  {
   "date": "2017-04-06 00:06:48",
   "value": 330
  },
  {
   "date": "2017-04-06 00:07:18",
   "value": 357
  },
  {
   "date": "2017-04-06 00:07:48",
   "value": 374
  },
  {
   "date": "2017-04-06 00:08:18",
   "value": 402
  },
  {
   "date": "2017-04-06 00:08:48",
   "value": 415
  },
  {
   "date": "2017-04-06 00:09:18",
   "value": 443
  },
  {
   "date": "2017-04-06 00:09:48",
   "value": 460
  },
  {
   "date": "2017-04-06 00:10:18",
   "value": 301
  },
  {
   "date": "2017-04-06 00:10:48",
   "value": 314
  },
  {
   "date": "2017-04-06 00:11:18",
   "value": 344
  },
  {
   "date": "2017-04-06 00:11:48",
   "value": 359
  },
  {
   "date": "2017-04-06 00:12:18",
   "value": 385
  },
  {
   "date": "2017-04-06 00:12:48",
   "value": 400
  },
  {
   "date": "2017-04-06 00:13:18",
   "value": 429
  },
  { 
   "date": "2017-04-06 00:13:48",
   "value": 444
  },
  {
   "date": "2017-04-06 00:14:18",
   "value": 470
  },
  {
   "date": "2017-04-06 00:14:48",
   "value": 301
  },
  {
   "date": "2017-04-06 00:15:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:15:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:16:18",
   "value": 373
  },
  {
   "date": "2017-04-06 00:16:48",
   "value": 425
  },
  {
   "date": "2017-04-06 00:17:18",
   "value": 453
  },
  {
   "date": "2017-04-06 00:17:48",
   "value": 468
  },
  {
   "date": "2017-04-06 00:18:18",
   "value": 307
  },
  {
   "date": "2017-04-06 00:18:48",
   "value": 322
  },
  {
   "date": "2017-04-06 00:19:18",
   "value": 350
  },
  {
   "date": "2017-04-06 00:19:48",
   "value": 365
  },
  {
   "date": "2017-04-06 00:20:18",
   "value": 393
  }, 
  {
   "date": "2017-04-06 00:20:48",
   "value": 408
  },
  {
   "date": "2017-04-06 00:21:18",
   "value": 436
  },
  {
   "date": "2017-04-06 00:21:48",
   "value": 449
  },
  {
   "date": "2017-04-06 00:22:18",
   "value": 291
  },
  {
   "date": "2017-04-06 00:22:48",
   "value": 306
  },
  {
   "date": "2017-04-06 00:23:18",
   "value": 333
  },
  {
   "date": "2017-04-06 00:23:48",
   "value": 346
  },
  {
   "date": "2017-04-06 00:24:18",
   "value": 375
  },
  {
   "date": "2017-04-06 00:24:48",
   "value": 392
  },
  {
   "date": "2017-04-06 00:25:18",
   "value": 419
  },
  {
   "date": "2017-04-06 00:25:48",
   "value": 434
  },
  {
   "date": "2017-04-06 00:26:18",
   "value": 462
  },
  {
   "date": "2017-04-06 00:26:48",
   "value": 476
  },
  {
   "date": "2017-04-06 00:27:18",
   "value": 317
  },
  {
   "date": "2017-04-06 00:27:48",
   "value": 332
  },
  {
   "date": "2017-04-06 00:28:18",
   "value": 359
  },
  {
   "date": "2017-04-06 00:28:48",
   "value": 374
  },
  {
   "date": "2017-04-06 00:29:18",
   "value": 406
  },
  {
   "date": "2017-04-06 00:29:48",
   "value": 421
  },
  {
   "date": "2017-04-06 00:30:18",
   "value": 449
  },
  {
   "date": "2017-04-06 00:30:48",
   "value": 463
  },
  {
   "date": "2017-04-06 00:31:18",
   "value": 305
  },
  {
   "date": "2017-04-06 00:31:48",
   "value": 319
  },
  {
   "date": "2017-04-06 00:32:18",
   "value": 346
  },
  {
   "date": "2017-04-06 00:32:48",
   "value": 361
  },
  {
   "date": "2017-04-06 00:33:18",
   "value": 389
  },
  {
   "date": "2017-04-06 00:33:48",
   "value": 404
  },
  {
   "date": "2017-04-06 00:34:18",
   "value": 433
  },
  {
   "date": "2017-04-06 00:34:48",
   "value": 447
  },
  {
   "date": "2017-04-06 00:35:18",
  "value": 476
  },
  {
   "date": "2017-04-06 00:35:48",
   "value": 303
  },
  {
   "date": "2017-04-06 00:36:18",
   "value": 331
  },
  {
   "date": "2017-04-06 00:36:48",
   "value": 347
  },
  {
   "date": "2017-04-06 00:37:18",
   "value": 374
  },
  {
   "date": "2017-04-06 00:37:48",
   "value": 389
  },
  {
   "date": "2017-04-06 00:38:18",
   "value": 416
  },
  {
   "date": "2017-04-06 00:38:48",
   "value": 432
  },
  {
   "date": "2017-04-06 00:39:18",
   "value": 461
  },
  {
   "date": "2017-04-06 00:39:48",
   "value": 475
  },
  {
   "date": "2017-04-06 00:40:18",
   "value": 318
  },
  {
   "date": "2017-04-06 00:40:48",
   "value": 332
  },
  {
   "date": "2017-04-06 00:41:18",
   "value": 360
  },
  {
   "date": "2017-04-06 00:41:48",
   "value": 373
  },
  {
   "date": "2017-04-06 00:42:18",
   "value": 403
  },
  {
   "date": "2017-04-06 00:42:48",
   "value": 418
  },
  {
   "date": "2017-04-06 00:43:18",
   "value": 446
  },
  {
   "date": "2017-04-06 00:43:48",
   "value": 459
  },
  {
   "date": "2017-04-06 00:44:18",
   "value": 305
  },
  {
   "date": "2017-04-06 00:44:48",
   "value": 320
  },
  {
   "date": "2017-04-06 00:45:18",
   "value": 347
  },
  {
   "date": "2017-04-06 00:45:48",
   "value": 364
  },
  {
   "date": "2017-04-06 00:46:18",
   "value": 391
  },
  {
   "date": "2017-04-06 00:46:48",
   "value": 444
  },
  {
   "date": "2017-04-06 00:47:18",
   "value": 475
  }
 ]
 }

var abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00',  '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00'];
abc[6]='2014-05-02 20:23:00';

var dates = [];
var vals = [];
realData.results.forEach( function(m) { dates.push(m.date); vals.push(m.value);});

var trace1 = {
x: dates,
y: vals,
  fill: 'tozeroy',
  fillcolor: 'red',
  text: "server1",
  hoverinfo: "x+y+text",
  name:"Server 1",
  type: 'scatter',
  mode:"markers",
  marker:
  {
    size:4,
    color:"gray"
  },
  uid:"c2e171",
  dragmode:"turntable"
};
var layout = {
  margin: {
    l: 35,
    r: 40,
    b: 50,
    t: 10
  },
  legend: {
    "orientation": "h"
  },
  xaxis: {
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  yaxis : {
    fixedrange: true,
    showgrid: false,
    showline: true,
    ticks: "outside"
  },
  dragmode:false,
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']});

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.