Верхний график кормления со значениями x и y от ajax - PullRequest
0 голосов
/ 21 апреля 2020

Я пытаюсь скормить свою старшую диаграмму из базы данных, используя ajax. Из моего запроса ajax я хочу вернуть значения x и y (значение x выглядит так: год-неделя, ie 2020-16; значение y является случайным числом). Мой график остается пустым, у меня есть тихая ошибка, которую я не могу понять. Я почти уверен, что это происходит из-за структуры данных, возвращаемых ajax, но я не могу исправить это самостоятельно.

Вот мой 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);
        }
    });

А вот мой ajax php файл:


    <?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);

    ?>

Мой ajax возвращает это:

[{"name": "Еженедельная статистика", "данные" : { "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 «: 4 5109,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}}]

Как мне структурировать данные, чтобы я мог кормить свою диаграмму?

1 Ответ

0 голосов
/ 22 апреля 2020

В вашем случае series.data должен быть массивом массивов или массивом объектов. Теперь это объект.

data: [
    [0, 6],
    [1, 2],
    [2, 6]
]

Или:

data: [{
    x: 1,
    y: 9
}, {
    x: 1,
    y: 6
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4977/

Справочник по API: https://api.highcharts.com/highcharts/series.column.data

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...