title: Flot Charts using SQL Server db with multiple y axis
body: <p>This is my first post, apologies if I've asked a question a number of people have already done so. I don't see the answer I need in other posts.</p>
  
  <p>I'm using Flot Charts and have a SQL Server db, I've got a php file that will connect to the db and return all the values within the sql in an array.</p>
  
  <pre><code>&lt;?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 &lt;= MONTH(GETDATE())
      ");
  
  while($result = odbc_fetch_array($sql))
  {
     $allreferrals[] = array($result['Months'],$result['Referrals'],$result['ProjectedVol']);
  }
  echo json_encode(($allreferrals), JSON_NUMERIC_CHECK);
  exit;
  
  ?&gt;
  </code></pre>
  
  <p>This works well and produces the array as below</p>
  
  <p><code>[[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]]</code></p>
  
  <p>Now, when it all comes together in the jquery file, this is where I end up getting stuck. I don't see where it pulls any other columns back apart from the first data column, how can this be done?</p>
  
  <pre><code>// 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+'&amp;nbsp;&amp;nbsp;';
                               }
                          },
                          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);                                                               
                      } 
                  });
              }
      });
  </code></pre>
  
  <p>Thanks</p>