github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/root/js/matrix.dashboard.js (about)

     1  
     2  $(document).ready(function(){
     3  	
     4  	
     5  	
     6  	// === Prepare peity charts === //
     7  	maruti.peity();
     8  	
     9  	// === Prepare the chart data ===/
    10  	var sin = [], cos = [];
    11      for (var i = 0; i < 12; i += 0.9) {
    12          sin.push([i, Math.sin(i)]);
    13          cos.push([i, Math.cos(i)]);
    14      }
    15  
    16  	// === Make chart === //
    17      var plot = $.plot($(".chart"),
    18             [ { data: sin, label: "访问次数", color: "#ee7951"}, { data: cos, label: "活跃人数",color: "#4fb9f0" } ], {
    19                 series: {
    20                     lines: { show: true },
    21                     points: { show: true }
    22                 },
    23                 grid: { hoverable: true, clickable: true },
    24                 yaxis: { min: -1.6, max: 1.6 }
    25  		   });
    26      
    27  	// === Point hover in chart === //
    28      var previousPoint = null;
    29      $(".chart").bind("plothover", function (event, pos, item) {
    30  		
    31          if (item) {
    32              if (previousPoint != item.dataIndex) {
    33                  previousPoint = item.dataIndex;
    34                  
    35                  $('#tooltip').fadeOut(200,function(){
    36  					$(this).remove();
    37  				});
    38                  var x = item.datapoint[0].toFixed(2),
    39  					y = item.datapoint[1].toFixed(2);
    40                      
    41                  maruti.flot_tooltip(item.pageX, item.pageY,item.series.label + " of " + x + " = " + y);
    42              }
    43              
    44          } else {
    45  			$('#tooltip').fadeOut(200,function(){
    46  					$(this).remove();
    47  				});
    48              previousPoint = null;           
    49          }   
    50      });	
    51      
    52  	
    53  	
    54  	
    55      // === Calendar === //    
    56      var date = new Date();
    57  	var d = date.getDate();
    58  	var m = date.getMonth();
    59  	var y = date.getFullYear();
    60  	
    61  	$('.calendar').fullCalendar({
    62  		header: {
    63  			left: 'prev,next',
    64  			center: 'title',
    65  			right: 'month,basicWeek,basicDay'
    66  		},
    67  		editable: true,
    68  		events: [
    69  			{
    70  				title: 'All day event',
    71  				start: new Date(y, m, 1)
    72  			},
    73  			{
    74  				title: 'Long event',
    75  				start: new Date(y, m, 5),
    76  				end: new Date(y, m, 8)
    77  			},
    78  			{
    79  				id: 999,
    80  				title: 'Repeating event',
    81  				start: new Date(y, m, 2, 16, 0),
    82  				end: new Date(y, m, 3, 18, 0),
    83  				allDay: false
    84  			},
    85  			{
    86  				id: 999,
    87  				title: 'Repeating event',
    88  				start: new Date(y, m, 9, 16, 0),
    89  				end: new Date(y, m, 10, 18, 0),
    90  				allDay: false
    91  			},
    92  			{
    93  				title: 'Lunch',
    94  				start: new Date(y, m, 14, 12, 0),
    95  				end: new Date(y, m, 15, 14, 0),
    96  				allDay: false
    97  			},
    98  			{
    99  				title: 'Birthday PARTY',
   100  				start: new Date(y, m, 18),
   101  				end: new Date(y, m, 20),
   102  				allDay: false
   103  			},
   104  			{
   105  				title: 'Click for Google',
   106  				start: new Date(y, m, 27),
   107  				end: new Date(y, m, 29),
   108  				url: 'http://www.google.com'
   109  			}
   110  		]
   111  	});
   112  });
   113  
   114  
   115  maruti = {
   116  		// === Peity charts === //
   117  		peity: function(){		
   118  			$.fn.peity.defaults.line = {
   119  				strokeWidth: 1,
   120  				delimeter: ",",
   121  				height: 24,
   122  				max: null,
   123  				min: 0,
   124  				width: 50
   125  			};
   126  			$.fn.peity.defaults.bar = {
   127  				delimeter: ",",
   128  				height: 24,
   129  				max: null,
   130  				min: 0,
   131  				width: 50
   132  			};
   133  			$(".peity_line_good span").peity("line", {
   134  				colour: "#57a532",
   135  				strokeColour: "#459D1C"
   136  			});
   137  			$(".peity_line_bad span").peity("line", {
   138  				colour: "#FFC4C7",
   139  				strokeColour: "#BA1E20"
   140  			});	
   141  			$(".peity_line_neutral span").peity("line", {
   142  				colour: "#CCCCCC",
   143  				strokeColour: "#757575"
   144  			});
   145  			$(".peity_bar_good span").peity("bar", {
   146  				colour: "#459D1C"
   147  			});
   148  			$(".peity_bar_bad span").peity("bar", {
   149  				colour: "#BA1E20"
   150  			});	
   151  			$(".peity_bar_neutral span").peity("bar", {
   152  				colour: "#4fb9f0"
   153  			});
   154  		},
   155  
   156  		// === Tooltip for flot charts === //
   157  		flot_tooltip: function(x, y, contents) {
   158  			
   159  			$('<div id="tooltip">' + contents + '</div>').css( {
   160  				top: y + 5,
   161  				left: x + 5
   162  			}).appendTo("body").fadeIn(200);
   163  		}
   164  }