Why is the graph graph not displaying data correctly?
The data is coming from the beck end correctly, but the graph sometimes does not display properly. Why does this happen sometimes? I named this code.
The graph area is not filling up properly. My graph looks like this:
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 am getting data for x and y dynamically from the backend. Ignore the above x and y.
I am getting the following data for x and y from the 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
}
]
}
+3
source to share
1 answer
This seems to work well in this code. I got the error that server1 was not defined, but otherwise it works as expected. My initial thought was that there was something with your x-axis, but everything seems to look great here. What version of d3 are you using? Also, which browser? I am using Chrome on Ubuntu.
Update:
I have added updated data. A comma was missing next to the date "2017-04-06 00:44:18" which caused some problems with its parsing. I fixed it, but I can do it all with the same code as before. The new graph looks like this:
I still can't reproduce your render error, but I'll see if I can do it by playing around with the difference.
<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>
+1
source to share