title: Feeding highchart with x and y values from ajax
body: <p>I'm trying to feed my highchart from a database using ajax. From my ajax request, I want to return both x and y values (the x value is like that: year-week, ie 2020-16; the y value is a random number). My chart remains blank, I have a silent error that I cannot figure out. I'm pretty sure it comes from the strucure of the data returned by ajax, but I can't seem to fix it on my own.</p>
  
  <p>Here's my javascript:</p>
  
  <pre><code>
      var weekOptions = {
          chart: {
              renderTo: 'weekContainer',
              type: 'column',
          },
          title: {
              text: 'Last 52 weeks',
          },
          credits: {
              enabled: false,
          },
          xAxis: {
              lineWidth: .5,
              tickWidth: 1,
              tickLength: 10,
          },
          yAxis: {
              title: {
                  text: 'Distance (miles)'
              },
              labels: {
                  formatter: function() {
                      return this.value;
                  },
              },
              allowDecimals: false,
              gridLineWidth: 1,
          },
          tooltip: {
              crosshairs: true,
              split: true,
              useHTML: true,
              valueDecimals: 2,
              valueSuffix: ' miles',
              formatter: '',
          },
          plotOptions: {
              spline: {
                  marker: {
                      symbol: "circle",
                      radius: 3,
                  }
              }
          },
          lang: {
              noData: "No Data. Make sure at least one activity type is selected."
          },
          noData: {
              style: {
                  fontWeight: 'bold',
                  fontSize: '15px',
                  color: '#303030'
              }
          },
          exporting: {
              buttons: {
                  contextButton: {
                      menuItems: ['viewFullscreen']
                  }
              },
          },
          series: [{}],
      };
  
  
      //get series from ajax filtered by activity types
      $.ajax({
          url: "weekGetSeries.php",
          type: "POST",
          data: {
              activityType: activityTypeSelected,
              dataToDisplay: dataToDisplay,
          },
          dataType: "JSON",
          success: function (json) {
              weekOptions.series = json;
              var chart = new Highcharts.Chart(weekOptions);
          }
      });
  
  </code></pre>
  
  <p>And here my ajax php file:</p>
  
  <pre><code>
      &lt;?php
  
          require 'dbConnection.php';
  
          $activityType = array(1,2,3,4,5);
          $dataToDisplay = "distance";
          $startingDate = date('Y-m-d', strtotime('-52 week', time()));
          $firstWeek = strtotime($startingDate);
          $conditionActivityType = ' WHERE startingTime &gt;= "' . $startingDate . '" AND (type=' . implode(" OR type=",$activityType) . ')';
          $dataSerie = array("name" =&gt; "Weekly Stats","data" =&gt; array());
  
          for($i = 0; $i &lt; 52; $i++){
              $nextWeek = strtotime('+'.$i.' week', $firstWeek);
              $dataSerie["data"][date("o",$nextWeek) . "-" . date("W",$nextWeek)] = 0;
          }
  
          $getActivities = $conn-&gt;query("SELECT * FROM activity" . $conditionActivityType . " ORDER BY startingTime ASC");
          if ($getActivities-&gt;num_rows &gt; 0) {
              while($row = $getActivities-&gt;fetch_assoc()) {
                  $date = substr($row["startingTime"],0,10);
                  $date = strtotime($date);
                  $week = date("W",$date);
                  $category = date("Y-",$date).$week;
                  $distance = ($row["distance"]);
                  $movingTime = $row["movingTime"];
                  $elapsedTime = $row["elapsedTime"];
                  $totalElevationGain = ($row["totalElevationGain"])*3.28084;
  
                  switch ($dataToDisplay) {
  
                      //distance
                      case "distance":
                          $dataSerie["data"][$category] += $distance;
                          break;
  
                      //Moving Time
                      case "movingTime":
  
                          break;
  
                      //Elapsed Time
                      case "elapsedTime":
  
                          break;
  
                      //elevation gain
                      case "totalElevationGain":
  
                          break;
  
                      //number activities
                      case "activities":
  
                          break;
  
                  }
              }
          };
  
          $data = array();
          array_push($data,$dataSerie);
  
          echo json_encode($data);
  
      ?&gt;
  
  </code></pre>
  
  <p>My ajax returns this:</p>
  
  <p>[{"name":"Weekly Stats","data":{"2019-17":13184.4,"2019-18":73560.2,"2019-19":36899.4,"2019-20":0,"2019-21":38691.3,"2019-22":165127.8,"2019-23":188163.2,"2019-24":12888.5,"2019-25":60011.3,"2019-26":32585.2,"2019-27":12952.8,"2019-28":7944.8,"2019-29":79258.3,"2019-30":60885.2,"2019-31":0,"2019-32":0,"2019-33":0,"2019-34":0,"2019-35":0,"2019-36":0,"2019-37":30974.6,"2019-38":7766.5,"2019-39":7685,"2019-40":21128.7,"2019-41":28996,"2019-42":46362.6,"2019-43":0,"2019-44":0,"2019-45":63694.8,"2019-46":81551.1,"2019-47":104595.9,"2019-48":18121.7,"2019-49":18691.6,"2019-50":37538,"2019-51":40671.8,"2019-52":22109.6,"2020-01":22079,"2020-02":22086.7,"2020-03":21933.2,"2020-04":30702.1,"2020-05":58259,"2020-06":38811.3,"2020-07":43754,"2020-08":45109.1,"2020-09":50870.1,"2020-10":62917.8,"2020-11":0,"2020-12":95912.5,"2020-13":20836.2,"2020-14":25293,"2020-15":110540.5,"2020-16":150804.9}}]</p>
  
  <p>How do I structure my data so I can feed my chart?</p>