Masayoshi Kobayashi | fc5e237 | 2013-02-27 20:21:28 +0000 | [diff] [blame] | 1 | function controller_status(data_source){ |
| 2 | /* var data = [{name:'onos9vpc', onos: 1, cassandra: 1}, |
| 3 | {name:'onos10vpc', onos: 0, cassandra: 1}, |
| 4 | {name:'onos11vpc', onos: 1, cassandra: 1}, |
| 5 | {name:'onos12vpc', onos: 0, cassandra: 1}] */ |
| 6 | |
| 7 | var barWidth = 100; |
| 8 | var width = (barWidth + 10) * 4 |
| 9 | var height = 50; |
| 10 | |
| 11 | |
| 12 | var Servers = d3.select("#servers"). |
| 13 | append("svg:svg"). |
| 14 | attr("width", 800). |
| 15 | attr("height", 30); |
| 16 | |
| 17 | var ContStatus = d3.select("#onos-status"). |
| 18 | append("svg:svg"). |
| 19 | attr("width", 800). |
| 20 | attr("height", 50); |
| 21 | |
| 22 | var CassandraStatus = d3.select("#cassandra-status"). |
| 23 | append("svg:svg"). |
| 24 | attr("width", 800). |
| 25 | attr("height", 50); |
| 26 | |
| 27 | d3.json(data_source, draw); |
| 28 | |
| 29 | function draw(json){ |
| 30 | // var data = json.data; |
| 31 | var data = json; |
| 32 | var server = Servers.selectAll("text").data(data); |
| 33 | var controller_rect = ContStatus.selectAll("rect").data(data); |
| 34 | var controller_text = ContStatus.selectAll("text").data(data); |
| 35 | var cassandra_rect = CassandraStatus.selectAll("rect").data(data); |
| 36 | var cassandra_text = CassandraStatus.selectAll("text").data(data); |
| 37 | |
| 38 | var x = d3.scale.linear().domain([0, data.length]).range([0, width]); |
| 39 | var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.onos; })]).rangeRound([0, height]); |
| 40 | var y2 = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.cassandra; })]).rangeRound([0, height]); |
| 41 | |
| 42 | console.log(data) |
| 43 | server. |
| 44 | enter(). |
| 45 | append("svg:text"). |
| 46 | attr("x", function(datum, index) { return x(index); }). |
| 47 | attr("y", function(datum) { return 20; }). |
| 48 | text(function(datum) { return datum.name; }); |
| 49 | |
| 50 | controller_rect. |
| 51 | enter(). |
| 52 | append("svg:rect"). |
| 53 | attr("x", function(datum, index) { return x(index); }). |
| 54 | attr("y", function(datum) { return height - y(datum.onos); }). |
| 55 | attr("height", function(datum) { return y(datum.onos); }). |
| 56 | attr("width", barWidth). |
| 57 | attr("fill", "#2d578b"); |
| 58 | |
| 59 | controller_text. |
| 60 | enter(). |
| 61 | append("svg:text"). |
| 62 | text(function(){return "ONOS"}). |
| 63 | attr("x", function(datum, index) { return x(index)+10; }). |
| 64 | attr("y", function(datum) { return 30 ; }). |
| 65 | attr("height", function(datum) { return y(datum.onos); }). |
| 66 | attr("width", barWidth). |
| 67 | attr('fill', 'white'); |
| 68 | |
| 69 | cassandra_rect. |
| 70 | enter(). |
| 71 | append("svg:rect"). |
| 72 | attr("x", function(datum, index) { return x(index); }). |
| 73 | attr("y", function(datum) { return height - y2(datum.cassandra); }). |
| 74 | attr("height", function(datum) { return y2(datum.cassandra); }). |
| 75 | attr("width", barWidth). |
| 76 | attr("fill", "#aa0000"); |
| 77 | |
| 78 | cassandra_text. |
| 79 | enter(). |
| 80 | append("svg:text"). |
| 81 | text(function(){return "Cassandra"}). |
| 82 | attr("x", function(datum, index) { return x(index); }). |
| 83 | attr("y", function(datum) { return 30 ; }). |
| 84 | attr("height", function(datum) { return y(datum.onos); }). |
| 85 | attr("width", barWidth). |
| 86 | attr('fill', 'white'); |
| 87 | |
| 88 | controller_rect. |
| 89 | attr("x", function(datum, index) { return x(index); }). |
| 90 | attr("y", function(datum) { return height - y(datum.onos); }). |
| 91 | attr("height", function(datum) { return y(datum.onos); }). |
| 92 | attr("width", barWidth). |
| 93 | attr("fill", "#2d578b"); |
| 94 | |
| 95 | controller_text. |
| 96 | text(function(){return "ONOS"}). |
| 97 | attr("x", function(datum, index) { return x(index)+10; }). |
| 98 | attr("y", function(datum) { return 30 ; }). |
| 99 | attr("height", function(datum) { return y(datum.onos); }). |
| 100 | attr("width", barWidth). |
| 101 | attr('fill', 'white'); |
| 102 | |
| 103 | cassandra_rect. |
| 104 | attr("x", function(datum, index) { return x(index); }). |
| 105 | attr("y", function(datum) { return height - y2(datum.cassandra); }). |
| 106 | attr("height", function(datum) { return y2(datum.cassandra); }). |
| 107 | attr("width", barWidth). |
| 108 | attr("fill", "#aa0000"); |
| 109 | |
| 110 | cassandra_text. |
| 111 | text(function(){return "Cassandra"}). |
| 112 | attr("x", function(datum, index) { return x(index); }). |
| 113 | attr("y", function(datum) { return 30 ; }). |
| 114 | attr("height", function(datum) { return y(datum.cassandra); }). |
| 115 | attr("width", barWidth). |
| 116 | attr('fill', 'white'); |
| 117 | |
| 118 | |
| 119 | server.exit().remove(); |
| 120 | controller_rect.exit().remove(); |
| 121 | controller_text.exit().remove(); |
| 122 | cassandra_rect.exit().remove(); |
| 123 | cassandra_text.exit().remove(); |
| 124 | } |
| 125 | $("#more").click( function() { |
| 126 | $.ajax({ |
| 127 | url: 'http://gui.onlab.us:8080/controller_status1', |
| 128 | success: function(json) { |
| 129 | draw(json); |
| 130 | }, |
| 131 | dataType: "json" |
| 132 | }); |
| 133 | }); |
| 134 | $("#less").click( function() { |
| 135 | $.ajax({ |
| 136 | url: 'http://gui.onlab.us:8080/controller_status2', |
| 137 | success: function(json) { |
| 138 | draw(json); |
| 139 | }, |
| 140 | dataType: "json" |
| 141 | }); |
| 142 | }); |
| 143 | |
| 144 | } |
| 145 | |