1 <div id=
"canvas_applet">
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>
15 var view = Backbone.View.extend({
19 initialize: function (options) {
21 this.$el = $($('#canvas_applet').html());
23 this.model.on('applet_loaded', function () {
24 that.$el.parent().css('height', '
100%');
31 var applet = Backbone.Model.extend({
32 initialize: function () {
35 this.set('title', 'Message Stats');
36 this.view = new view({model: this});
38 this.on('applet_loaded', function () {
39 function loadGraphing(){
40 window.c = function(){ delete window.c; that.startGraphing(); };
42 // Load the charting scripts and call our temp. func when complete
43 google.load(
"visualization",
"1", {callback: 'window.c()', packages:[
"corechart"]});
46 // First step - load the charting scripts
47 $script('http://www.google.com/jsapi', loadGraphing);
53 startGraphing: function() {
56 // Create our kiwi components
57 var net = kiwi.components.Network();
58 var input = kiwi.components.ControlInput();
60 // Holder for our stats and numbers
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;
69 that.stats[event.channel]++;
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]);
76 var data = google.visualization.arrayToDataTable(chart_data);
78 // Create the chart and plot it
79 var chart = new google.visualization.ColumnChart(document.getElementById('plugin_example_graph'));
82 title: 'Num. Incoming messages'
85 chart.draw(data, options);
89 net.on('kiwi', function (event) { console.log('kiwi', event); });
90 input.on('command:graph', function (event) { console.log(event); });
95 kiwi.components.Applet.register('canvas', applet);
96 kiwi.components.Applet.loadOnce('canvas');