MySQL SELECT не возвращает правильные значения, а графический график google не отображается желаемым образом

Question

Я здесь совершенно новый и задающий вопрос в первый раз. Поэтому я не знаю, как задать вопрос, но мне нужна помощь. ваш.

Image of google line graph

У меня 2 проблемы в приведенном выше графике.

1. Я получаю повторяющиеся даты для представлений из моей базы данных и отображения на графике, как указано выше помечаются как и .

2. Даты должным образом не совпадают с датами и помечается как в изображении выше, а также месяцев не показаны несколько раз, как видно на изображении.

Помогите мне пожалуйста. Спасибо заранее-х

PHP & MySQL код

function AdminViews() 
{ 
    if(!$this->DBLogin()) 
    { 
     $this->HandleError("Database login failed!"); 
     return false; 
    } 
    $out_query = "SELECT count(ip_address) AS count, date(visit_date_time) as visit_date_time FROM db_views WHERE user_id = id GROUP BY visit_date_time ORDER BY visit_date_time LIMIT 30 "; 
    $result = mysqli_query($this->connection,$out_query); 
    while($row = mysqli_fetch_array($result)) 
    { 
     $resultset[] = $row; 
    }  
    if(!empty($resultset)) 
     return $resultset; 
} 

Google Graph Javascript код

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ ['Date', 'Views'] 
     <?php 
     $results = $ClassName->AdminViews(); 
     if(!empty($results)){ 
      foreach($results as $row) { 
       $vDate = str_replace("-",", ",$row['visit_date_time']); 
       echo ",[new Date('".$vDate."'),".$row['count']."]"; 
      } 
     } ?> ]); 

     var options = { 
      pointSize: 5, 
      legend: { position: 'top', alignment: 'end' }, 
      hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} }, 
      vAxis: { minValue: 0 } 
     }; 
     var chart = new google.visualization.LineChart(document.getElementById("barChart")); 
     chart.draw(data, options); 
    } </script> 

В браузере Js приходит как это

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ ['Date', 'Views'] 
     ,[new Date('2017, 01, 01'),6],[new Date('2017, 01, 02'),6],[new Date('2017, 01, 03'),6],[new Date('2017, 01, 04'),6],[new Date('2017, 01, 05'),7],[new Date('2017, 01, 06'),5],[new Date('2017, 01, 07'),5],[new Date('2017, 01, 07'),3],[new Date('2017, 01, 08'),3],[new Date('2017, 01, 08'),4],[new Date('2017, 01, 09'),2],[new Date('2017, 01, 10'),2],[new Date('2017, 01, 10'),6],[new Date('2017, 01, 11'),6],[new Date('2017, 01, 12'),6],[new Date('2017, 01, 13'),6],[new Date('2017, 01, 14'),6],[new Date('2017, 01, 15'),6],[new Date('2017, 01, 16'),6],[new Date('2017, 01, 17'),10],[new Date('2017, 01, 18'),30],[new Date('2017, 01, 19'),3],[new Date('2017, 01, 20'),3] ]); 

     var options = { 
      pointSize: 5, 
      legend: { position: 'top', alignment: 'end' }, 
      hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} }, 
      vAxis: { minValue: 0 } 
     }; 
     var chart = new google.visualization.LineChart(document.getElementById("barChart")); 
     chart.draw(data, options); 
    } 
</script> 

Answer 1

Ваша группа также должна указать дату и дату, иначе вы увидите, что у вас есть несколько записей за тот же день, но несколько разные временные метки, это даст вам несколько узлов.

Изменить это:

... GROUP BY visit_date_time ORDER BY visit_date_time ... 

Для этого:

... GROUP BY DATE(visit_date_time) ORDER BY visit_date_time ... 

Это должно сделать трюк.

EDIT

Для вашего второго вопроса, посчитайте: -1 -> означает автоматическое выравнивание линий сетки, которая производит нежелательный результат здесь.

Изменить это:

var options = { 
     pointSize: 5, 
     legend: { position: 'top', alignment: 'end' }, 
     hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} }, 
     vAxis: { minValue: 0 } 
    }; 

Для этого (как вы выяснили):

var options = { 
      pointSize: 5, 
      legend: { position: 'top', alignment: 'end' }, 
      hAxis: { slantedText: 'true', format: 'MMM dd', gridlines: {count: 10, color: 'none'} }, 
      vAxis: { minValue: 0 } 
     }; 

Оговорка: второй ответ пришел от самого О.П., как я не был уверен.

Answer 2

Хорошо вот решение я нашел

1. Изменить

... GROUP BY visit_date_time ORDER BY visit_date_time ... 

к этому, как было предложено @gwnp

... GROUP BY DATE(visit_date_time) ORDER BY visit_date_time ... 

И

2. Изменение

var options = { 
     pointSize: 5, 
     legend: { position: 'top', alignment: 'end' }, 
     hAxis: { format: 'MMM dd, yyyy', gridlines: {count: -1, color: '#fff'} }, 
     vAxis: { minValue: 0 } 
    }; 

этому

var options = { 
      pointSize: 5, 
      legend: { position: 'top', alignment: 'end' }, 
      hAxis: { slantedText: 'true', format: 'MMM dd', gridlines: {count: 10, color: 'none'} }, 
      vAxis: { minValue: 0 } 
     }; 

count: -1 -> означает автоматическое выравнивание линий сетки, что дает здесь нежелательный результат.