Single point is buggy in flot.js chart

Question

I'm having a bit of trouble trying to implement a flot chart correctly. It's a line chart with dates on the X axis and decimal values on the Y axis.

The chart displays fine, but there's a single point which is, essentially, at the correct place on the graph, but then spans all the way through it.

See screenshot for reference:

I have checked that the date value of the point is correct (it's 30/9/2015 (EU date format) and the next is 1/10/2015 (EU date format)) The decimal number is also correctly placed, it seems.

The JSON that I'm using is this: gist

The JSON data comres from an ASP.NET webserver.

Does anyone know what I'm doing wrong here? :-)

Thanks in advance.

Can you explain the problem? What does "spans all the way through it" mean? — Pointy, Mar 28 '16 at 13:48
In my screenshot, there's only two lines: the blue and the yellow. The first yellow marking/dot is creating a line all the way through the graph it seems, which it should not. — bomortensen, Mar 28 '16 at 13:51
Oh OK, so it's that yellow line that goes from one side to the other. Thanks. — Pointy, Mar 28 '16 at 13:52
There's a 2015 date at the very end of the array. Is that intentional? — Pointy, Mar 28 '16 at 13:55

score 3 · Accepted Answer · answered Mar 28 '16 at 13:55

3

The timestamp of the last record in your gist is the smallest timestamp, which means it should be the first record to plot properly. Flot plots data in the order that data is fed to it -- you should sort it before you feed it to Flot for plotting.

answered Mar 28 '16 at 13:55

mechenbier

3,037
23
31

That's exactly what I needed :-) an `.OrderBy()` on the server made it work. Thanks! – bomortensen Mar 28 '16 at 14:07

Single point is buggy in flot.js chart

1 Answers1