I am generating a graph using the flot library (v 0.8) which appears to be drawing a line between the starting point and end point of the data series. I cannot seem to figure out why this additional line is being drawn, which you can see here:
I created a fiddle to test with that show the issue (it's missing the flot time plugin, so i commented out the options related to it).
Here is the code:
var options = {
series : {
lines: { show: true },
color : "#00E5EE"
},
xaxis: {
mode: "time",
timeformat: "%d %b %h:%M %P",
timezone: "browser",
tickLength: 0
},
yaxis: {
tickLength: 0
},
lines: {
show: true
},
points: {
show: false
},
grid: {
hoverable: true,
borderWidth: 0,
aboveData: true,
},
};
$("#placeholder").empty();
$.plot($("#placeholder"), [data], options);
Here is the data series:
[
[
1372428000000,
0.01745128631591797
],
[
1372428060000,
0.03703117370605469
],
[
1372428120000,
0.32158660888671875
],
[
1372428180000,
0.06702804565429688
],
[
1372428240000,
0.06312179565429688
],
[
1372428360000,
0.030078887939453125
],
[
1372428420000,
0.13084697723388672
],
[
1372428480000,
0.011885643005371094
],
[
1372428540000,
0.09821128845214844
],
[
1372428000000,
0.01745128631591797
],
[
1372428060000,
0.03703117370605469
],
[
1372428120000,
0.32158660888671875
],
[
1372428180000,
0.06702804565429688
],
[
1372428240000,
0.06312179565429688
],
[
1372428360000,
0.030078887939453125
],
[
1372428420000,
0.13084697723388672
],
[
1372428480000,
0.011885643005371094
],
[
1372428540000,
0.09821128845214844
]
]
Also using a little CSS to rotate the xaxis labels:
.xAxis > .tickLabel
{
margin-top:40px;
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Your times repeat; the first point - 1372428000000 - repeats ten points later.
When Flot reaches that point in your series, it draws a line to the next point - back at the beginning - and then re-traces the rest of the plot.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.