[jqplot] - arupaka-_-arupakaの日記

postDrawHooksにプロット後の事後処理を登録しておく．

ズームされるごとにマウスオーバーイベントがよばれるため、

グラフが更新されてマウスオーバーイベントがうごかくなるのを避けることができる．

http://stackoverflow.com/questions/10426192/jqplot-how-to-change-opacity-or-z-index-of-canvasoverlay

<html>
<head>
<script src="js/jquery-1.11.1.js"></script>

<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />

<script>
jQuery( function() {
  	function change_from_Taro_to_Jiro(){
  	  $(".ABC").hover(
			function(){$("h1").html("<h1><font size=7> Jiro</font></h1>");},
			function(){$("h1").text("Taro");
		});
 
  	
  	}
  
    var plot2=jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ]
        ],
        {
            seriesDefaults: {
                color: '#7dffc7',
                showLine: false,
                markerOptions: {
                    size: 30
                },
                pointLabels: {
                    show: true,
                    location: 'n',
                    ypadding: -12,
                    escapeHTML: false
                }
            },
            highlighter: {
                show: true,
                showMarker: false,
                tooltipLocation: 'e',
                tooltipAxes: 'xy',
                formatString: 'x:%s, y:%s'
            },
             cursor:{
                show: true,
                zoom: true,
                //constrainZoomTo: 'none',
            }
            
        }
    );
    change_from_Taro_to_Jiro();
  
  $.jqplot.postDrawHooks.push(function(){alert("post draw");change_from_Taro_to_Jiro();})
  
  plot2.replot();	
});

 
</script>
</head>
<body>
<h1>Taro</h1>
<input type="button" value="test1" name="but1" class="b1">
<div class="ppp">
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
</div>
</body>
</html>

Permalink | コメント(0) | トラックバック(0) | 11:31

2014-08-08

jqplotでマウスイベント。データ点に触れたらデータラベルのアラート（ズーム後もでるようにする）

jqplot, jqplot, javascript

postDrawHooksにプロット後の事後処理を書いて、

マウスオーバーイベントをリロードする．

http://stackoverflow.com/questions/10426192/jqplot-how-to-change-opacity-or-z-index-of-canvasoverlay

<html>
<head>
<script src="js/jquery-1.11.1.js"></script>

<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />

<script>
jQuery( function() {
  	function change_from_Taro_to_Jiro(){
  	  $(".ABC").hover(
			function(){$("h1").html("<h1><font size=7> Jiro</font></h1>");},
			function(){$("h1").text("Taro");
		});
 
  	
  	}
  
    var plot2=jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ]
        ],
        {
            seriesDefaults: {
                color: '#7dffc7',
                showLine: false,
                markerOptions: {
                    size: 30
                },
                pointLabels: {
                    show: true,
                    location: 'n',
                    ypadding: -12,
                    escapeHTML: false
                }
            },
            highlighter: {
                show: true,
                showMarker: false,
                tooltipLocation: 'e',
                tooltipAxes: 'xy',
                formatString: 'x:%s, y:%s'
            },
             cursor:{
                show: true,
                zoom: true,
                //constrainZoomTo: 'none',
            }
            
        }
    );
    change_from_Taro_to_Jiro();
  
  $.jqplot.postDrawHooks.push(function(){alert("post draw");change_from_Taro_to_Jiro();})
  
  plot2.replot();	
});

 
</script>
</head>
<body>
<h1>Taro</h1>
<input type="button" value="test1" name="but1" class="b1">
<div class="ppp">
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
</div>
</body>
</html>

マウスクリックイベント方式：

<html>
<head>
<script src="js/jquery-1.11.1.js"></script>

<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />

<script>
jQuery( function() {
    var plot=jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ]
        ],
        {
            seriesDefaults: {
                color: '#7dffc7',
                showLine: false,
                markerOptions: {
                    size: 30
                },
                pointLabels: {
                    show: true,
                    location: 'n',
                    ypadding: -12,
                    escapeHTML: false
                }
            },
            highlighter: {
                show: true,
                showMarker: false,
                tooltipLocation: 'e',
                tooltipAxes: 'xy',
                formatString: 'x:%s, y:%s'
            },
             cursor:{
                show: true,
                zoom: true,
                //constrainZoomTo: 'none',
            }
            
        }
    );
    
 	
	
	function myMouseOverEvent(ev,gridpos,datapos,neighbor,plot)
    { 
  
  	  if(neighbor)
    	{
      		//var X = gridpos.x;
     		//var Y = gridpos.y;
     		   var data_label = neighbor.data[2]; 

    		alert(data_label);
      }
    
  }
  plot.eventListenerHooks.hooks.push(["jqplotMouseMove",myMouseOverEvent]);
  plot.replot();	
});

 
</script>
</head>
<body>
<h1>Taro</h1>
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>

