dak ブログ

python、rubyなどのプログラミング、MySQL、サーバーの設定などの備忘録。レゴの写真も。

javascriptでグラフ描画

2012-05-15 23:52:31 | javascript
javascriptでグラフを描画する方法です。
jQueryベースのflotを使います。 描画したいデータの [x, y] のデータ列を data: に指定すれば、グラフを描画してくれます。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>折れ線グラフ</title>
<script type="text/javascript" src="flot/jquery.js"></script>
<script type="text/javascript" src="flot/jquery.flot.js"></script>
</head>
<body>
折れ線グラフ
<div id="graph" style="width:600px;height:300px"></div>
<script type="text/javascript">
$(function () {
var data1 = [[0, 3], [4, 8], [8, 5], [10, 13]];
var data2 = [[0, 0], [10, 20]];

$.plot($("#graph"),
[
{
data: data1,
label: "line1",
lines: { show: true },
points: { show: true },
},
{
data: data2,
label: "line2",
lines: { show: true },
},
]);
});
</script>
</body>
</html>