root/ui/web/htdocs/graph_controls.inc

Revision 9478c46796698a9d729f21764b5671a5acd1fbbe, 8.2 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 6 years ago)

graph editing... (a.k.a. Theo learn jQuery), 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() {
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            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();
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();
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();
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();
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();
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();
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();
98     });
99   }
100
101   o.find(".datatitle").html("[" + d.sid + "-" + d.metric_name + "] " + 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);
109    $("input[@name='graphtype']:checked").removeAttr("checked");
110    $("input[@name='graphtype']")
111      .filter(function(i){return $(this).val() == graphinfo.type;})
112      .attr("checked","checked");
113    $("#dataPoints").empty();
114    for(var i=0; i<graphinfo.datapoints.length; i++) {
115      gtool_add_datapoint(graphinfo.datapoints[i]);
116    }
117    redraw_current_graph();
118 }
119 function fetch_graph_info(id) {
120  $.getJSON("graph_info.php",{id: id}, refresh_graph_from_json);
121 }
122 -->
123 </script>
124 <!--<p><a href="">username</a> / <a href="#">worksheet</a></p>-->
125 <h2 id="graphTitle"></h2>
126
127 <!-- date range box -->
128 <script type="text/javascript">
129 $(document).ready(function(){
130         var time_windows = { '2d' : 86400*2,
131                               '1w' : 86400*7,
132                               '2w' : 86400*14,
133                               '4w' : 86400*28,
134                               '1y' : 86400*365,
135                             };
136         $(".btn-slide").click(function(){
137                 $("#panel").slideToggle("fast");
138                 $(this).toggleClass("active");
139                 return false;
140         });
141         $(".datechoice").click(function(){
142                 $("#dateRange").html("YYYY/MM/DD - YYYY/MM/DD");
143                 $("#panel").slideUp("slow");
144                 $(".datechoice").removeClass("selected");
145                 displayinfo.start = time_windows[$(this).html()];
146                 displayinfo.end = '';
147                 $(this).addClass("selected");
148                 redraw_current_graph();
149                 return false;
150         });   
151         $(".graphType").change(function(){
152                 graphinfo.type = $(this).val();
153                 update_current_graph();
154         });
155         $("#gtool-error").click(function(){
156           $("#gtool-error").fadeOut("slow");
157         });
158         set_current_graph_id('');
159 });
160 </script>
161
162 <div id="datetool">
163         <div id="zoom">
164                 <dl>
165                         <dt>Zoom:</dt>
166                         <dd><a href="#" class="first datechoice">2d</a></dd>
167                         <dd><a href="#" class="datechoice">1w</a></dd>
168                         <dd><a href="#" class="selected datechoice">2w</a></dd>
169                         <dd><a href="#" class="datechoice">4w</a></dd>
170                         <dd><a href="#" class="datechoice">1y</a></dd>
171                 </dl>
172         </div>
173         <div id="range">
174                 <dl>
175                         <dt>Date Range:</dt>
176                         <dd><a href="" class="btn-slide" id="dateRange">YYYY/MM/DD - YYYY/MM/DD</a></dd>
177                 </dl>
178         </div>
179         <div id="panel">calendar here</div>
180 </div>
181                        
182 <!-- confirm box -->
183 <div id="confirm" style="display:none">
184         <a href="#" title="Close" class="modalCloseX modalClose">x</a>
185         <div class="header"><span>Confirm</span></div>
186         <p class="message"></p>
187         <div class="buttons">
188                 <div class="no modalClose">No</div><div class="yes">Yes</div>
189         </div>
190 </div>
191
192 <div>
193         <script type="text/javascript" src="http://postgres83dev.office.omniti.com/reconnoiter/js/swfobject.js"></script>
194         <script type="text/javascript">
195                 function mainGraphData(settings) {
196                         var mg = document.getElementById("maingraph");
197                         mg.reloadSettings(settings);
198                 }
199         </script>
200         <div id="flashcontent">
201                 <strong>You need to upgrade your Flash Player</strong>
202         </div>
203         <script type="text/javascript">
204                 // <![CDATA[           
205                 var so = new SWFObject("amcharts/amline/amline.swf", "maingraph", "697", "400", "8", "#FFFFFF");
206                 so.addVariable("path", "amcharts/amline/");
207                 so.addVariable("settings_file", escape("blank.xml"));
208                 so.addVariable("preloader_color", "#999999");
209                 so.addVariable("chart_id", "maingraph");
210                 so.addParam('wmode','transparent');//added for confirm box
211                 so.write("flashcontent");
212                 // ]]>
213         </script>
214         <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
215         <fieldset>
216         <legend style="display:none;">View</legend>
217         <label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> &nbsp;&nbsp;&nbsp;
218         <label for="stacked_view"><input class="graphType" type="radio" name="graphtype" id="stacked_view" value="stacked" /> Stacked View</label>
219         </fieldset>
220         </form>
221        
222 </div>
223 <div class="error"><p class="error" id="gtool-error"></p></div>
224 <table id="gtool">
225         <tr>
226                 <th></th>
227                
228                 <th class="data">Data Points</th>
229                 <th>Color</th>
230                 <th>Derivative</th>
231                 <th>Axis</th>
232                 <th></th>
233                 <th></th>
234         </tr>
235         <tbody id="dataPoints">
236         </tbody>
237 </table>
238
239 <div style="display:none">
240 <form id="hiddeneditor">
241         <table>
242         <tbody id="datapointeditor">
243         <tr>
244                 <td><input name="view" type="checkbox" value="1"/></td>
245                 <td class="data datatitle"></td>
246                 <td></td>
247                 <td><input name="derive" type="checkbox" value="1"/></td>
248                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
249                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
250                 <td class="math">math</td>
251         </tr>
252         <tr class="mathbox">
253                 <td colspan="7">
254                 <div>
255                         <label for="math">Units conversion</label> <input name="math1" type="text" value="" style="width:380px;" />
256                 </div>
257                 <div>   
258                         <label for="math">Math</label> <input name="math2" type="text" value="" style="width:380px;" />
259                 </div>
260                 </td>
261         </tr>
262         </tbody>
263         </table>
264 </form>
265 </div>
266
267 <div id="payload">
268 </div>
Note: See TracBrowser for help on using the browser.