株価 「日経平均とダウ平均」 推移(jQuery jqPlot  複数(折れ線)グラフ サンプル) : jqPlot 複数Y軸 サンプル

月末の終値をグラフにしただけ  (2014 や 2015  ,2016・・は,どうなる?) 


/////
株価 「日経平均とダウ平均」 推移(jQuery jqPlot  複数(折れ線)グラフ サンプル)


<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta  content="width=device-width, initial-scale=1.0" name="viewport">
<title>
:
jqPlot 複数Y軸 サンプル </title>
<!--[if lt IE 9]>
<link          rel="stylesheet" type="text/css" href="/lab/css/ie.css"/><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link  href="/lab/css/bootstrap.css" type="text/css" rel="stylesheet"><link  href="/lab/css/bootstrap-responsive.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link  href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>


<hr>
<div  class="container">
<hr>

<p>月末の終値をグラフにしただけ  (2014 や 2015 &nbsp;,2016・・は,どうなる?)&nbsp;</p>
<div  id="chart10"></div>



<script type="text/javascript">
$(document).ready(function(){
  data10_1 = [11138.66,11559.36,12397.91,13860.86,13774.54]
  data10_2 = [13860.58,14054.49,14578.54,14839.80,15115.57]

  $option = {
    legend: { show:true},
    title: '日経平均とダウ平均の相関',
    series:[
      { label: '日経平均', yaxis: 'yaxis'},
      { label: 'ダウ平均', yaxis: 'y2axis'},
    ],

    axes:{
      xaxis:{
//        renderer: $.jqplot.DateAxisRenderer,
        label: '2013年',
//        tickInterval: '1',
//        min: '2013-01-01',                 // 軸開始の値
//        max: '2013-05-01',                 // 軸終了の値
//      ticks: xticks,
//      ticks: 1,
//        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      yaxis:{
        label: '日経平均',
//        min: 0,
//        max: 13000,
        autoscale: true,
//      ticks:yticks,
        tickOptions: {formatString:'%d'},
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      y2axis:{
        label: 'ダウ平均',
        autoscale: true,
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
    }




  }
  plot10 = $.jqplot ( 'chart10', [data10_1,data10_2], $option);

  window.onresize = function(event) {
    plot10.replot();
  }
});
</script>



</div>
<hr>


<div  id="ads" class="container">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div> 
///// 
「jqPlot」 カスタマイズ

折れ線グラフ 2つ(別々)

2つ折れ線のグラフ

2つ折れ線のグラフ(ポップつき)
///// 
折れ線だけでない「棒グラフ(縦・横)」もある
///// 

http://alphasis.info/jquery-plugins/jqplot/vertical-bar-charts/


縦棒グラフ
jQuery の jqPlot プラグインで作る縦棒グラフ。
jQuery の jqPlot プラグインで作るシンプルな縦棒グラフ
jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。
jQuery の jqPlot プラグインで作る複数系列の縦棒グラフ
jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。複数の系列データの配列を用意すれば、複数系列の縦棒グラフも描ける。
jQuery の jqPlot で作る外側右の凡例付き複数系列の縦棒グラフ
jQueryのjqPlotプラグインで作る複数系列の縦棒グラフにおいて、グラフの外側の右中央に凡例を表示する方法。
jQuery の jqPlot で作る内側上の横並び凡例付き縦棒グラフ
jQueryのjqPlotプラグインで作る複数系列の縦棒グラフにおいて、グラフの内側の上中央に、系列ラベルを横に並べた凡例を表示する方法。
jQuery の jqPlot プラグインで作る積み上げ縦棒グラフ
jQueryのjqPlotプラグインで作る積み上げ縦棒グラフを作る方法。stackSeriesオプションで、積み上げグラフにするか指定できる。「true」にすると積み上げグラフになる。
jQuery の jqPlot プラグインで作る縦棒グラフの系列の色を変更
jQueryのjqPlotプラグインで作る縦棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。
jQuery の jqPlot で作る積み上げ縦棒グラフの系列の色を変更
jQueryのjqPlotプラグインで作る積み上げ縦棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。
jQuery の jqPlot プラグインで作る科目別得点推移の縦棒グラフ
jQueryのjqPlotプラグインで、科目別得点推移の縦棒グラフを描くチュートリアル。
jQuery の jqPlot で作る科目別得点推移の積み上げ縦棒グラフ
jQueryのjqPlotプラグインで、科目別得点推移の積み上げ縦棒グラフを描くチュートリアル。
jQuery の jqPlot プラグインで作るデータポイントラベル付き縦棒グラフ
jQueryのjqPlotプラグインで、データポイントラベル付き縦棒グラフを描く方法。
jQuery の jqPlot の縦棒グラフで、値が0のデータポイントラベルを非表示に
jQueryのjqPlotプラグインによる、データポイントラベル付き縦棒グラフにおいて、値が「0」のデータポイントラベルを表示させない方法。
jQuery の jqPlot の縦棒グラフでポイントラベルをグリッド境界の外に表示
jQueryのjqPlotプラグインによる、データポイントラベル付き縦棒グラフにおいて、データポイントラベルを、グリッドの境界からはみだしても表示させる方法。
jQuery の jqPlot プラグインで作る負の値を含む縦棒グラフ
jQueryのjqPlotプラグインで、負の値(マイナスの値)を含む縦棒グラフを作る方法。
jQuery の jqPlot で作る縦棒グラフの棒の幅や影などをカスタマイズ
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒の幅や影などをカスタマイズする方法。
jQuery の jqPlot の縦棒グラフでマウスダウンイベント時ハイライト表示
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒(バー)にカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示(強調表示)させる方法。
jQuery の jqPlot の縦棒グラフのハイライト表示色を指定
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒(バー)にカーソルを合わせたときの、棒の棒(バー)のハイライト表示色(強調表示色)を指定する方法。
jQuery の jqPlot の縦棒グラフのハイライト表示色を配列で指定
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒(バー)にカーソルを合わせたときの、棒のハイライト表示色(強調表示色)を、配列で順番に指定する方法。
jQuery の jqPlot の縦棒グラフの棒をいくつかのグループに分類
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、棒(バー)をいくつかのグループに分類する方法。
jQuery の jqPlot の縦棒グラフにおいて、カテゴリごとに棒の色を変更
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、カテゴリごとに棒(バー)の色を変える方法。
jQuery の jqPlot の縦棒グラフにおいて、カテゴリごとに棒の色を指定
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、カテゴリごとに棒(バー)の色を指定する方法。
jQuery の jqPlot の縦棒グラフにおいて、目盛りラベルの角度を調整
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、目盛りラベルの角度を調整する方法。
jQuery の jqPlot プラグインで作る、折れ線と縦棒を併用したグラフ
jQueryのjqPlotプラグインで、折れ線グラフと縦棒グラフを、ひとつのグラフの中で、同時に出現させる方法。
jQuery の jqPlot で作る縦棒グラフの縦棒をアニメーションで出現
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、縦棒をアニメーションで出現させる方法。
jQuery の jqPlot の縦棒グラフの縦棒とポイントラベルをアニメーションで出現
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、縦棒とデータポイントラベルを、アニメーションで出現させる方法。
jQuery の jqPlot プラグインで作るトレンドライン付き縦棒グラフ
jQueryのjqPlotプラグインで作る縦棒グラフに、トレンドラインを描き加える方法。
jQuery の jqPlot プラグインで作る色指定したトレンドライン付き縦棒グラフ
jQueryのjqPlotプラグインで作る縦棒グラフに、色を指定したトレンドラインを描き加える方法。
jQuery の jqPlot で作る、ドラッグでY軸方向だけ伸縮できる縦棒グラフ
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、ドラッグで、縦棒を、Y軸(縦)方向だけ、伸縮できるようにする方法。
jQuery の jqPlot で作るツールチップ風ハイライト表示付き縦棒グラフ
jQueryのjqPlotプラグインで、ツールチップ風ハイライト表示付き縦棒グラフを描く方法。
jQuery の jqPlot で作る縦棒グラフの系列の表示/非表示切替
jQueryのjqPlotプラグインで作る複数系列の凡例付き縦棒グラフにおいて、凡例内の系列ラベル名をクリックすることで、各系列の表示/非表示を切り替える方法。
jQuery の jqPlot で作る縦棒グラフの系列の表示/非表示切替を無効に
jQueryのjqPlotプラグインで作る複数系列の凡例付き縦棒グラフにおいて、凡例内の系列ラベル名をクリックすることによる系列の表示/非表示切替を無効にする方法。
jQuery の jqPlot で作る縦棒グラフの系列をフェードイン/フェードアウト
jQueryのjqPlotプラグインで作る複数系列の凡例付き縦棒グラフにおいて、凡例内の系列ラベル名をクリックすると、遅めのフェードイン/フェードアウトで、各系列の表示/非表示を切り替える方法。
jQuery UI と jqPlot で作るサイズを変更できる縦棒グラフ
jQueryのjqPlotプラグインで作る複数系列の凡例付き縦棒グラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
jQuery の jqPlot プラグインで作るY軸だけズームできる縦棒グラフ
jQueryのjqPlotプラグインで作る縦棒グラフにおいて、マウスカーソル(マウスポインタ)で選択した範囲のY軸だけ、ズーム(拡大)できるようにする方法。

/////
http://alphasis.info/jquery-plugins/jqplot/horizontal-bar-charts/

横棒グラフ
jQuery の jqPlot プラグインで作る横棒グラフ。
jQuery の jqPlot プラグインで作るシンプルな横棒グラフ
jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使い、「barDirection」オプションに「horizontal」を指定すれば、横棒グラフを描くことができる。
jQuery の jqPlot プラグインで作る複数系列の横棒グラフ
jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、横棒グラフを描くことができる。複数の系列データの配列を用意すれば、複数系列の横棒グラフも描ける。
jQuery の jqPlot プラグインで作る積み上げ横棒グラフ
jQueryのjqPlotプラグインで作る積み上げ横棒グラフを作る方法。stackSeriesオプションで、積み上げグラフにするか指定できる。「true」にすると積み上げグラフになる。
jQuery の jqPlot プラグインで作る横棒グラフの系列の色を変更
jQueryのjqPlotプラグインで作る横棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。
jQuery の jqPlot で作る積み上げ横棒グラフの系列の色を変更
jQueryのjqPlotプラグインで作る積み上げ横棒グラフの系列の色を変更する方法。seriesオプション内の、colorプロパティで、系列の色を、系列ごとに指定することができる。
jQuery の jqPlot プラグインで作るデータポイントラベル付き横棒グラフ
jQueryのjqPlotプラグインで、データポイントラベル付き横棒グラフを描く方法。
jQuery の jqPlot プラグインで作る負の値を含む横棒グラフ
jQueryのjqPlotプラグインで、負の値(マイナスの値)を含む横棒グラフを作る方法。
jQuery の jqPlot で作る横棒グラフの棒の幅や影などをカスタマイズ
jQueryのjqPlotプラグインで作る横棒グラフにおいて、棒の幅や影などをカスタマイズする方法。
jQuery の jqPlot プラグインで作る水平グリッド線が非表示の横棒グラフ
jQueryのjqPlotプラグインで、水平グリッド線(Y軸の目盛りのグリッド線)が非表示の横棒グラフを作る方法。
jQuery の jqPlot の横棒グラフでマウスダウンイベント時ハイライト表示
jQueryのjqPlotプラグインで作る横棒グラフにおいて、棒(バー)にカーソルを合わせ、マウスのボタンを押し続けている間、ハイライト表示(強調表示)させる方法。
jQuery の jqPlot の横棒グラフのハイライト表示色を指定
jQueryのjqPlotプラグインで作る横棒グラフにおいて、棒(バー)にカーソルを合わせたときの、棒のハイライト表示色(強調表示色)を指定する方法。
jQuery の jqPlot の横棒グラフのハイライト表示色を配列で指定
jQueryのjqPlotプラグインで作る横棒グラフにおいて、棒(バー)にカーソルを合わせたときの、棒のハイライト表示色(強調表示色)を、配列で順番に指定する方法。
jQuery の jqPlot の横棒グラフの棒をいくつかのグループに分類
jQueryのjqPlotプラグインで作る横棒グラフにおいて、棒(バー)をいくつかのグループに分類する方法。
jQuery の jqPlot の横棒グラフにおいて、カテゴリごとに棒の色を変更
jQueryのjqPlotプラグインで作る横棒グラフにおいて、カテゴリごとに棒(バー)の色を変える方法。
jQuery の jqPlot の横棒グラフにおいて、カテゴリごとに棒の色を指定
jQueryのjqPlotプラグインで作る横棒グラフにおいて、カテゴリごとに棒(バー)の色を指定する方法。
jQuery の jqPlot の横棒グラフに垂直の実線を描き加える
jQueryのjqPlotプラグインで作る横棒グラフにおいて、指定したXの値に、垂直の実線を描き加える方法。
jQuery の jqPlot の横棒グラフに垂直の破線を描き加える
jQueryのjqPlotプラグインで作る横棒グラフにおいて、指定したXの値に、垂直の破線を描き加える方法。
jQuery の jqPlot で作る、ドラッグでX軸方向だけ伸縮できる横棒グラフ
jQueryのjqPlotプラグインで作る横棒グラフにおいて、ドラッグで、横棒を、X軸(横)方向だけ、伸縮できるようにする方法。
jQuery の jqPlot で作るツールチップ風ハイライト表示付き横棒グラフ
jQueryのjqPlotプラグインで、ツールチップ風ハイライト表示付き横棒グラフを描く方法。
/////