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);
}