This program launches two timeseries plots that run on a Bokeh server. This server streams data from GridDB as it is being updated from the data generating client.

Flow of Data Visualisation

  • Establish web server application
  • Create initial timeseries plot with 1 days worth of data for a coffee store ( and )
  • Fetch data from Grid db and insert it into the webpage timeseries plots.
  • Use periodic callbacks to update the graph on the frontend with either past or recent data depending on the users actions.

The upper timeseries plot represents the instantaneous shot rates at any given time. As a coffee machine makes new records and inserts them into GridDB, the data visualisation program will use the timestamp difference between records to determine what the shot rate at that time should be. An example would be if the recent timespans between records are getting shorter that would mean the shot rate is rising and hence show a more positive slope on the graph. The program will use GridDB and TQL to calculate and show what this new and estimated shot rate should be.

The lower timeseries plots represents temperature readings from each coffee machine in a coffee store. Each line represents a single coffee machine. If you pan left on either plot the program will make queries to GridDB to fetch past data, whether it be past shot rates or temperatures.

Data for Initial Plot

The plot begins by loading two plots based on recent data from GridDB. This data spans up to one day in the past.
Each line in a timeseries plot represents a coffee machine timeseries container in a coffee store collection. From there, timestamps rows from the past day can be fetched with TQL queries. The timestamp, temperatures and other fields can be extracted from each row and can be used to calculate data to append to the graph.

coffee_machine = gridstore.get_container(serial_number)
tql = "select * where timestamp <= NOW() and timestamp >= TIMESTAMPADD(DAY,NOW(),{0}) \       
order by timestamp asc".format(days * -1)

query = coffee_machine.query(tql)
rowSet = query.fetch(False)
row = coffee_machine.create_row()

while rowSet.has_next():
	timestamp = row.get_field_as_timestamp(0)

For getting a past shot rate:

shotRate = GridstoreMethods.get_instantaneous_rate(coffee_machine,int(timestamp))

For getting past temperatures

temperature = row.get_field_as_float(2)

Adding Data Points

x.append(datetime.fromtimestamp(int(timestamp) / 1000 ))

Once the data points are extracted from GridDB, each data point can be added as the x and y coordinates for a data point that can be added to one of the plot lines. These will create two lists that will form the x and y coordinates of the lines which will the data source of the line in the plot figure.

x, y, machine = get_past_shot_rates(gridstore,serial_nums[idx],1)

shot_line = timeseries.line("x","y",source = ColumnDataSource(data = \
dict(x = x, y = y)), color=LINE_COLORS[idx])

Source Code

You can download the application and its source code for the data generating client and data visualisation component from the link below:

Download: datavisualisation_application.tar.gz