php - 複数のy軸を持つSQL Server dbを使用したフロットチャート

Question

これは私の最初の投稿です。私が質問した場合、多くの人が既に質問したことをお詫びします。必要な答えが他の投稿に表示されません。

私は Flot Charts を使用しており、SQL Server db を持っています。db に接続し、sql 内のすべての値を配列で返す php ファイルを持っています。

<?php

$server =  "XXXX";
$database = "XXXX";
$user = "ReportsUser";
$pwd = "ReportsUser";
$cnn = odbc_connect("Driver={SQL Server Native Client     10.0};Server=$server;Database=$database;", $user, $pwd);

if(!$cnn)
{
  echo "error in connecting";
}

$sql = odbc_exec($cnn, "
            SELECT Months
        ,Referrals
            ,ProjectedVol
        FROM mis.ReferralsBudgetvsActual
        WHERE Months <= MONTH(GETDATE())
    ");

while($result = odbc_fetch_array($sql))
{
   $allreferrals[] = array($result['Months'],$result['Referrals'],$result['ProjectedVol']);
}
echo json_encode(($allreferrals), JSON_NUMERIC_CHECK);
exit;

?>

これはうまく機能し、以下のような配列を生成します

[[1,5981,7465],[2,5473,6962],[3,4974,7391],[4,5731,6985],[5,5891,7080],[6,5168,7136],[7,5551,7543],[8,4427,7242],[9,4617,7204],[10,4807,7642]]

すべてが jquery ファイルにまとめられると、ここで行き詰まります。最初のデータ列から離れて他の列を引き戻す場所がわかりません。これを行うにはどうすればよいですか?

// document ready function
$(document).ready(function() {  

        var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];

        // function for refreshing shiftstats chart  
        make_chart();
        function make_chart() {

            $.ajax({
                cache: 'false',
                type: 'GET',
                dataType: 'json',
                url: "test.php",
                success: function(data) {

                var d1 = data;
                var d2 = data;                    

                //define placeholder class
                var placeholder = $(".shifts-chart");
                //graph options
                var options = {
                        grid: {
                            show: true,
                            aboveData: true,
                            color: "#3f3f3f" ,
                            labelMargin: 5,
                            axisMargin: 0, 
                            borderWidth: 0,
                            borderColor:null,
                            minBorderMargin: 5 ,
                            clickable: true, 
                            hoverable: true,
                            autoHighlight: true,
                            mouseActiveRadius: 20
                        },
                        series: {
                            grow: {
                                active: false,
                                stepMode: "linear",
                                steps: 50,
                                stepDelay: true
                            },
                            lines: {
                                show: true,
                                fill: false,
                                lineWidth: 4,
                                steps: false
                                },
                            points: {
                                show:true,
                                radius: 5,
                                symbol: "circle",
                                fill: true,
                                borderColor: "#fff"
                            }
                        },
                        legend: { 
                            position: "ne", 
                            margin: [0,-25], 
                            noColumns: 0,
                            labelBoxBorderColor: null,
                            labelFormatter: function(label, series) {
                                // just add some space to labes
                                return label+'  ';
                             }
                        },
                        yaxis: { min: 0 },
                        xaxis: {ticks:11, tickDecimals: 0},
                        colors: chartColours,
                        shadowSize:1,
                        tooltip: true, //activate tooltip
                        tooltipOpts: {
                            content: "%s : %y.0",
                            shifts: {
                                x: -30,
                                y: -50
                            }
                        }
                    };   
                    $.plot(placeholder,
                        [{
                            label: "Referrals", 
                            data: d1,
                            lines: {fillColor: "#f2f7f9"},
                            points: {fillColor: "#88bbc8"}
                        },
                        {
                            label: "ProjectedVol", 
                            data: d2,
                            lines: {fillColor: "#f2f7f9"},
                            points: {fillColor: "#88bbc8"}
                        } 
                        ], options);                                                               
                    } 
                });
            }
    });

ありがとう