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> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <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"); <!-- $("div").append("<table>"); --> var k=1; v2a=[]; <!-- $.get("summary.txt", function(data){ --> <!-- $.get("summary2.txt", function(data){--> <!-- $.get("summary_sort200_b.txt", function(data){ --> $.get("hisanna_freq.csv", function(data){ <!-- $.get("data1.csv", function(data){ --> <!-- $.get("data.csv", function(data){ --> $("p#time").html("reading -> split"); html=data.split("\n"); $("p#time").html("splited"); <!-- $("div.file p").html(html[1]); --> for(var i in html){ k=k+1; i2=html[i].split(","); if(k==2){ }else{ if(k<=3000){ <!-- v2a.push([i2[2],Math.round(100*i2[4])/100,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']); --> <!-- v2b.push([Math.round(1000*i2[3])/1000,Math.round(100*i2[4])/100,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']);--> <!-- v2c.push([i2[2],Math.round(1000*i2[3])/1000,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']); --> <!-- v2a.push([i2[1],Math.round(100*i2[2])/100,'<a class="fig1" href="#line'+String(k)+'" link="fig/' + i2[0].replace(/"/g,'')+'.png\">' +i2[1]+'</a>']);--> <!-- v2a.push([i2[0],Math.round(1000*i2[2])/1000,'<a class="fig1" href="#line'+String(k)+'" link="fig/' + i2[0].replace(/"/g,'')+'.png\">' +i2[1]+'</a>']);--> v2a.push([i2[1],Math.round(1000*i2[2])/1000]); <!-- alert(k); --> $("p#time").html(String(k)); } /* $("table.test tbody tr td:last").addClass("graph");*/ } <!-- $("table.test tbody").append("</tr>");--> } $("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> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <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(); <!-- $.get("summary.txt", function(data){ --> <!-- $.get("summary2.txt", function(data){--> <!-- $.get("summary_sort200_b.txt", function(data){ --> 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"); <!-- $("div.file p").html(html[1]); --> for(var i in html){ k=k+1; i2=html[i].split(","); if(k==2){ }else{ if(k<=3000){ <!-- v2a.push([i2[2],Math.round(100*i2[4])/100,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']); --> <!-- v2b.push([Math.round(1000*i2[3])/1000,Math.round(100*i2[4])/100,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']);--> <!-- v2c.push([i2[2],Math.round(1000*i2[3])/1000,'<a class="fig1" href="#line'+String(k)+'">' +i2[1]+'</a>']); --> <!-- v2a.push([i2[1],Math.round(100*i2[2])/100,'<a class="fig1" href="#line'+String(k)+'" link="fig/' + i2[0].replace(/"/g,'')+'.png\">' +i2[1]+'</a>']);--> <!-- v2a.push([i2[0],Math.round(1000*i2[2])/1000,'<a class="fig1" href="#line'+String(k)+'" link="fig/' + i2[0].replace(/"/g,'')+'.png\">' +i2[1]+'</a>']);--> v2.push([i2[col_1],Math.round(1000*i2[col_2])/1000]); <!-- alert(k); --> $("p#time").html(String(k)); } /* $("table.test tbody tr td:last").addClass("graph");*/ } } alert(v2); alert(col_1+" "+col_2); <!-- return v2;--> }) ); 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
