root/ui/web/htdocs/graph_panel.inc

Revision 41084bbae99e8a58d8b91f24d116e38ac3f7dd2a, 22.5 kB (checked in by Umar Farooq <umar@omniti.com>, 9 years ago)

styling so the graph titles look correct, fixes #146

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