jqplotでマウスイベントで実行する処理をカスタマイズする方法が日本語ページを探しても
見つからなかった（探し方が下手なだけかも知れないが・・・）ので、
備忘録としてめったに更新しないブログを更新する。

jqplotでは hilighterとかcursorとかでマウスイベントを実装できます。

参考リンク：本家様のサンプルプログラム
  http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html 

基本的にはjqplotで提供されているマウスクリックだけで事足りるんですが、
場合によっては自分でクリックイベントを自作したい！！となることがあったりします。

jqplotでは$.jqplot.eventListenerHooksを使うことで
自分で好きなクリックイベントを実装することが出来ます。  

手順はjQplotでグラフの描画が出来ればとても簡単。下記の流れで実装すればいいだけ
0．【前準備】実行したい関数を作成する
    ＜定型文＞
    function function_name(ev, gridpos, datapos, neighbor, plot)
    {
        if(neighbor)
        {
            /**** 処理を記述 ****/
        }
    }

   関数内のneighborにはクリックした部分がグラフのデータだった場合に
　オブジェクトが入ります。あまり詳しくはわかっていないですが、
　「neighbor.data」にクリックしたデータの詳細が入ります。

1．jqplotで何かしらグラフを書いて変数で管理する
    var plot = $.jqplot(・・・)という感じで書けばＯＫ。

2．plot.eventListenerHooks.hooks.push( [ 'マウスイベントの種類' , '手順0で作成した関数' ] )
     を呼び出す

3．plot.replot()を呼び出して再描画する


以下、サンプルです。即興で作成しているのでたいしたことしていないです。

  <head>
    <meta charset="UTF-8">
    <title>jqplotクリックいべんとを実装しよう！！</title>
    <link rel="stylesheet" href="../dist/jquery.jqplot.css">
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../dist/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="../dist/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.jqplot.js"></script>
    <script type="text/javascript" src="../dist/plugins/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="../dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="../dist/plugins/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript">
    <!--

    //イベントで呼び出す関数
    function myClkEvent(ev, gridpos, datapos, neighbor, plot) 
    {
        if(neighbor) //←クリックした座標がデータ点だった場合に処理を実行
        {
            var X = neighbor.data[0];            //データのラベル番号(１から)
            var Y = neighbor.data[1];            //データの値
            var Index = neighbor.seriesIndex;    //seriesのインデックス
            alert(labelData[Index]+"の"+plotData[Index][X-1][0]+"の点数は"+Y+"点です");
            test =  neighbor;
        }
    }

    //描画するデータ
    var plotData = [
                    [ [ '国語', 45 ], [ '算数', 92 ], [ '理科', 95 ], [ '社会', 43 ], [ '英語', 75 ] ],
                    [ ['国語',80],['算数',40],['理科',54],['社会',90],['英語',100]]];
    //ラベルデータ
    var labelData = ['Aくん','Bくん'];

    var plot = "";//グラフ情報を記憶する配列
    var test = null;
    $(function(){

        //棒グラフを描画してbar_plotにオブジェクト代入
        plot = $.jqplot("test1",plotData,{
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            legend:{
                show:true,
                labels:labelData,
                placement:'outside'
           },
           seriesColors:['blue','green'],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                }
            }
        });

        /**
         * マウスイベント追加
         * pushの引数は["イベントオプション","実行する関数"]の形式の配列にする。
         * イベントのオプションは下記のものがある。
         *     jqplotMouseMove    マウスがグラフ上に乗ったときに発生するイベント
         *     jqplotMouseDown    マウスを押したときに発生するイベント
         *     jqplotMouseUp    押したマウスを放したときに発生するイベント
         *     jqplotClick        クリックしたときに発生するイベント
         *     jqplotRightClick    右クリックイベント
         * ほかもあるかも知れない・・・
         */
         plot.eventListenerHooks.hooks.push(["jqplotClick",myClkEvent]);
         //グラフを再描画してイベントを反映（これをやらないと動きません。）
         plot.replot();

    });


    //-->
    </script>
  </head>
  <body>
    <div id="test1" style="width:600px;height:300px;"></div>
  </body>



実行サンプル
clickevent1


clickevent2


と、ここまで書いて本家サイトにbindで実装する方法が書かれていたOTL
調査不足恥ずかしいｗｗｗ 

bindで実装する方法はこちらにあります。（本家なのでもちろん英語）
http://www.jqplot.com/deploy/dist/examples/barTest.html#