</body>
</html>

強引法（mouseoverイベントをリロードするのがポイント）：


<html>
<head>
<script src="js/jquery-1.11.1.js"></script>

<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />

<script>
jQuery( function() {
    var plot=jQuery . jqplot(
        'jqPlot-sample',
        [
            [ [ 88, 65, '<span class="ABC">A</span>' ], [ 36, 22, '<span class="ABC">B</span>' ], [ 33, 54, '<span class="ABC">C</span>' ], [ 51, 63, '<span class="ABC">D</span>' ], [ 21, 91, '<span class="ABC">E</span>' ], [ 45, 79, '<span class="ABC">F</span>' ] ]
        ],
        {
            seriesDefaults: {
                color: '#7dffc7',
                showLine: false,
                markerOptions: {
                    size: 30
                },
                pointLabels: {
                    show: true,
                    location: 'n',
                    ypadding: -12,
                    escapeHTML: false
                }
            },
            highlighter: {
                show: true,
                showMarker: false,
                tooltipLocation: 'e',
                tooltipAxes: 'xy',
                formatString: 'x:%s, y:%s'
            },
             cursor:{
                show: true,
                zoom: true,
                //constrainZoomTo: 'none',
            }
            
        }
    );
    
 	 $(".ABC").hover(
			function(){$("h1").html("<h3>test1</h3>");},
			function(){$("h1").text("Taro");
	});
	
	$(".ppp").hover(
		function(){
		   $(".ABC").hover(
				function(){$("h1").html("<h3>test1</h3>");},
				function(){$("h1").text("Taro");
			});
	});
	
	
});

 
</script>
</head>
<body>
<h1>Taro</h1>
<input type="button" value="test1" name="but1" class="b1">
<div class="ppp">
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
</div>
</body>
</html>

Permalink | コメント(0) | トラックバック(0) | 23:03

2014-08-02

時系列の複数のグラフを同時に制御して同じ範囲をズームできるようにする。

javascript, jqplot

http://alphasis.info/2012/05/jquery-plugin-jqplot-cursor/を参考に

とりあえずCSVファイルを入力に

hisana_freq.csv

id,date,counts

1,2007-1-1,32

2,2007-1-2,42

3,2007-1-2,23

出来上がりはこんな感じ

スクリプト

<html>
<head>
<script language="javascript" type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>


