Отображение статистики на Chart.JS с Ajax / PHP - PullRequest
0 голосов
/ 29 января 2019

Я делаю некоторую статистику по количеству поданных кандидатур!

Поэтому я предлагаю пользователю два варианта периодичности, чтобы визуализировать результаты через Chart.js:

  • еженедельно
  • ежемесячно

В зависимости от выбора я делаю разнообразные расчеты.Проблема в том, что я не могу получить количество кандидатов по дате.

В качестве первого шага я объявляю функцию с параметром, позволяющим мне получить все кандидатуры в соответствии с выбранной периодичностью.

public function getDataFromPeriodicity($periodicity)
{
    $query = $this->_db->prepare("SELECT createdAt FROM candidacies WHERE createdAt BETWEEN :interval AND NOW()");
    $query->bindValue(':interval', $periodicity, PDO::PARAM_STR);

    $query->execute();

    $result = $query->rowCount();

    if($result > 0)
    {
        $intervalData = $query->fetchAll(PDO::FETCH_OBJ);

        return json_encode($intervalData);
    }

    return false;
}

После этого я получаю дни или месяцы в соответствии с выбранной периодичностью,Например, если периодичность является еженедельной, я хотел бы, чтобы она использовалась для каждого извлеченного дня, я считаю, если кандидатура была добавлена ​​в тот же день! Я пробовал это с методом foreach, но меня очень запутали!

    $manager = new candidacyManager($cnx);

    $periodicity = !empty($_POST['periodicity']) ? $_POST['periodicity'] : "weekly";
    $date = new DateTime();
    $abscissaDate = "";
    $data = [];
    $content = [];

    if($periodicity === "weekly")
    {
        $date->sub(new DateInterval('P7D'));

        $abscissaDate = new DateTime(); 
        for ($i = date("d"); $i <= date('t'); $i++) 
        { 
            $content[] .= $i.'/'.$abscissaDate->format('m/Y'); 
        } 

        if($manager->getDataFromPeriodicity($date->format('Y-m-d')))
        {
            $data[] = $manager->getDataFromPeriodicity($date->format('Y-m-d'));

            /*foreach($content as $date)
            {
                foreach($data as $key => $value)
                {
                    $formatDate = new DateTime($value->createdAt);

                    if($formatDate->format('d/m/Y') === $date)
                    {
                        $data = [$date => $formatDate->format('d/m/Y')];
                    }
                }
            }*/
        }
    }
    else
    {
        $date->sub(new DateInterval('P1M'));

        $start = new DateTime();

        $interval = new DateInterval('P1M');

        $daterange = new DatePeriod($start, $interval , 12);

        foreach($daterange as $date)
        {
            $data[] = $date->format("m/Y");
        }

        if($manager->getDataFromPeriodicity($date->format('Y-m-d')))
        {
            $data[] = $manager->getDataFromPeriodicity($date->format('Y-m-d'));
        }
    }

    echo json_encode($data);

И, наконец, я использую AJAX для динамического построения графика:

function showGraph(periodicity)
{
	var graphic = {};
	graphic['periodicity'] = periodicity;

	$.post("graphics.php", graphic, function(data)
    {
    	if(data !== "")
    	{
	        var abscissaDate = [];
	        var statsCandidacies = [];
	        var regex = /^(\d{2})(\/)(\d{2})(\/)(\d{4})$/;
	        var regex2 = /^(\d{2})(\/)(\d{4})$/;
	        var listCandidacies = JSON.parse(data);

	        const values = Object.values(listCandidacies);
	        for(const val of values)
	        {
	        	console.log(val);
	        	var match = regex.exec(val);
	        	var match2 = regex2.exec(val);

	        	if(match)
	        	{
	        		abscissaDate.push(val);
	        	}
	        	else if(match2)
	        	{
	        		abscissaDate.push(val);
	        	}

	        	statsCandidacies.push(val.length);	 	
	        }

	        var chartdata = 
	        {
	            labels: abscissaDate,
	            datasets: [
	                {
	                    label: 'Candidatures',
	                    backgroundColor: '#49e2ff',
	                    borderColor: '#46d5f1',
	                    hoverBackgroundColor: '#CCCCCC',
	                    hoverBorderColor: '#666666',
	                    data: statsCandidacies,
	                    options: 
	                    {
	                    	tooltips: 
	                    	{
	                    		mode: 'point'
	                    	}
	                    }
	                }
	            ]
	        };

	        var graphTarget = $("#myChart");

	        var barGraph = new Chart(graphTarget, 
	        {
	            type: 'bar',
	            data: chartdata
	        });
    	}
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...