obiwahn February 2016

Strange diagonal line in Google Visualization API

Sometimes I get a strange diagonal line in my Google Line Chart. Please see below the blue Volume chart.

It is has that "closing" line from the first to the last value.

Any idea how this comes?

strange diagonal line

data = new google.visualization.DataTable()
data.addColumn('datetime', 'Date')
data.addColumn('number', 'Volume')
data.addColumn('number', 'Connected')
for tracking in trackings
    if(tracking.createdAt instanceof Date && tracking.volume? && typeof tracking.volume is "number")
        connected = if(tracking.connected? && tracking.connected) then 10000 else -10000
        data.addRow([tracking.createdAt, tracking.volume, connected])
options = {
    title: 'Sensor Values'
    legend:
        position: 'bottom'
    hAxis:
        minValue: from
        maxValue: to
    curveType: 'function'
}
chart = new google.visualization.LineChart(document.getElementById('volumeChart'))
chart.draw(data, options)

Answers


obiwahn February 2016

The issue disappears when you sort the data by date.

It appeared when I had ca. more than 200 unsorted data points on the graph.

In Meteor / MongoDB this worked for me:

data = SensorTracking.find({}, {sort: {createdAt: 1}}).fetch()

Post Status

Asked in February 2016
Viewed 1,824 times
Voted 9
Answered 1 times

Search




Leave an answer