root/ui/web/htdocs/graph_panel.inc

Revision ad3e0292582d35cd7581a4e96927b1feffd70569, 26.1 kB (checked in by Michal Taborsky <michal@taborsky.cz>, 2 years ago)

Support for vertical lines in text metrics

  • Property mode set to 100644
Line 
1 <script type="text/javascript">
2 <!--
3 var maingraph;
4 var current_graph_id = '';
5 var debug_graph_edit = false;
6 var graphinfo= {};
7 var displayinfo = { start : 14*86400, cnt: '', end: '' };
8 var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333')
9 var color_sel = 0;
10 var locked = true;
11
12 function graph_locked(warning) {               
13   if(locked) {
14     modal_warning("Graph Locked!", warning);
15     return locked;
16   }
17   return locked;
18 }
19
20 function lock_forms() {
21         $("input[name='lines']").attr("disabled", "true");
22         $("input[name='math1']").attr("disabled", "true");
23         $("input[name='math2']").attr("disabled", "true");
24         $("input[name='view']").attr("disabled", "true");
25         $("input[class='graphType']").attr("disabled", "true");
26         $("select[name='derive']").attr("disabled", "true");
27         $("select[class='av_stacks']").attr("disabled", "true");
28
29         $("h2#graphTitle").unbind();
30         $(".datatitle").unbind();
31         $(".combinable").each( function() { $(this).draggable('destroy'); });
32         $(".composite_function").each( function() { $(this).droppable('destroy'); });
33 }
34
35 function unlock_forms() {
36
37         $("input[name='lines']").removeAttr("disabled");
38         $("input[name='math1']").removeAttr("disabled");
39         $("input[name='math2']").removeAttr("disabled");
40         $("input[name='view']").removeAttr("disabled");
41         //leave the graph type disabled, since we dont use it anywhere rightnow
42         //$("input[class='graphType']").removeAttr("disabled");
43         $("select[name='derive']").removeAttr("disabled");
44         $("select[class='av_stacks']").removeAttr("disabled");
45
46         $("h2#graphTitle").editable(function(value, settings) {
47            graphinfo.title = value;
48            update_current_graph(false);
49            return(value);
50            }, { });
51
52         $(".datatitle").editable(function(value, settings) {     
53            graphinfo.datapoints[$(".datatitle").index(this)].name = value;
54            update_current_graph(true);
55            return(value);
56         }, { });
57
58         make_composite_draggables();
59 }
60
61 function make_composite_draggables() {
62
63         $(".combinable").each ( function() {
64             $(this).draggable({ cursor: 'move' });
65         });
66
67         $(".composite_function").each( function () { $(this).droppable({
68             drop: function(event, ui) {
69                  var data_index = $(".datatitle").index(ui.draggable);
70                  fbox = $(this).find("input[name='math2']");
71                  fbox.val(fbox.val()+"["+data_index+"]");
72                  var my_index = $("input[name='math2']").index(fbox);
73                  graphinfo.datapoints[my_index].math2 = fbox.val();
74                  update_current_graph(true);
75                }
76           });
77       });
78
79 }
80 function update_graph_permalink(id, start, end, gran){
81  $("#gpermalink a").attr("href", "drawing_board.php?otype=graph&id="+id+"&start="+start+"&end="+end+"&gran="+gran);
82 }
83
84 function stop_streaming_graph (){
85          streaming = false;
86          $('#streambox').html('');
87          $(".stream-log").hide();
88          $("#graph_datetool").show();
89          $("#play_pause_graph").html('PLAY');
90          $("#stopstream_graph").hide();
91          $("#osliderg").hide(); 
92          $(".stream_controls").width("");
93 }
94 //overlay mode: stackadd=false: we just add new stacks for any the incoming graph has
95 //stack mode: stackadd=trule, push new stacks onto matching stack indexes, else append
96 function aggregate_graph(id, stackadd) {
97   if(!graph_locked("Click 'Edit Graph' to unlock.")){
98          if(id) $.getJSON("json/graph/info/" + id, function(g) {
99
100                 var max_old = (graphinfo.datapoints.length) ?  graphinfo.datapoints.length : 0;
101
102                 for(var i=0; i<g.datapoints.length; i++) {
103                         graphinfo.datapoints.push(g.datapoints[i]);
104                 }       
105
106                 if(g.stacks) {
107                   //we must use indexes for datapoints that are updated
108                   for(var i=0; i<g.stacks.length; i++) {
109                     for(var j=0; j<g.stacks[i].length; j++) {
110                       g.stacks[i][j] += max_old;
111                     }
112                   }
113
114                   if(stackadd) {
115                     for(var i=0; i<g.stacks.length; i++){
116                           if(graphinfo.stacks[i]) graphinfo.stacks[i] = graphinfo.stacks[i].concat(g.stacks[i]);
117                           else graphinfo.stacks.push(g.stacks[i]);
118                     }                     
119                   }     
120                   else {
121                      for(var i=0; i<g.stacks.length; i++){
122                            graphinfo.stacks.push(g.stacks[i]);
123                      }
124                   }
125                }
126                 update_current_graph(true);
127                 refresh_graph_from_json(graphinfo);
128               });
129   }
130 }
131
132 function set_current_graph_id(id) {
133   stop_streaming_graph();
134   $(".rememberGraph").fadeOut('fast');
135   if(id!='')  {
136     graphinfo.saved = true;
137     locked = true;
138     lock_forms();
139     $(".editGraph").html('Edit Graph').fadeIn('slow');   
140   }
141   else {       
142     locked = false;
143     unlock_forms();   
144     $(".editGraph").html('Editing!').fadeIn('slow');
145   }
146   current_graph_id = id;
147   update_graph_permalink(current_graph_id, "", "", "");
148   fetch_graph_info(current_graph_id);
149 }
150 var recurse = 0;
151 function update_current_graph(redraw, f) {
152   if(recurse > 0) return;
153   stop_streaming_graph();
154   if(graphinfo.id) update_graph_permalink(current_graph_id, "", "", "");
155   var str = JSON.stringify(graphinfo);
156   if(debug_graph_edit) $("#payload").html(str);
157   $.post("json/graph/store",
158          {'json':str},
159          function(d) {
160            recurse++;
161            graphinfo.id = current_graph_id = d.id;
162            
163            if(d.error) $("#gtool-error").html(d.error).fadeIn('fast');
164            else $("#gtool-error").fadeOut('fast');     
165            if(graphinfo.id && graphinfo.saved != true &&
166               $(".rememberGraph:visible").length == 0) {
167               graphinfo.saved=false;
168              $(".rememberGraph").html('"Remember" this graph.').fadeIn('slow');
169              $(".rememberGraph").click(function() {
170                graphinfo.saved = true;
171                if(graphinfo.stacks == undefined) graphinfo.stacks = Array();
172                update_current_graph(false, function(r) {
173                  if(r.error) {
174                    graphinfo.saved = false;
175                     $("#gtool-error").html(r.error).fadeIn('fast');
176                  }
177                  else $(".rememberGraph").html('Remebered').fadeOut('slow');
178                });
179              });
180            }
181            if(redraw && maingraph) maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type});
182            if(f) f(d);
183            recurse--;
184          }, 'json');
185 }
186
187 function graph_add_datapoint(d) {
188   if(!graph_locked("Click 'Edit Graph' to unlock.")){
189    for(i=0; i<graphinfo.datapoints.length; i++){
190        if( (graphinfo.datapoints[i].sid==d.sid) && (graphinfo.datapoints[i].metric_name == d.metric_name) ) {
191               modal_warning("Error", "Graphs cannot have duplicate datasets!");
192               return;
193        }
194     }
195     if(d.axis == undefined) { d.axis = 'l'; }
196     if(d.name == undefined) { d.name = d.target + '`' + d.metric_name; }
197     graphinfo.datapoints.push(d);
198     gtool_add_datapoint(d);
199     update_current_graph(true);
200   }
201 }
202 function gtool_add_composite() {
203   var d ={};
204   d.metric_type = 'composite';
205   graphinfo.datapoints.push(d);
206   gtool_add_datapoint(d);
207   update_current_graph(true);
208 }
209 function gtool_add_guide() {
210   var d = {};
211   d.metric_type = 'guide';
212   graphinfo.datapoints.push(d);
213   gtool_add_datapoint(d);
214   update_current_graph(true);
215 }
216
217 function gtool_add_datapoint(d) {
218   var o;
219   if(d.metric_type == 'guide') {
220     o = $("#guideeditor").clone();
221   }
222   else if(d.metric_type == 'composite') {
223     o = $("#compositeeditor").clone();
224   }
225   else if(d.metric_type == 'text') {
226     o = $("#textdatapointeditor").clone();
227   }
228   else {
229     o = $("#datapointeditor").clone();
230   }
231   recurse++;
232  
233   if(d.color == null) {
234     d.color = color_pool[color_sel];
235     color_sel = (color_sel + 1) % color_pool.length;
236   }
237   o.find('.colorPickerHolder').ColorPicker({
238     flat: true,
239     color: '#ffffff',
240     onSubmit: (function(dpo,dp) {
241       var cs = dpo.find('.colorSelector');
242       return function(hsb, hex, rgb) {
243         dp.color = '#' + hex;
244         cs.css('border', '1px solid ' + dp.color);
245         cs.find('div').css('backgroundColor', dp.color)
246                       .css('opacity', 0.2);
247         cs.parent().find('.colorPickerHolder').stop().animate({height:0},500);
248         update_current_graph(true);
249       }
250     })(o,d)
251   });
252   o.find('.colorPickerHolder > div').css('position', 'absolute');
253   o.find('.colorSelector').css('border', '1px solid ' + d.color);
254   o.find('.colorSelector div').css('backgroundColor', d.color)
255                               .css('opacity',
256                                    (d.opacity == null) ? 0.2 : d.opacity);
257   o.find('.colorSelector').bind('click', function() {
258     if(!locked){
259         var activecp = $(this).parent().find('.colorPickerHolder');
260         var h = activecp.height();
261         $("#gtool #dataPoints .colorPickerHolder").filter(function(index) {
262              return ($(this) != activecp);
263         }).stop().animate({height:0}, 0);;
264         $(this).parent().find('.colorPickerHolder').stop().animate({height: h != 0 ? 0 : 173}, 500);
265     }
266   });
267
268   o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison");
269   o.find("span.axis").click(function(){
270     if(!locked) {
271        $(this).siblings().removeClass("axison");
272        $(this).addClass("axison");
273        d.axis = $(this).hasClass("axisl") ? "l" : "r";
274        update_current_graph(true);
275     }
276   });
277
278   if(!d.hidden){o.find('input[name="view"]').attr("checked","checked");}
279   o.find('input[name="view"]').change(function(){
280     d.hidden = !($(this).attr("checked"));
281     update_current_graph(true);
282   }).change();
283
284   o.find('select[id="datastack"]').change(function(){
285       var si = find_in_stacks($(".av_stacks").index(this));
286        if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1);
287
288        if(graphinfo.stacks[ $(this).val() ]) {
289          graphinfo.stacks[ $(this).val()].push($(".av_stacks").index(this));
290          graphinfo.stacks[ $(this).val()].sort(function(a,b){return a - b});
291        }
292        update_current_graph(true);
293
294       $(".graphStacks").empty();
295
296       for(var i=0; i<graphinfo.stacks.length; i++) {
297         $(".graphStacks").append('<br>Stack '+i+': ');
298         for(var j=0; j<graphinfo.stacks[i].length; j++){
299             $(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ",");
300         }
301       }
302     }).change();
303
304
305   o.find('.deletedatapoint').click(function(){
306     if(!locked){
307        for(var i=0; i<graphinfo.datapoints.length; i++) {
308          if(graphinfo.datapoints[i] == d) {
309            graphinfo.datapoints.splice(i,1);
310            var si = find_in_stacks(i);
311            if(si != -1) graphinfo.stacks[si.i].splice(si.j, 1);
312
313            //we must decrement the datapoint indexes in the stack array as well
314            for(var k=0; k<graphinfo.stacks.length; k++) {
315              for(var j=0; j<graphinfo.stacks[k].length; j++) {
316                if(graphinfo.stacks[k][j]>i) graphinfo.stacks[k][j]-=1;
317              }
318            }       
319            //TODO do we wanna decrement the indexes referred in composite functions for the user?
320            break;
321          }
322        }         
323           update_current_graph(true);
324           refresh_graph_from_json(graphinfo);
325        }
326     return false;
327   });
328
329   if(d.metric_type == 'text') {
330 //    o.find('tr.mathbox').remove();
331     o.find('select[name="derive"]').val('false');
332     o.find('input[name="lines"]').attr('checked', d.math1=='lines');
333     o.find('input[name="lines"]').change(function(){
334       d.math1 = $(this).is(':checked') ? 'lines':'' ;
335       update_current_graph(true);
336     });
337   }
338   else {
339     if(d.derive){
340       o.find('select[name="derive"]').val(d.derive);
341     }
342     o.find('select[name="derive"]').change(function(){
343       d.derive = $(this).find(":selected").val();
344       update_current_graph(true);
345     }).change();
346
347     o.find('input[name="math1"]').val(d.math1);
348     o.find('input[name="math1"]').change(function(){
349       d.math1 = $(this).val();
350       update_current_graph(true);
351     });
352     o.find('input[name="math2"]').val(d.math2);
353     o.find('input[name="math2"]').change(function(){
354       d.math2 = $(this).val();
355       update_current_graph(true);
356     });
357   }
358
359   d.mouse_title = ( (d.target!=undefined) ? d.target+"`": '') +
360                         ( (d.module!=undefined) ? d.module+"`": '') +
361                         ( (d.orig_name!=undefined)? d.orig_name+"`": '') +
362                         ( (d.metric_name!=undefined)? "`"+d.metric_name: '');
363                        
364   o.find(".datatitle").html(d.name);
365   o.find(".datatitle").attr("title", d.mouse_title);
366
367   if (!locked) {
368       o.find(".datatitle").editable(function(value, settings) {
369       graphinfo.datapoints[$(".datatitle").index(this)].name = value;
370       update_current_graph(true);
371       return(value);
372     }, { });
373  }
374
375   recurse--;
376   $("#gtool #dataPoints").append(o.children());   
377   if(!locked){ make_composite_draggables();}
378 }
379
380 function find_in_stacks(dnum) {
381   for(var i=0; i<graphinfo.stacks.length; i++) {
382       for(var j=0; j<graphinfo.stacks[i].length; j++) {
383          if(graphinfo.stacks[i][j] == dnum) {           
384             var r = { i: i, j: j}; return r;
385          }       
386       }
387   }
388   return -1;
389 }
390 //this function works on the maingraph dom element, which is used througout in graph editing
391 function refresh_graph_from_json(j) {
392   graphinfo = j;
393   if(graphinfo.stacks == undefined) graphinfo.stacks = Array();
394   if(graphinfo.datapoints == undefined) graphinfo.datapoints = Array();
395   $("h2#graphTitle").html(graphinfo.title ? graphinfo.title : 'Graph Title (click to edit)');
396
397   $("input[name='graphtype']:checked").removeAttr("checked");
398   $("input[name='graphtype']")
399     .filter(function(i){return $(this).val() == graphinfo.type;})
400     .attr("checked","checked");
401   $("#dataPoints").empty();
402
403   for(var i=0; i<graphinfo.datapoints.length; i++) {
404     gtool_add_datapoint(graphinfo.datapoints[i]);
405   }
406
407   $(".graphStacks").empty();
408   $('.av_stacks').find('option').remove().end().append('<option value="-1">select </option>')
409
410   for(var i=0; i<graphinfo.stacks.length; i++) {
411     $(".graphStacks").append('<br>Stack '+i+': ');     
412     $('.av_stacks').append('<option value="'+i+'">Stack '+i+'</option>');
413
414     for(var j=0; j<graphinfo.stacks[i].length; j++){
415         $(".graphStacks").append(graphinfo.datapoints[graphinfo.stacks[i][j]].name + ",");
416     }
417   }
418
419   $('select[id="datastack"]').each( function()  {   
420     var si = find_in_stacks($(".av_stacks").index(this));
421     if(si != -1) $(this).val(si.i);
422   });
423
424   if(maingraph) {
425     if(graphinfo.id)
426       maingraph.ReconGraphRefresh({graphid: graphinfo.id, type: graphinfo.type, stacks: graphinfo.stacks});
427     else
428       maingraph.ReconGraphReset();
429   }
430 }
431 function fetch_graph_info(id) {
432   graphinfo.id = id;
433   if(id) $.getJSON("json/graph/info/" + id, refresh_graph_from_json);
434   else refresh_graph_from_json({});
435 }
436 -->
437 </script>
438 <!--<p><a href="">username</a> / <a href="#">worksheet</a></p>-->
439 <p/>
440 <span class="rememberGraph"></span>
441 <span class="blankGraph">New Blank</span>
442 <span class="exportcsv" id="exportcsvg"><a>CSV</a></span>
443 <span class="exportcsv" id="exportpngg" onclick="exportCanvasAsPNG('#maingraph')">PNG</span>
444 <span class="stream_controls">
445 <span id="play_pause_graph">PLAY</span>
446 <span id="stopstream_graph">STOP</span>
447 <div id="osliderg" style="display:none">
448 <div id="pollsliderg"></div>
449 <div id="polltimeg"></div>
450 </div>
451 </span>
452 <span class="editGraph">Edit Graph</span>
453 <span class="permalink" id="gpermalink"><a href="">Link</a></span>
454
455 <h2 id="graphTitle"></h2>
456 <!-- date range box -->
457 <script type="text/javascript">
458 $(document).ready(function(){
459
460         lock_forms();
461
462         var time_windows = { '2d' : 86400*2,
463                               '1w' : 86400*7,
464                               '2w' : 86400*14,
465                               '4w' : 86400*28,
466                               '1y' : 86400*365,
467                             };
468         var state = false;
469
470         //only allow graph editing if not streaming
471         $(".editGraph").click(function() {     
472             if(!streaming){
473                 if(locked){
474                     locked = false;                 
475                     unlock_forms();
476                     $(".editGraph").html('Editing!').fadeIn('slow');
477                 }
478                 else if(!locked){
479                     locked = true;     
480                     lock_forms();
481                     $(".editGraph").html('Edit Graph').fadeIn('slow');
482                 }
483             }
484         });
485
486         $(".editStacks").click(function() {
487                if(!graph_locked("Unlock by clicking 'Edit Graph'.") && graphinfo.id) {                         
488                  graphinfo.stacks.push([]);
489                  var ns = graphinfo.stacks.length - 1;
490                  $(".graphStacks").append('<p>Stack '+ns+'</p>');
491                  $('.av_stacks').append('<option value="'+ns+'">Stack '+ns+'</option>');
492                  update_current_graph(true);
493                }
494        });     
495        //only allow stream toggling if the graph is locked and saved
496        $("#play_pause_graph").click(function() {
497          if(locked && graphinfo.saved) {
498           if($(this).html() == 'PLAY') {
499             $(this).html('PAUSE');
500             //if we are playing for the frist time
501             if(!streaming) {
502               $('#graph_datetool').hide();
503               $(".stream-log").show().html("stream log_");
504               $("#stopstream_graph").show();
505               $("#osliderg").show();
506               //theres probably a better way to make sure stuff fits in the stream_controls div
507               $(".stream_controls").width("290px");
508             }
509             //setup/restart the plotting
510             stream_data(graphinfo.id, maingraph, $('#streambox'));
511           }
512           else if($(this).html() == 'PAUSE') {
513              $(this).html('PLAY');
514              //this is where we pause for a bit
515              maingraph.stopTime();
516           }
517         }
518        });
519
520        $("#stopstream_graph").click(function() {
521         stop_streaming_graph();
522         update_current_graph(true);
523        });
524
525        $("#polltimeg").html(polltime+" ms");
526
527        $("#pollsliderg").slider({orientation: 'horizontal', value: polltime, max: 10000, min: 1000, step: 1000,
528             change: function (event, ui) { 
529                        polltime = $(this).slider('option', 'value');
530                 $("#polltimeg").html(polltime+" ms");
531                 if(streaming) {
532                     streaming = false;
533                     $('#streambox').html('');
534                     $("#play_pause_graph").html('PAUSE');
535                     stream_data(graphinfo.id, maingraph, $('#streambox'));
536                 }
537               }                 
538         });
539
540         $("#graph_datetool .btn-slide").click(function(){
541                 $("#graph_widgetCalendar").stop().animate({
542                      height: state ? 0 :
543                        $('#graph_widgetCalendar div.datepicker').get(0).offsetHeight
544                   }, 500);
545                 state = !state;
546                 $(this).toggleClass("active");
547                 return false;
548         });
549         $("#graph_datetool .datechoice").click(function(){
550                 $("#graph_datetool .range a.btn-slide").html("YYYY/MM/DD - YYYY/MM/DD");
551                 $("#graph_widgetCalendar").slideUp("slow");
552                 $("#graph_datetool .datechoice").removeClass("selected");
553
554                 //start here will be in seconds
555                 displayinfo.start = time_windows[$(this).html()];
556                 displayinfo.end = '';
557                 $(this).addClass("selected");
558                 var cdate = new Date();
559                 update_graph_permalink(graphinfo.id, parseInt(cdate.getTime() - displayinfo.start*1000), "", "");
560                 maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: time_windows[$(this).html()], end: '', type: graphinfo.type});
561                 return false;
562         });
563         $('#graph_widgetCalendar').DatePicker({
564                 flat: true,
565                 format: 'Y/m/d',
566                 date: [new Date(), new Date()],
567                 calendars: 3,
568                 mode: 'range',
569                 starts: 1,
570                 onChange: function(formated) {
571                         var dates;
572                         dates = formated[0].split('/');
573                         var start = new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0);
574                         dates = formated[1].split('/');
575                         var end = new Date((new Date(dates[0], dates[1]-1, dates[2], 0, 0, 0)).getTime() + 86400000);
576                         displayinfo.start = start.toUTCString();
577                         displayinfo.end = end.toUTCString();
578                         update_graph_permalink(graphinfo.id, parseInt(start.getTime()), parseInt(end.getTime()), "");
579                         maingraph.ReconGraphRefresh({graphid: graphinfo.id, start: displayinfo.start, end: displayinfo.end, type: graphinfo.type});
580                         $('#graph_datetool .range a.btn-slide').get(0).innerHTML = formated.join(' - ');
581                 }
582         });
583         $(".graphType").change(function(){
584                 graphinfo.type = $(this).val();
585                 update_current_graph(true);
586         });
587         $("#gtool-error").click(function(){
588           $("#gtool-error").fadeOut("slow");
589         });
590         $(".addGuide").click(function() {
591           if(!locked){
592             gtool_add_guide();
593           }
594         });
595         $(".addComposite").click(function() {
596           if(!locked){
597             gtool_add_composite();
598           }
599         })
600
601         $("span.blankGraph").click(function() {
602
603           stop_streaming_graph();
604
605           // current graph is saved, so just give a new one.
606           if(graphinfo.saved) set_current_graph_id('');
607
608           // otherwise make sure the user wants to move on, and if so, give a new graph and orphan the unsaved one.
609           else if(graphinfo.saved!=undefined && graphinfo.saved==false) {
610             confirm("I will forget the current graph.  Are you sure?", function() {
611               set_current_graph_id('');
612             });
613           }
614
615           return false;
616         });
617
618         set_current_graph_id('');
619         maingraph = $('<div></div>').attr("id", "maingraph").ReconGraph({graphid: graphinfo.id, width: 780, height: 400});
620         $("#maingraphHolder").append(maingraph);
621 });
622 </script>
623
624 <div id="graph_datetool">
625         <div class="zoom">
626                 <dl>
627                         <dt>Zoom:</dt>
628                         <dd><a href="#" class="first datechoice">2d</a></dd>
629                         <dd><a href="#" class="datechoice">1w</a></dd>
630                         <dd><a href="#" class="selected datechoice">2w</a></dd>
631                         <dd><a href="#" class="datechoice">4w</a></dd>
632                         <dd><a href="#" class="datechoice">1y</a></dd>
633                 </dl>
634         </div>
635         <div class="range">
636                 <dl>
637                         <dt>Date Range:</dt>
638                         <dd><a href="" class="btn-slide">YYYY/MM/DD - YYYY/MM/DD</a></dd>
639                 </dl>
640         </div>
641 <br/>
642         <div id="graph_widgetCalendar" class="widgetCalendar"></div>
643 </div>
644                        
645 <!-- confirm box -->
646 <div id="confirm" style="display:none">
647         <a href="#" title="Close" class="modalCloseX modalClose">x</a>
648         <div class="header"><span>Confirm</span></div>
649         <p class="message"></p>
650         <div class="buttons">
651                 <div class="no modalClose">No</div><div class="yes">Yes</div>
652         </div>
653 </div>
654
655 <div>
656         <div id="maingraphHolder">
657         </div>
658         <div class='stream-log' style='display:none'></div>
659         <form action="#" name="form4" id="form4" style="margin:1em 0;text-align:center;">
660         <fieldset>
661         <legend style="display:none;">View</legend>
662         <label for="std_view"><input class="graphType" type="radio" name="graphtype" id="std_view" value="standard"/> Standard View</label> &nbsp;&nbsp;&nbsp;
663         </fieldset>
664         </form>
665        
666 </div>
667 <span class="graphStacks"></span>
668 <div><span class="editStacks">Add Stack Set</span></div>
669 <div style="float:right"><span class="addGuide">Add Guide</span></div>
670 <div style="float:right"><span class="addComposite">Add Composite</span></div>
671 <br style="clear:right" />
672 <div class="error"><p class="error" id="gtool-error"></p></div>
673 <table id="gtool">
674         <tr>
675                 <th></th>
676                
677                 <th class="data">Data Points</th>
678                 <th>Stacking</th>
679                 <th>Color</th>
680                 <th>Derivative</th>
681                 <th>Axis</th>
682                 <th></th>
683                 <th></th>
684         </tr>
685         <tbody id="dataPoints">
686         </tbody>
687 </table>
688
689 <div style="display:none">
690 <form id="hiddeneditor">
691         <table>
692         <tbody id="guideeditor">
693         <tr>           
694                 <td><input name="view" type="checkbox" value="1" /></td>
695                 <td class="data datatitle"></td>
696                 <td>&nbsp;</td>
697                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
698                 <td>&nbsp;</td>
699                 <td>&nbsp;</td>
700                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
701                 <td class="math">math</td>
702         </tr>
703         <tr class="mathbox">
704                 <td colspan="7">
705                 <div>
706                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
707                 </div>
708                 <div>
709                         <label for="math">Percentile</label> <input name="math2" type="text" value="" style="width:380px;" />
710                 </div>
711                 </td>
712         </tr>
713         </tbody>
714         <tbody id="compositeeditor">
715         <tr>           
716                 <td><input name="view" type="checkbox" value="1" /></td>
717                 <td class="data datatitle"></td>
718                 <td>&nbsp;</td>
719                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
720                 <td>&nbsp;</td>
721                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
722                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
723                 <td class="math">math</td>
724         </tr>
725         <tr class="mathbox">
726                 <td colspan="7">
727                 <div>
728                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
729                 </div>
730                 <div class="composite_function">
731                         <label for="math">Function</label> <input name="math2" type="text" value="" style="width:380px;" />
732                 </div>
733                 </td>
734         </tr>
735         </tbody>
736         <tbody id="datapointeditor">
737         <tr>
738                 <td><input name="view" type="checkbox" value="1"/></td>
739                 <td class="data datatitle combinable"></td>
740                 <td><select id="datastack" class="av_stacks"><option value='na'>select</option></select></td>
741                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
742                 <td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td>
743                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
744                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
745                 <td class="math">math</td>
746         </tr>
747         <tr class="mathbox">
748                 <td colspan="7">
749                 <div>
750                         <label for="math">Display Math</label> <input name="math1" type="text" value="" style="width:380px;" />
751                 </div>
752                 <div>   
753                         <label for="math">Source Math</label> <input name="math2" type="text" value="" style="width:380px;" />
754                 </div>
755                 </td>
756         </tr>
757         </tbody>
758         <tbody id="textdatapointeditor">
759         <tr>
760                 <td><input name="view" type="checkbox" value="1"/></td>
761                 <td class="data datatitle"></td>
762                 <td>&nbsp;</td>
763                 <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td>
764                 <td>&nbsp;</td>
765                 <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td>
766                 <td><a href="#" class="deletedatapoint"><span>delete</span></a></td>
767         </tr>
768         <tr class="mathbox">
769                 <td colspan="7">
770                 <div>
771                         <label for="math">Draw vertical lines</label> <input type="checkbox" name="lines" />
772                 </div>
773                 </td>
774         </tr>
775         </tbody>
776         </table>
777 </form>
778 </div>
779
780 <div id="payload">
781 </div>
Note: See TracBrowser for help on using the browser.