Feeding highchart with x and y values from ajax - ajax

Question

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.
Here's my javascript:
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);
}
});
And here my ajax php file:
<?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 >= "' . $startingDate . '" AND (type=' . implode(" OR type=",$activityType) . ')';
$dataSerie = array("name" => "Weekly Stats","data" => array());
for($i = 0; $i < 52; $i++){
$nextWeek = strtotime('+'.$i.' week', $firstWeek);
$dataSerie["data"][date("o",$nextWeek) . "-" . date("W",$nextWeek)] = 0;
}
$getActivities = $conn->query("SELECT * FROM activity" . $conditionActivityType . " ORDER BY startingTime ASC");
if ($getActivities->num_rows > 0) {
while($row = $getActivities->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);
?>
My ajax returns this:
[{"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}}]
How do I structure my data so I can feed my chart?

Answer 1

In your case series.data needs to be an array of arrays or an array of objects. Now it is an object.
data: [
[0, 6],
[1, 2],
[2, 6]
]
Or:
data: [{
x: 1,
y: 9
}, {
x: 1,
y: 6
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4977/
API Reference: https://api.highcharts.com/highcharts/series.column.data