root/ui/web/htdocs/graph_controls.inc

Revision 362040a384a15e91c42cc65cd4a30d2dbc5600c7, 8.4 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 6 years ago)

search, albeit useless, refs #22

  • Property mode set to 100644
Line 
1 <script>
2 <!--
3 var current_graph_id = '';
4 var graphinfo;
5 var displayinfo = { start : 14*86400, cnt: '', end: '' };
6 function set_current_graph_id(id) {
7   current_graph_id = id;
8   fetch_graph_info(current_graph_id);
9 }
10 var recurse = 0;
11 function redraw_current_graph() {
12   if(graphinfo.datapoints.length > 0) {
13     $("#flashcontent").slideDown("normal");
14     var url = "amcharts/graph/settings/" + graphinfo.id +
15               "?cnt=" + displayinfo.cnt +
16               "&start=" + displayinfo.start +
17               "&end=" + displayinfo.end;
18     document.getElementById("maingraph").reloadSettings(url);
19   }
20   else {
21     $("#flashcontent").slideUp("normal");
22   }
23 }
24 function update_current_graph(redraw) {
25   if(recurse > 0) return;
26   var str = JSON.stringify(graphinfo);
27   //$("#payload").html(str);
28   $.post("json/graph/store",
29          {'json':str},
30          function(d) {
31            recurse++;
32            graphinfo.id = d.id;
33            if(d.error) {
34              $("#gtool-error").html(d.error);
35              $("#gtool-error").fadeIn('fast');
36            }
37            recurse--;
38            //$("#payload").html(JSON.stringify(graphinfo));
39            if(redraw) redraw_current_graph();
40          }, 'json');
41 }
42 function graph_add_datapoint(d) {
43   if(d.axis == undefined) { d.axis = 'l'; }
44   if(d.name == undefined) { d.name = d.metric_name; }
45   graphinfo.datapoints.push(d);
46   gtool_add_datapoint(d);
47   update_current_graph(true);
48 }
49 function gtool_add_datapoint(d) {
50   var o = $("#datapointeditor").clone();
51   recurse++;
52
53   o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison");
54   o.find("span.axis").click(function(){
55     $(this).siblings().removeClass("axison");
56     $(this).addClass("axison");
57     d.axis = $(this).hasClass("axisl") ? "l" : "r";
58     update_current_graph(true);
59   });
60   if(!d.hidden){o.find('input[@name="view"]').attr("checked","checked");}
61   o.find('input[@name="view"]').change(function(){
62     d.hidden = !($(this).attr("checked"));
63     update_current_graph(true);
64   }).change();
65
66   o.find('.deletedatapoint').click(function(){
67     for(var i=0; i<graphinfo.datapoints.length; i++) {
68       if(graphinfo.datapoints[i] == d) {
69         graphinfo.datapoints.splice(i,1);
70         break;
71       }
72     }
73     update_current_graph(true);
74     refresh_graph_from_json(graphinfo);
75     return false;
76   });
77
78   if(d.metric_type == 'text') {
79     o.find('tr.mathbox').remove();
80     o.find('input[@name="derive"]').attr('disabled','disabled');
81   }
82   else {
83     if(d.derive){o.find('input[@name="derive"]').attr("checked","checked");}
84     o.find('input[@name="derive"]').change(function(){
85       d.derive = ($(this).attr("checked"));
86       update_current_graph(true);
87     }).change();
88
89     o.find('input[@name="math1"]').val(d.math1);
90     o.find('input[@name="math1"]').change(function(){
91       d.math1 = $(this).val();
92       update_current_graph(true);
93     });
94     o.find('input[@name="math2"]').val(d.math2);
95     o.find('input[@name="math2"]').change(function(){
96       d.math2 = $(this).val();
97       update_current_graph(true);
98     });
99   }
100
101   o.find(".datatitle").html(d.name);
102   recurse--;
103   $("#gtool #dataPoints").append(o.children());
104 }
105 function refresh_graph_from_json(j) {
106   graphinfo = j;
107   if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array();
108   $("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)');
109   $("h2#graphTitle").editable(function(value, settings) {
110       graphinfo.title = value;
111       update_current_graph(false);
112       return(value);
113     }, { });
114   $("input[@name='graphtype']:checked").removeAttr("checked");
115   $("input[@name='graphtype']")
116     .filter(function(i){return $(this).val() == graphinfo.type;})
117     .attr("checked","checked");
118   $("#dataPoints").empty();
119   for(var i=0; i<graphinfo.datapoints.length; i++) {
120     gtool_add_datapoint(graphinfo.datapoints[i]);
121   }
122   redraw_current_graph();
123 }
124 function fetch_graph_info(id) {
125  $.getJSON("graph_info.php",{id: id}, refresh_graph_from_json);
126 }
127 -->
128 </script>
129 <!--<p><a href="">username</a> / <a href="#">worksheet</a></p>-->
130 <h2 id="graphTitle"></h2>
131
132 <!-- date range box -->
133 <script type="text/javascript">
134 $(document).ready(function(){
135         var time_windows = { '2d' : 86400*2,
136                               '1w' : 86400*7,
137                               '2w' : 86400*14,
138                               '4w' : 86400*28,
139                               '1y' : 86400*365,
140                             };
141         $(".btn-slide").click(function(){
142                 $("#panel").slideToggle("fast");
143                 $(this).toggleClass("active");
144                 return false;
145         });
146         $(".datechoice").click(function(){
147                 $("#dateRange").html("YYYY/MM/DD - YYYY/MM/DD");
148                 $("#panel").slideUp("slow");
149                 $(".datechoice").removeClass("selected");
150                 displayinfo.start = time_windows[$(this).html()];
151                 displayinfo.end = '';
152                 $(this).addClass("selected");
153                 redraw_current_graph();
154                 return false;
155         });   
156         $(".graphType").change(function(){
157                 graphinfo.type = $(this).val();
158                 update_current_graph(true);
159         });
160         $("#gtool-error").click(function(){
161           $("#gtool-error").fadeOut("slow");
162         });
163         set_current_graph_id('');
164 });
165 </script>
166
167 <div id="datetool">
168         <div id="zoom">
169                 <dl>
170                         <dt>Zoom:</dt>
171                         <dd><a href="#" class="first datechoice">2d</a></dd>
172                         <dd><a href="#" class="datechoice">1w</a></dd>
173                         <dd><a href="#" class="selected datechoice">2w</a></dd>
174                         <dd><a href="#" class="datechoice">4w</a></dd>
175                         <dd><a href="#" class="datechoice">1y</a></dd>
176                 </dl>
177         </div>
178         <div id="range">
179                 <dl>
180                         <dt>Date Range:</dt>
181                         <dd><a href="" class="btn-slide" id="dateRange">YYYY/MM/DD - YYYY/MM/DD</a></dd>
182                 </dl>
183         </div>
184         <div id="panel">calendar here</div>
185 </div>
186                        
187 <!-- confirm box -->
188 <div id="confirm" style="display:none">
189         <a href="#" title="Close" class="modalCloseX modalClose">x</a>
190         <div class="header"><span>Confirm</span></div>
191         <p class="message"></p>
192         <div class="buttons">
193                 <div class="no modalClose">No</div><div class="yes">Yes</div>
194         </div>
195 </div>
196
197 <div>
198         <script type="text/javascript" src="http://postgres83dev.office.omniti.com/reconnoiter/js/swfobject.js"></script>
199         <script type="text/javascript">
200                 function mainGraphData(settings) {
201                         var mg = document.getElementById("maingraph");
202                         mg.reloadSettings(settings);
203                 }
204         </script>
205         <div id="flashcontent">
206                 <strong>You need to upgrade your Flash Player</strong>
207         </div>
208         <script type="text/javascript">
209                 // <![CDATA[           
210                 var so = new SWFObject("amcharts/amline/amline.swf", "maingraph", "697", "400", "8", "#FFFFFF");
211                 so.addVariable("path", "amcharts/amline/");
212                 so.addVariable("settings_file", escape("blank.xml"));
213                 so.addVariable("preloader_color", "#999999");
214                 so.addVariable("chart_id", "maingraph");
215                 so.addParam('wmode','transparent');//added for confirm box
216                 so.write("flashcontent");
217                 // ]]>
218         </script>
219         <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
220         <fieldset>
221         <legend style="display:none;">View</legend>
222         <label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> &nbsp;&nbsp;&nbsp;
223         <label for="stacked_view"><input class="graphType" type="radio" name="graphtype" id="stacked_view" value="stacked" /> Stacked View</label>
224         </fieldset>
225         </form>
226        
227 </div>
228 <div class="error"><p class="error" id="gtool-error"></p></div>
229 <table id="gtool">
230         <tr>
231                 <th></th>
232                
233                 <th class="data">Data Points</th>
234                 <th>Color</th>
235                 <th>Derivative</th>
236                 <th>Axis</th>
237                 <th></th>
238                 <th></th>
239         </tr>
240         <tbody id="dataPoints">
241         </tbody>
242 </table>
243
244 <div style="display:none">
245 <form id="hiddeneditor">
246         <table>
247         <tbody id="datapointeditor">
248         <tr>
249                 <td><input name="view" type="checkbox" value="1"/></td>
250                 <td class="data datatitle"></td>
251                 <td></td>
252                 <td><input name="derive" type="checkbox" value="1"/></td>
253                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
254                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
255                 <td class="math">math</td>
256         </tr>
257         <tr class="mathbox">
258                 <td colspan="7">
259                 <div>
260                         <label for="math">Units conversion</label> <input name="math1" type="text" value="" style="width:380px;" />
261                 </div>
262                 <div>   
263                         <label for="math">Math</label> <input name="math2" type="text" value="" style="width:380px;" />
264                 </div>
265                 </td>
266         </tr>
267         </tbody>
268         </table>
269 </form>
270 </div>
271
272 <div id="payload">
273 </div>
Note: See TracBrowser for help on using the browser.