Why does the graph become empty after dragging it
When I drag (expand) several times then the graphs are blank. I named this code.
I want the graph to work like the High Cahrt Line Graph . In a tall chart, when we drag 4-5 times, then we stop the zoom chart and don't get an empty chart.
I want to stop this. I do not want empty. I didn't figure out how to stop it. Before you drag the graph like this:
After dragging multiple graphs, the following are as follows:
My code:
<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 am new to plotly.js. Thank you in advance.
source to share
The used resistance is used as a filter for a more detailed view (increase) of the data. Each time you drag, it filters the data view into fewer data points. After a few drags, you were filtering yourself out less time than the data could account for, so there is no data on the chart. Try double-clicking the chart to see (zoom out) 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>
source to share