Отображение графика Google с использованием динамических данных, которые отображаются неправильно - PullRequest
Новая
       7

Отображение графика Google с использованием динамических данных, которые отображаются неправильно

0 голосов
/ 12 июня 2018

Я хочу отобразить график продаж и покупок на своей веб-странице.Пользователь может выбрать категорию Покупка, Продажа, Производство.У меня есть отдельная таблица для покупок и продаж (AccPurchase и AccSales).И производство является комбинацией обоих.После того, как этот пользователь сможет выбрать вид, будет еженедельно, где график будет отображать недельную часть выбранного месяца.Ежемесячный график всех выбранных месяцев.И Годовой означает, что он будет отображать год мудрым.На всех графиках я хочу отображать только сумму суммы.После этого есть еще 2 выпадающих списка для выбора года и месяца.

Ссылка на страницу, где я хочу отобразить график

https://smilestechno.000webhostapp.com/My/past.html

past.html 

 <head>
    <title>Past Performance Graph</title>
    <link rel="stylesheet" type="text/css" href="css/pastperfomance.css">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['bar']});



function drawChart() {

     var category = document.getElementById('category');
      var categorySelected = category.options[category.selectedIndex].value;
      var view = document.getElementById('view');
      var viewSelected = view.options[view.selectedIndex].value;
      var month = document.getElementById('month');
      var monthSelected = month.options[month.selectedIndex].value;
      var year = document.getElementById('year');
      var yearSelected = year.options[year.selectedIndex].value;

      var settings = {
    "url": "php/past.php",
    "method": "post",
    "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    },
    "data": {
    "category": categorySelected,
    "view": viewSelected,
    "month": monthSelected,
     "year": yearSelected
     }
    }

    $.ajax(settings).done(function(response) {
var data = google.visualization.arrayToDataTable([
['Month', 'Amount'], response
]);

var options = {
chart: {
  title: 'Past Performance Graph',
  subtitle: 'Duration : Jan 2018- Jun 2018',
}
};

var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
}

</script>
</head>

past.php 

<?php

$category = $_POST["category"];
$view = $_POST["view"];
$month = $_POST["month"];
$year = $_POST["year"];

 $con = mysqli_connect("localhost","username","pw","db");

 if($category == "Purchase"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase GROUP BY YEAR(Date)";
}
}else if($category == "Sales"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales GROUP BY YEAR(Date)";
}
}
$exc = mysqli_query($con, $sql);
$rows = array();
while ($row = mysqli_fetch_assoc($exc)) {
$rows[] = array("v"=>$row["Date"], "f"=>$row["SUM(Amount)"]);
}
header('Content-Type: application/json');
echo json_encode($rows);
mysqli_close($con);
?>

Что-то не так в моем эхо-массиве из скрипта php.

В этом формате могут потребоваться данные - https://stackoverflow.com/a/15381171/9786296

1 Ответ

0 голосов
/ 14 июня 2018

Есть некоторые проблемы:

  1. Вы должны вернуть JSON с сервера, если хотите использовать его как есть на клиенте.Ваш код не возвращает действительный JSON - ['2018-06-09','1500'],['2018-06-10','538900'], он недействителен.Вам необходимо заменить ' на ".В целом, вероятно, будет лучше создать объект и «заштриховать» его, так что вы можете быть уверены, что у вас есть действительный объект.Вы можете увидеть, как это сделать здесь: https://stackoverflow.com/a/383664/863110

Заменить: 

while($row = mysqli_fetch_array($exc)){
  echo json_encode("[".$row["Date"].",".$row["SUM(Amount)"]."],");
}

На: 

$rows = array();
while ($row = mysqli_fetch_assoc($exc)) {
  $rows[] = array($row["Date"], $row["Amount"]);
}
echo json_encode($rows);
Другая проблема заключается в том, что вы неправильно отправляете запрос post.Вместо того, чтобы помещать значения в URL, вы должны передать их как данные объекта JSON, например: 
var settings = {
  "url": "https://smilestechno.000webhostapp.com/My/php/past.php",
  "method": "POST",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  "data": {
    "category": "Purchase",
    "view": "Weekly",
    "month": "06",
    "year": "2018"
  }
}

$.ajax(settings).done(function(jsonData) {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Amount'], jsonData
  ]);

  var options = {
    chart: {
      title: 'Comparative Analysis',
      subtitle: 'Duration : Jan 2018- Jun 2018',
    }
  };

  var chart = new google.charts.Bar(document.getElementById('graph'));
});

Помните, что ajax вызов асинхронный (* не используйте async: false) так что вы можете нарисовать диаграмму только после того, как получите ответ

* Начиная с jQuery 1.8, использование async: false с jqXHR ($ .Deferred) устарело;вы должны использовать опции обратного вызова success / error / complete вместо соответствующих методов объекта jqXHR, таких как jqXHR.done ()

http://api.jquery.com/jquery.ajax/

...