This is an old revision of the document!

Data Visualization CLient

The Data Visualization Client listens to a given ros topic for data_vis_msgs and displays them as a chart. Currently donut charts and bar charts are supported.

Example

This simple web site subscribes to the topic 'data_vis_msgs' and adds diagrams to the div 'chart'. 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 
  <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
  <script type="text/javascript" src="http://cdn.robotwebtools.org/ColladaAnimationCompress/current/ColladaLoader2.min.js"></script>
  <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
  <script type="text/javascript" src="DonutChart.js"></script>
  <script type="text/javascript" src="BarChart.js"></script>
  <script type="text/javascript" src="DataVisClient.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
 
  <script type="text/javascript" type="text/javascript">
    function init() {
 
      var ros = new ROSLIB.Ros({
        url : 'ws://localhost:9090'
      });
 
      var options = {
        ros: ros,
        containerId: '#chart',
        topic: 'data_vis_msgs'
      };
      var dataVisClient = new DataVisClient(options);
    }
  </script>
</head>
<style>
</style>
 
<body onload="init()">
 
<div id="top">
<h1>DataVis Demo</h1>
<div id="chart">
 
</div>
</div>
</body>

Make sure DonutChart.js, BarChart.js and DataVisClient.js are in the same directory as the html file and you run 

$ roslaunch knowrob_vis knowrob_vis.launch

on your localhost. By now messages can be published to the same topic like this: 

$ rostopic pub /data_vis_msgs data_vis_msgs/DataVis '
  {
    id: "idstring",
    type: 0,
    title: "some title",
    xlabel: "x",
    ylabel: "y",
    {
      value1: ["a","b","c"],
      value2: ["3","8","5"]
    }
  }
'

Type 0 means donut chart, type 1 bar chart. To update data in a already existing diagram simply publish the message again with the same id and new data in value1 and value2. The chart will update immediately.

To remove a chart, publish a message with its id and an empty array for value2.