@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQuery UIとjqPlotでグラフを重ねて比較してみる

こんなん出来るの?って聞かれたので、やってみた。
グラフを重ねて、山とか谷とかのパターンを視覚的に比較できないですかね?と。やってみればいいじゃないか。
使ったものは、jQuery UIのDraggableと、jqPlotの折れ線グラフです。CSSで透かして上げることで重ねて比較することが出来ました。

HTMLは次の通りです。2つぶんのチャートをプロットするDIV要素を用意しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jqplotを重ねてみよう</title>
    <link rel="stylesheet" href="css/jquery-ui-1.9.1.custom.css"></link>
    <link rel="stylesheet" href="css/filterchart.css"></link>
  </head>
  <body>
    <div id="content">
      <div id="canvas">
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
    <script type="text/javascript" src="js/jquery.jqplot.js"></script>
    <script type="text/javascript" src="js/filterchart.js"></script>
  </body>
</html>

JavaScriptは次の通りです。2つのチャートを作って、それぞれドラッグ出来るように設定するだけです。

;(function() {
	$(function() {
		$.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]], {seriesColors: ['#5D639E']});
		$.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {seriesColors: ['#C7243A']});
		$('.chart').draggable({containment: '#canvas'});
	});
})();

最後にCSSです。チャートに四体して、opacityとfilterを設定して透過しています。この辺りの値を変更すれば、どれくらいの透過度が良いかは判断出来るのではないかなと思います。

#canvas {
	width: 800px;
	height: 600px;
	border: solid 1px #333;
}
.chart {
	width: 300px;
	height: 200px;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

簡単でしたね。後はチャートに流しこむデータさえなんとか出来れば、2つのグラフの凹凸具合を目で比較することが出来るようになるのではないでしょうか。
本当はリサイズも出来ればいいなぁとは思ったのですが、今回はこんな程度で。