client/assets/plugin_example.html

   1 <div id="canvas_applet">
   2     <style>
   3
   4     </style>
   5     <div style="height:100%; position:relative;">
   6         <div id="plugin_example_graph" style="height:250px;width:80%;margin:1em auto;border:1px solid gray;"></div>
   7     </div>
   8 </div>
   9
  10
  11 <script>
  12
  13
  14     (function () {
  15         var view = Backbone.View.extend({
  16             events: {
  17             },
  18
  19             initialize: function (options) {
  20                 var that = this;
  21                 this.$el = $($('#canvas_applet').html());
  22
  23                 this.model.on('applet_loaded', function () {
  24                     that.$el.parent().css('height', '100%');
  25                 });
  26             }
  27         });
  28
  29
  30
  31         var applet = Backbone.Model.extend({
  32             initialize: function () {
  33                 var that = this;
  34
  35                 this.set('title', 'Message Stats');
  36                 this.view = new view({model: this});
  37
  38                 this.on('applet_loaded', function () {
  39                     function loadGraphing(){
  40                         window.c = function(){ delete window.c; that.startGraphing(); };
  41
  42                         // Load the charting scripts and call our temp. func when complete
  43                         google.load("visualization", "1", {callback: 'window.c()', packages:["corechart"]});
  44                     }
  45
  46                     // First step - load the charting scripts
  47                     $script('http://www.google.com/jsapi', loadGraphing);
  48                 });
  49
  50             },
  51
  52
  53             startGraphing: function() {
  54                 var that = this;
  55
  56                 // Create our kiwi components
  57                 var net = kiwi.components.Network();
  58                 var input = kiwi.components.ControlInput();
  59
  60                 // Holder for our stats and numbers
  61                 this.stats = {};
  62
  63                 // Do our magic on any incoming message
  64                 net.on('message', function (event) {
  65                     // Make sure we have this stat
  66                     if (!that.stats[event.channel])
  67                         that.stats[event.channel] = 0;
  68
  69                     that.stats[event.channel]++;
  70
  71                     // Build the chart data
  72                     var chart_data = [['Source', 'Messages']];
  73                     _.each(that.stats, function(stat, source_name){
  74                         chart_data.push([source_name, stat]);
  75                     });
  76                     var data = google.visualization.arrayToDataTable(chart_data);
  77
  78                     // Create the chart and plot it
  79                     var chart = new google.visualization.ColumnChart(document.getElementById('plugin_example_graph'));
  80
  81                     var options = {
  82                         title: 'Num. Incoming messages'
  83                     };
  84
  85                     chart.draw(data, options);
  86                 });
  87
  88                 // Bla...
  89                 net.on('kiwi', function (event) { console.log('kiwi', event); });
  90                 input.on('command:graph', function (event) { console.log(event); });
  91             }
  92         });
  93
  94
  95         kiwi.components.Applet.register('canvas', applet);
  96         kiwi.components.Applet.loadOnce('canvas');
  97     })();
  98
  99 </script>