Данные из JQUERY/AJAX в Morris.JS

Здесь есть ряд небольших проблем, которые связаны с одной и той же ключевой проблемой - то, что ваш PHP создает, не является допустимыми данными JSON.

Если вы скопируете и вставите свои образцы данных в валидатор, такой как JSONLint, вы обнаружите, что он не работает по нескольким причинам:

1) У вас есть список объектов, но чтобы он был действительным списком (или множество, как его обычно называют), элементы должны быть заключены в квадратные скобки ([ и ]) в начале и в конце.

2) Имена свойств (например, age, totalM и totalF) должны быть заключены в двойные кавычки (").

3) Строковые значения (например, 0-1, 1-4 и т. д.) должны быть заключены в кавычки двойной, а не в одинарные кавычки.

Действительная версия вашего примера JSON будет выглядеть так:

[
  { "age": "0-1", "totalM": 2, "totalF": 1 }, 
  { "age": "1-4", "totalM": 1, "totalF": 0 }, 
  { "age": "10-14", "totalM": 0, "totalF": 1 }, 
  { "age": "15-19", "totalM": 0, "totalF": 1 }, 
  { "age": "5-9", "totalM": 0, "totalF": 3 }, 
  { "age": "55-59", "totalM": 6, "totalF": 0 }
]

Вы можете найти этот учебник полезным для быстрого изучения синтаксиса.

Однако, как ни полезно знать синтаксис, на самом деле вам не нужно создавать его вручную с помощью вашего PHP, как вы делаете сейчас. На самом деле это довольно плохая идея, потому что это оставляет вас уязвимыми для глупых ошибок (например, не добавление квадратных скобок) и риску случайных синтаксических ошибок в JSON (например, представьте, что одно из ваших строковых значений само содержит двойной -кавычка: если вы не использовали перед ним подходящий escape-символ, то в JSON это будет выглядеть как конец свойства, а то, что следует за ним, будет недействительным).

Результатом описанных выше проблем является то, что ваш PHP возвращает в браузер строку неверных данных, которую нельзя использовать для заполнения диаграммы.

Гораздо лучше просто создать обычный массив в PHP, а затем использовать встроенную функцию json_encode(), чтобы позаботиться о преобразовании этого объекта в действительный JSON. Обычно это считается лучшей практикой, и если вы будете следовать любому вводному руководству по PHP/JSON, оно покажет вам эту функцию.

Чтобы добавить к проблемам с созданием JSON на стороне сервера, есть проблема и на стороне клиента: даже если вы сделал возвращаете действительный JSON, в этот момент это все еще строка - для того, чтобы ее можно было использовать в вашей диаграмме, у вас будет чтобы разобрать его в переменную JavaScript. Если вы укажете dataType: "json" в параметрах $.ajax, jQuery автоматически выполнит синтаксический анализ за вас. В противном случае вы бы сделали вызов JSON.parse(), чтобы сделать это.

Надеюсь, теперь вы видите общий шаблон — вы берете переменную PHP и превращаете ее в JSON, который является текстовым представлением данных. Это позволяет отправить его через Интернет. Затем, когда он достигает места назначения, вы снова превращаете его в переменную (JavaScript) для использования в коде.

Вот пример PHP, который будет генерировать действительный JSON рекомендуемым способом. Я добавил комментарии к важным строкам:

$diseaseselection = $_REQUEST['diseaseselection'];

if (isset($diseaseselection)){ 
   $result = mysqli_query($con, "SELECT disease,age,SUM(CASE WHEN gender = 'm' THEN 1 ELSE 0 END) AS totalM, SUM(CASE WHEN gender = 'f' THEN 1 ELSE 0 END) AS totalF FROM mdr where disease = '$diseaseselection' GROUP BY disease , age"); 
   $chart_data = array(); //declare an array, not a string. This will become the outer array of the JSON.

  while($row = mysqli_fetch_array($result)) { 
      //add a new item to the array
      //each new item is an associative array with key-value pairs - this will become an object in the JSON
      $chart_data [] = array(
        "age" => $row["age"], 
        "totalM" => $row["totalM"], 
        "totalF" => $row["totalF"]
      ); 
  } 

  $json = json_encode($chart_data);  //encode the array into a valid JSON object
  echo $json; //output the JSON
}

И вот соответствующая часть кода JavaScript для его получения

$.ajax({
  url: "chart.php",
  method: "POST",
  data: {
    diseaseselection: diseaseselection
  },
  dataType: "json", //parse the response data as JSON automatically
  success: function(data) {
    Morris.Line({
      element: 'chart',
      data: data, //supply the response data (which is now a JS variable) directly, no extra brackets
      xkey: 'age',
      ykeys: ['totalM', 'totalF'],
      labels: ['Total MALE', 'Total FEMALE'],
      hideHover: 'auto',
      pointStrokeColors: ['white'],
      lineWidth: '6px',
      parseTime: false,
      lineColors: ['Skyblue', 'Pink'],
    });
  }
});

Вот рабочая демонстрация только части AJAX и диаграммы (с использованием фиктивного сервера для предоставления JSON): https://jsfiddle.net/7o9ptajr/1/