Example

For this example we will be making a graph that plots random values on the y axis.

graphsrv is built as a vodka application, to create a new source for graph data
we will need to make an additional vodka applet.

Install

pip install graphsrv

Applet home

Create a directory called 'graphsrv_example' at a location of your choosing

mkdir -p /path/to/graphsrv_example
cd /path/to/graphsrv_example

Create the applet

Use vodka's bartender CLI to create a new applet structure

bartender newapp

Plot data plugin

In order to push data for our graph we will create a plugin

Create a file 'plugins/test_plot.py'

import vodka
import vodka.plugins
import vodka.data

import graphsrv.application

import random

@vodka.plugin.register('test_plot')
class TestPlotPlugin(graphsrv.application.GraphSourcePlugin):

    """
    This is a graphsrv source plugin, it allows for quickly pushing
    plots for a graph
    """

    def work(self):

        """
        The work function is called on an interval specified in the
        plugin config
        """

        # self.push pushes plot data for one or more plots, one plot point
        # per graph
        #
        # if you need to push several ticks call push several times and provide
        # custom timestamp values via the 'ts' keyword argument (it defaults
        # to current time)

        self.push(
            [
                # plot a
                {
                    "id" : "a",
                    "value" : float(random.randint(1, 100))
                },

                # plot b
                {
                    "id": "b",
                    "value" : float(random.randint(100,200))
                }
            ]
        )

Register example application

Next edit 'application.py'

import vodka
import vodka.app

# make sure the plugin is available
import graphsrv_example.plugins.test_plot

# we dont do anything with the applet other than to make sure it exists
@vodka.app.register('graphsrv_example')
class MyApplication(vodka.app.Application):
    pass

Configure Layout

Create a file called 'layout.yml'

layouts:

  ## INDEX #####################################################################

  index:
    type: index
    grid: 3x3
    graph:
      config: multitarget
      fit: 'yes'
      targets: all

  ## DETAIL ####################################################################

  detail:
    type: custom
    layout:
    # row 1
    - cols:
      # col 1, render a graph
      - graph:

          config: multitarget

          # fit to column
          fit: 'yes'

          # render all targets to this graph
          targets: all

          # custom graph id
          id: multitarget-1
        width: 12
      height: 100 

Note: Graphsrv will automatically reload changes to this while it's running.

Configure Graphsrv

Create a file called 'config.yml' with the following content

Make sure to edit the following values

• apps.graphsrv.layout_config_file
• apps.graphsrv_example.home
• plugins.http.host
• plugins.http.port

apps:
  # graphsrv app config
  graphsrv:
    enabled: true
    tmpl_engine: jinja2

    # we specify where to load our layout config from
    # graphsrv will automatically reload this when it is changed
    # during runtime
    layout_config_file: /path/to/graphsrv_example/layout.yml

    # graph groups
    groups:
      # data 'source_a'
      source_a:
        # group 'first'
        first:
          # plot a
          a:
            name: Plot A
            color: red
          # plot b
          b:
            name: Plot B
            color: cyan

    # graph config
    graphs:

      # graph name
      multitarget:

        # graph type, multitarget graphs allow plotting of multiple plots
        type: multitarget

        # the field we use to identify a plot in the graph data
        id_field: id 

        # the field we want to plot on the y axis 
        plot_y: value 

        # precision for y axis values
        precision_y: 0

        # tick size for y axis values
        size_y: 1.0

        # the gap between our ticks on the x axis 
        sizes_x:
          - 1000 # 1000 ms (1.0 s)



  # our example app config
  graphsrv_example:
    requires:
      - graphsrv
    enabled: true
    home: /path/to/graphsrv_example


data:

  # vodka can manage our data for us, we define a data type
  # for our test plot data
  - type: test_plot
    handlers:
      # re-index data by the id field
      - type: index
        index: id 
      # store data in a list with a maximum limit of 500 data points
      - type: store
        container: list
        limit: 500

plugins:

  # configure our test plot plugin

  - type: test_plot
    name: source_a
    async: thread 
    interval: 1.0

  # graphsrv uses flask to serve to the web

  - name: http
    type: flask

    # server website to host and port
    host: 0.0.0.0
    port: 7041

    debug: true
    server: gevent
    async: gevent 
    routes:
      /targets : graphsrv->targets
      /graph_data :
        methods:
          - POST
          - GET
        target: graphsrv->graph_data
      /graph : graphsrv->graph_view
      /overview_read_file : graphsrv->overview_read_file
      /: graphsrv->overview_view

# logging config

logging:
  version: 1
  formatters:
    simple:
      format: '%(asctime)s - %(name)s - %(levelname)s: %(message)s'
  handlers:
    console:
      class: logging.StreamHandler
      level: DEBUG
      formatter: simple
      stream: ext://sys.stdout
  loggers:
    vodka:
      level: DEBUG
      handlers:
        - console

Run

Vodka allows you to run its applications with different wsgi servers, in our config we specified gevent as our wsgi server. So we make sure that's installed and them simply serve it using bartender

pip install gevent

bartender serve --config=.

Urls

Once the server is running you should be able to access these paths on your host

Default index layout

http://localhost:7041/

Detail view using the 'detail' layout with data for source_a.first

http://localhost:7041/view/detail/source_a.first

If you have made another index layout

http://localhost:7041/view/<layout_name>/all