<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.logAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.jqplot.min.css" />
<script>
$(document).ready(function(){
	
	 $("p#time").html("start");	
    
    var k=1;
   	 v2a=[];
	
	 
	 
	 $.get("hisanna_freq.csv", function(data){ 
	  
	  
		
		   $("p#time").html("reading -> split");		
		  html=data.split("\n");
     
	 	$("p#time").html("splited");
      
     	 for(var i in html){
      		
      			k=k+1;
		
      			 i2=html[i].split(",");
		   	
           		 if(k==2){
           		
     	 		 }else{
     	 		  
             		if(k<=3000){
             			
             			
             			
             			 
             			
             			 v2a.push([i2[1],Math.round(1000*i2[2])/1000]);
             			
             			 $("p#time").html(String(k));	
             		}
     	 		   /* $("table.test tbody tr td:last").addClass("graph");*/
     	 		   
     	 		 }
     	 		
     	 			         
      			   	     
     	 }
     	  $("p#time").html("END");	
	});
	
      $("input:button#test1").click(function(){	
	jQuery( function() {
		v2b=[];
		v2b.push(v2a);
		alert(v2a);
    	target1_plot=jQuery . jqplot(
        	'jqPlot-target1',
   			   	 v2b,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: false,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		   target2_plot=jQuery . jqplot(
        	'jqPlot-target2',
   			   	 v2b,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: false,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		
		
		
		  control_plot=jQuery . jqplot(
        	'jqPlot-control',
   			   	 v2b,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: true,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		 jQuery . jqplot . Cursor . zoomProxy( target1_plot, control_plot );
		 jQuery . jqplot . Cursor . zoomProxy( target2_plot, control_plot );
		})
	
	});
});

</script>

</head>
<body>
<input type="button" id="test1" value="test1" />
<p id="time"></p>
<li>メインプロット</li>
<div id="jqPlot-target1" style="height: 230px; width: 500px;"></div>
<div id="jqPlot-target2" style="height: 230px; width: 500px;"></div>
<li>制御プロット</li>
<div id="jqPlot-control" style="height: 100px; width: 500px;"></div>
</body>
</html>

ファイルから読み取り。

同期をdeferredオプジェクトを使う

getが非同期のため、順番を制御する必要がある．

<html>
<head>
<script language="javascript" type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>


<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/plugins/jqplot.logAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.jqplot.min.css" />
<script>
$(document).ready(function(){
	function read_from_file(file_name,col_1,col_2){
		var k=1;
	   	 var v2=new Array();
	
	 
	 
		var d=new $.Deferred 
		var test1=$.when(
		 
		 	$.get(file_name, function(data){ 		
		   		$("p#time").html("reading -> split");		
				  html=data.split("\n");
     
	 			$("p#time").html("splited");
      
     			for(var i in html){
      		
      				k=k+1;
		
    	  			 i2=html[i].split(",");
		   	
        	   		 if(k==2){
           		
     	 			 }else{
     	 		  
            		 		if(k<=3000){
             			
             			
             			
             			 
             			
             					 v2.push([i2[col_1],Math.round(1000*i2[col_2])/1000]);
             			
         		    			 $("p#time").html(String(k));	
             			}
     	 		   /* $("table.test tbody tr td:last").addClass("graph");*/
     	 		  
     	 		   
     	 			 }
     	 		} 
     	 	alert(v2);
     	 	alert(col_1+" "+col_2);
     		
     			
		})
		);
		
		test1.done(
			function(){
				alert("test");
				alert(v2);
				alert("test2");
				d.resolve();
			}
		);
		
		return [v2,d.promise()];
	};
		 $("p#time").html("start");
		 var v2a=[];
		 var v2a=read_from_file("hisanna_freq.csv",1,2)
		 v2a[1].done(function(){alert("test3");alert(v2a[0]);v2a=v2a[0];alert("test4");});
     	 $("p#time").html("END1");	
		
	 	 var v2b=read_from_file("hisanna_freq.csv",1,6);
	 	  v2b[1].done(function(){alert("test3");alert(v2b[0]);v2b=v2b[0];alert("test4");});
			 
 		
     	 $("p#time").html("END2");	
		
	
      $("input:button#test1").click(function(){	
	jQuery( function() {
		var v3a=[];
		v3a.push(v2a);
		var v3b=[];
		v3b.push(v2b);
		alert(v2a);
		alert(v2b);
		
    	target1_plot=jQuery . jqplot(
        	'jqPlot-target1',
   			   	 v3a,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: false,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		   target2_plot=jQuery . jqplot(
        	'jqPlot-target2',
   			   	 v3b,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: false,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		
		
		
		  control_plot=jQuery . jqplot(
        	'jqPlot-control',
   			   	 v3a,
       				 {
       				 animate: true,
         			axes:{
         		   
               			 xaxis:{
               		 			label: "日にち",
            	    		    renderer: jQuery . jqplot . DateAxisRenderer,
           	   		 	     tickOptions:{
                    			    formatString: '%D'
                			    },
            			  },
           		 		 yaxis: {
        					label: "件数",
              	 			renderer: $.jqplot.LogAxisRenderer 
 					
 						}
            		},	
     	 	   	 cursor:{
              		  		show: true,
               				 zoom: true,
               				 showTooltip: true,
               				 constrainZoomTo: 'x'
            		},
        	    	seriesDefaults: {
           	    		 markerOptions: {
                	    	show: false
               			 }
            		}
            		
            		
        		}
    		);
		
		
		 jQuery . jqplot . Cursor . zoomProxy( target1_plot, control_plot );
		 jQuery . jqplot . Cursor . zoomProxy( target2_plot, control_plot );
		})
	
	});
});

</script>

</head>
<body>
<input type="button" id="test1" value="test1" />
<p id="time"></p>
<li>メインプロット</li>
<div id="jqPlot-target1" style="height: 230px; width: 500px;"></div>
<div id="jqPlot-target2" style="height: 230px; width: 500px;"></div>
<li>制御プロット</li>
<div id="jqPlot-control" style="height: 100px; width: 500px;"></div>
</body>
</html>

これを参考にしたい．

http://alphasis.info/2012/03/jquery-plugin-jqplot-line_charts-canvasoverlay-horizontalline-name/

これをつかってなんとかする

http://blog.livedoor.jp/ukyoda/archives/5620358.html

Permalink | コメント(0) | トラックバック(0) | 01:01

		2019/02
日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28

arupaka-_-arupakaの日記

2014-08-11

jqplotでズーム(corsor)してもマウスクリックイベントが起動するようにする postDrawHooksで

2014-08-08

jqplotでマウスイベント。データ点に触れたらデータラベルのアラート（ズーム後もでるようにする）

2014-08-02

時系列の複数のグラフを同時に制御して同じ範囲をズームできるようにする。

arupaka-_-arupakaの日記

2014-08-11

jqplotでズーム(corsor)してもマウスクリックイベントが起動するようにする postDrawHooksで

2014-08-08

jqplotでマウスイベント。データ点に触れたらデータラベルのアラート （ズーム後もでるようにする）

2014-08-02

時系列の複数のグラフを同時に制御して同じ範囲をズームできるようにする。

jqplotでマウスイベント。データ点に触れたらデータラベルのアラート（ズーム後もでるようにする）