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

     1  
     2  $(document).ready(function(){
     3  	
     4  	
     5  	// === Prepare the chart data ===/
     6  	var sin = [], cos = [];
     7      for (var i = 0; i < 14; i += 0.5) {
     8          sin.push([i, Math.sin(i)]);
     9          cos.push([i, Math.cos(i)]);
    10      }
    11  	// === Prepare the chart data ===/
    12  	var sin = [], cos = [];
    13      for (var i = 0; i < 14; i += 0.5) {
    14          sin.push([i, Math.sin(i)]);
    15          cos.push([i, Math.cos(i)]);
    16      }
    17  
    18  	// === Make chart === //
    19      var plot = $.plot($(".chart"),
    20             [ { data: sin, label: "sin(x)", color: "#ee7951"}, { data: cos, label: "cos(x)",color: "#4fb9f0" } ], {
    21                 series: {
    22                     lines: { show: true },
    23                     points: { show: true }
    24                 },
    25                 grid: { hoverable: true, clickable: true },
    26                 yaxis: { min: -1.6, max: 1.6 }
    27  		   });
    28      
    29  	// === Point hover in chart === //
    30      var previousPoint = null;
    31      $(".chart").bind("plothover", function (event, pos, item) {
    32  		
    33          if (item) {
    34              if (previousPoint != item.dataIndex) {
    35                  previousPoint = item.dataIndex;
    36                  
    37                  $('#tooltip').fadeOut(200,function(){
    38  					$(this).remove();
    39  				});
    40                  var x = item.datapoint[0].toFixed(2),
    41  					y = item.datapoint[1].toFixed(2);
    42                      
    43                  maruti.flot_tooltip(item.pageX, item.pageY,item.series.label + " of " + x + " = " + y);
    44              }
    45              
    46          } else {
    47  			$('#tooltip').fadeOut(200,function(){
    48  					$(this).remove();
    49  				});
    50              previousPoint = null;           
    51          }   
    52      });	
    53      
    54  	
    55  	
    56      
    57      var data = [];
    58  	var series = Math.floor(Math.random()*10)+1;
    59  	for( var i = 0; i<series; i++)
    60  	{
    61  		data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 }
    62  	}
    63  	
    64      var pie = $.plot($(".pie"), data,{
    65          series: {
    66              pie: {
    67                  show: true,
    68                  radius: 3/4,
    69                  label: {
    70                      show: true,
    71                      radius: 3/4,
    72                      formatter: function(label, series){
    73                          return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
    74                      },
    75                      background: {
    76                          opacity: 0.5,
    77                          color: '#000'
    78                      }
    79                  },
    80                  innerRadius: 0.2
    81              },
    82  			legend: {
    83  				show: false
    84  			}
    85  		}
    86  	});	
    87      var d1 = [];
    88      for (var i = 0; i <= 10; i += 1) d1.push([i, parseInt(Math.random() * 30)]);
    89  
    90  	var data = new Array(); 
    91  	data.push({
    92  		data:d1,
    93          bars: {
    94              show: true, 
    95              barWidth: 0.4, 
    96              order: 1,
    97          }
    98      });    
    99  	
   100  	
   101      //Display graph
   102      var bar = $.plot($(".bars"), data, {
   103  		legend: true
   104  	});
   105  	
   106  });
   107  	
   108  
   109  maruti = {
   110  		// === Tooltip for flot charts === //
   111  		flot_tooltip: function(x, y, contents) {
   112  			
   113  			$('<div id="tooltip">' + contents + '</div>').css( {
   114  				top: y + 5,
   115  				left: x + 5
   116  			}).appendTo("body").fadeIn(200);
   117  		}
   118  }