root/ui/web/htdocs/graph_controls.inc

Revision 4f81059475d5c1fc94913a5cc50a4475e04d0b5c, 9.3 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 6 years ago)

set titles and dataset titles, add 'remember graph' and fix styles, refs #22

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