Commit | Line | Data |
---|---|---|
57b1c0fc D |
1 | <div id="canvas_applet"> |
2 | <style> | |
3 | ||
4 | </style> | |
e72ed3f9 D |
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> | |
57b1c0fc D |
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 | ||
e72ed3f9 | 35 | this.set('title', 'Message Stats'); |
57b1c0fc D |
36 | this.view = new view({model: this}); |
37 | ||
e72ed3f9 D |
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 | |
a1629e09 | 57 | var net = kiwi.components.Network(); |
57b1c0fc D |
58 | var input = kiwi.components.ControlInput(); |
59 | ||
e72ed3f9 D |
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]); | |
57b1c0fc | 75 | }); |
e72ed3f9 D |
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); | |
57b1c0fc D |
86 | }); |
87 | ||
e72ed3f9 | 88 | // Bla... |
a1629e09 | 89 | net.on('kiwi', function (event) { console.log('kiwi', event); }); |
8913f3ea | 90 | input.on('command:graph', function (event) { console.log(event); }); |
57b1c0fc D |
91 | } |
92 | }); | |
93 | ||
94 | ||
95 | kiwi.components.Applet.register('canvas', applet); | |
96 | kiwi.components.Applet.loadOnce('canvas'); | |
97 | })(); | |
98 | ||
99 | </script> |