1- /*
2- * To change this template, choose Tools | Templates
3- * and open the template in the editor.
4- */
5-
6-
7- // d3 barchart sample from : "http://www.guerino.net"
8- //var dataSet = [{legendLabel: "Data Usage: 2012 APRIL", magnitude: 54.45},
9- //{legendLabel: "Data Usage: 2012 MAY", magnitude: 21.1}];
10-
11- var hwColour = "#64A0DE" ;
12-
13- function drawHorizontalBarChart ( chartID , selectString , colors , values , months ) {
14-
15- //alert(values);
16- //alert(values.indexOf("{"));
17-
18- var deviceIp = "${deviceIp}" ;
19- var monthId = "${monthId}" ;
20- var monthName = "${month}" ;
21-
22- var MONTHS = [ "JANUARY" , "FEBRUARY" , "MARCH" , "APRIL" , "MAY" , "JUNE" , "JULY" , "AUGUST" , "SEPTEMBER" ,
23- "OCTOBER" , "NOVEMBER" , "DECEMBER" ] ;
24- if ( values . indexOf ( "{" ) == 0 )
25- {
26- values = values . substring ( 1 , values . length - 1 ) ;
27- //alert(values);
28- values = values . split ( "," ) ;
29- //alert(values);
30- }
31-
32- if ( values == null )
33- d3 . csv ( "data/HW/HWStatsUsageFlows_sql_.csv" , function ( data ) {
34- values = data ;
35- } ) ;
36- /*if (deviceIp!=null)
37- values = data.filter(function(d) {
38- var date = d.ipdate;
39- date = date.substring(date.indexOf(" ")+1);
40- var deviceMonth = date.split("-")[1];
41- if (deviceMonth.indexOf("0")==0)
42- deviceMonth=deviceMonth.substring(1);
43- deviceMonth--;
44- //alert(deviceMonth+" "+monthId+" "+(deviceMonth==monthId));
45- //exit;
46- //if (d.ipaddr == deviceIp)
47- // if (deviceMonth == monthId)
48- // return true;
49- //return false;
50- return ((d.ipaddr == deviceIp) && (deviceMonth == monthId));
51- });
52- //alert(values);
53- /*values.forEach(function(d) {
54- var date = d.ipdate;
55- date = date.substring(date.indexOf(" ")+1);
56- var day = date.split("-")[2];
57- //to avoid null values set the non used values to default:
58- d.date = date; d.ipaddr = deviceIp; d.last = date;
59- //set the values used for the graph
60- d.ipdate = day + monthName;//parse(date);
61- d.bytes =+ d.bytes;
62- d.bytes = d.bytes/(1024*1024);
63- d.bytes = d.bytes.toFixed(2);
64- //set the link to details of the day...
65- d.link = "deviceday.htm?ip="+deviceIp+"&month="+monthName+"&monthId="+monthId+"&day="+day;
66- });*/
67- var data = [ ] ;
68- for ( var i = 0 ; i < values . length ; i ++ )
69- {
70- var d = values [ i ] ;
71- var date = d ;
72- date = date . substring ( 0 , date . indexOf ( "=" ) ) ;
73- if ( months )
74- {
75- date = + date ;
76- date = MONTHS [ date ] ;
77- }
78- else
79- date = date + monthName ;
80-
81- var nbytes = d . substring ( d . indexOf ( "=" ) + 1 , d . length ) ;
82- nbytes = + nbytes ;
83- nbytes = nbytes / ( 1024 * 1024 ) ;
84- nbytes = nbytes . toFixed ( 2 ) ; //decimals, Math.floor(): no decimals
85-
86- var object = { } ;
87- object . date = date ;
88- object . bytes = nbytes ;
89-
90- data [ i ] = object ;
91-
92- //alert(object);
93- }
94-
95- for ( var i = 0 ; i < data . length ; i ++ )
96- {
97- var d = data [ i ] ;
98- //alert(d.date+" "+d.bytes);
99- }
100- //alert(data);
101-
102- /*var data=[1,2,3,4];
103- data.forEach(function(d){
104- data.date = 1;
105- data.bytes = 2;
106- alert(data.date+" "+data.bytes);
107- return data;
108- });*/
109- /*values.forEach(function(d){
110- //alert(d+" "+d.indexOf("="));
111- var date = d;
112- date = date.substring(0, date.indexOf("="));
113- var nbytes = d.substring(d.indexOf("=")+1, d.length);
114- nbytes = +nbytes;
115- //alert(d+" "+date+" and "+nbytes);
116- d.date = date;
117- d.nbytes = nbytes;
118- var data={"date":date, "nbytes": nbytes};
119- data.date = data["date"];
120- data.nbytes = data["nbytes"];
121- alert(data.date+" "+d.nbytes);
122- d.date = data.date;
123- d.nbytes = data.nbytes;
124- d = data;
125- return d;
126- //return data;
127- //alert(d.nbytes+" "+d.date);
128- });*/
129-
130- //alert(values);
131-
132- values = data ;
133- //alert(values);
134- //values.forEach(function(d){alert(d.date+" "+d.bytes);});
135-
136- var canvasWidth = 700 ;
137- var barsWidthTotal = 300 ;
138- var barHeight = 20 ;
139- var barsHeightTotal = barHeight * values . length ;
140- //var canvasHeight = 200;
141- var canvasHeight = values . length * barHeight + 10 ; // +10 puts a little space at bottom.
142- var legendOffset = barHeight / 2 ;
143- var legendBulletOffset = 30 ;
144- var legendTextOffset = 40 ;
145-
146- var x = d3 . scale . linear ( ) . domain ( [ 0 , d3 . max ( values , function ( d ) { return d . bytes ; } ) ] ) . rangeRound ( [ 0 , barsWidthTotal ] ) ;
147- var y = d3 . scale . linear ( ) . domain ( [ 0 , values . length ] ) . range ( [ 0 , barsHeightTotal ] ) ;
148-
149- // Create the svg drawing canvas...
150- var canvas = d3 . select ( selectString )
151- . append ( "svg:svg" )
152- . attr ( "width" , canvasWidth )
153- . attr ( "height" , canvasHeight ) ;
154-
155- // Draw individual hyper text enabled bars...
156- canvas . selectAll ( "rect" )
157- . data ( values )
158- . enter ( )
159- . append ( "svg:rect" )
160- . attr ( "x" , 0 ) // Right to left
161- . attr ( "y" , function ( d , i ) { return y ( i ) ; } )
162- . attr ( "height" , barHeight )
163- . style ( "fill" , "black" )
164- . style ( "stroke" , "black" )
165- . attr ( "width" , function ( d ) { if ( d . bytes < 100 ) return 1 ; else return x ( d . bytes / 10 ) ; } )
166- . style ( "fill" , function ( d , i ) { colorVal = hwColour ; return colorVal ; } )
167- . attr ( "index_value" , function ( d , i ) { return "index-" + i ; } )
168- . attr ( "class" , function ( d , i ) { return "bars-" + chartID + "-bar-index-" + i ; } )
169- . attr ( "color_value" , function ( d , i ) { return hwColour ; } )
170- . style ( "stroke" , "black" ) ;
171-
172- // Create text values that go at end of each bar...
173- canvas . selectAll ( "text" )
174- . data ( values ) // Bind dataSet to text elements
175- . enter ( ) . append ( "svg:text" ) // Append text elements
176- . attr ( "x" , x )
177- . attr ( "y" , function ( d , i ) { return y ( i ) ; } )
178- . attr ( "dx" , function ( d ) { return barsWidthTotal ; } ) //return x(d.bytes/10) + 100; })
179- . attr ( "dy" , barHeight - 5 )
180- //.attr("text-anchor", "end")
181- . text ( function ( d ) { return d . date + ":\t" + d . bytes + " Mb" ; } )
182- . attr ( "fill" , "black" ) ;
183-
184- // Create hyper linked text at right that acts as label key...
185- canvas . selectAll ( "a.legend_link" )
186- . data ( values ) // Instruct to bind dataSet to text elements
187- . enter ( ) . append ( "svg:a" )
188- . attr ( "xlink:href" , function ( d ) { return d . link ; } )
189- . append ( "text" )
190- . attr ( "text-anchor" , "center" )
191- . attr ( "x" , barsWidthTotal + legendBulletOffset + legendTextOffset )
192- . attr ( "y" , function ( d , i ) { return legendOffset + i * barHeight ; } )
193- . attr ( "dx" , 0 )
194- . attr ( "dy" , "5px" )
195- . text ( function ( d ) { return d . ipdate ; } ) //legendLabel
196- . style ( "fill" , "Black" )
197- //.on('mouseover', synchronizedMouseOver)
198- //.on("mouseout", synchronizedMouseOut)
199- . attr ( "index_value" , function ( d , i ) { return "index-" + i ; } )
200- . attr ( "class" , function ( d , i ) { return "bars-" + chartID + "-legendText-index-" + i ; } ) ;
201-
202- // });//dataSet function end
203- } ; //draw function end
204-
205-
0 commit comments