ソース

javascript

$(function(){
    // 線グラフ(1本)
        Morris.Line({
                  element: 'single',//描画対象のID
                  data: [
                    {targetX: '2012', targetY: 100},
                    {targetX: '2011', targetY: 75},
                    {targetX: '2010', targetY: 50},
                    {targetX: '2009', targetY: 75},
                    {targetX: '2008', targetY: 50},
                    {targetX: '2007', targetY: 75},
                    {targetX: '2006', targetY: 100}
                  ], //描画用データ
                  xkey: 'targetX',     //X軸の指定
                  ykeys: ['targetY'],  //Y軸の指定(カンマ区切りで複数設定可能)
                  labels: ['ラベル'], //プロットのラベル
                  lineWidth : 2, //線の太さ(ピクセル単位)
                  pointSize : 2, //ポイントの大きさ(ピクセル単位)
                  lineColors : ['#ff0000'], //線の色(カンマ区切りで複数設定可能)
              ymax : 150, //Y軸の最大値
              ymin : 30, //Y軸の最小値
              smooth : true, //ラインを滑らかにする
              hideHover : true, //プロットにホバーしたときにツールチップを表示させる>ようにするか
        });

        // 線グラフ(2本)
        Morris.Line({
                  element: 'dubble',//描画対象のID
                  data: [
                    {targetX: '2012', targetY1: 100, targetY2: 80},
                    {targetX: '2011', targetY1: 75,  targetY2: 90},
                    {targetX: '2010', targetY1: 50,  targetY2: 100},
                    {targetX: '2009', targetY1: 75,  targetY2: 60},
                    {targetX: '2008', targetY1: 50,  targetY2: 40},
                    {targetX: '2007', targetY1: 75,  targetY2: 70},
                    {targetX: '2006', targetY1: 100, targetY2: 90}
                  ], //描画用データ
                  xkey: 'targetX',     //X軸の指定
                  ykeys: ['targetY1','targetY2'],  //Y軸の指定(カンマ区切りで複数設定可能)
                  labels: ['赤い方','緑の方'], //プロットのラベル
                  lineWidth : 2, //線の太さ(ピクセル単位)
                  pointSize : 2, //ポイントの大きさ(ピクセル単位)
                  lineColors : ['#ff0000','#00ff00'], //線の色(カンマ区切りで複数設定可能)
              ymax : 150, //Y軸の最大値
              ymin : 30, //Y軸の最小値
              smooth : true, //ラインを滑らかにする
              hideHover : true, //プロットにホバーしたときにツールチップを表示させる>ようにするか
        });
});

HTML

<h4 class="index">線グラフ(1本)</h4>
<div id="single">
</div>

<h4 class="index">線グラフ(2本)</h4>
<div id="dubble">
</div>

参考にしたサイトなど

• Morris.js