Исправить положение данных на динамически заполненной диаграмме Google с помощью AJAX и JQuery - PullRequest
0 голосов
/ 28 мая 2019

мои проблемы выглядят следующим образом:

Я пытаюсь динамически заполнить кривую Google, используя AJAX и JQuery, чтобы извлечь данные из файла PHP, который у меня есть, который выполняет некоторые анализы, такие как скользящее среднее,Мне удалось заполнить график динамически, но данные не соответствуют моим расчетам, например:

Это расчеты, которые я хочу поместить в свой график.

enter image description here

Вот код, над которым я работаю:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>
<body>

    <div id="curve_chart" style="width: 1200px; height: 1200px"></div>

    <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'Periodo');
            dataTable.addColumn('number', 'PMS');
            dataTable.addColumn('number', 'PMD');
            dataTable.addColumn('number', 'PMDA');
            dataTable.addColumn('number', 'PTMAC');

            var rows = [];

            var column = 1;
            var urls = [
                "http://localhost:80/dss/calculo.php?x=periodo",
                "http://localhost:80/dss/calculo.php?x=calculaPMS",
                "http://localhost:80/dss/calculo.php?x=calculaPMD",
                "http://localhost:80/dss/calculo.php?x=calculaPMDA",
                "http://localhost:80/dss/calculo.php?x=calculaPTMAC"
            ]

            $.each(urls, (index, url) => {
                $.ajax({
                    async: false,
                    method: "get",
                    url: url,
                    success: datos => {
                        datos = JSON.parse(datos);
                        //console.log(datos)

                        $.each(datos, (index, dato) => {
                            if(column == 1)
                                rows.push([dato]);
                            else
                                rows[index].push(dato);

                        });
                        if(column == urls.length){
                            $.each(rows, (index, row)=>{
                            while(row.length < urls.length)
                                row.push(null);
                        })

                        dataTable.addRows(rows);
                        console.log(rows);

                            var options = {
                                interpolateNulls: true,
                                chart: {
                                    title: "chart"

                                },
                                width: 800,
                                height: 800
                            };

                            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                            chart.draw(dataTable,options);
                        }

                        column++;
                    }
                });

                })
        }
    </script>
</body>
</html>

А вот мой график, как только я его сгенерирую:

enter image description here

Как вы можете видеть, значения, которые я беру из таблицы, размещаются неправильно, а дата 2010 года имеет значения, которые не должны быть.

Что я могу сделать, чтобы решить эту проблему?

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