Диаграмма Google не загружается из локального источника JSON

Эта проблема

У меня есть сайт, на котором за один раз запускается несколько диаграмм. Скажем, от 5 до 7. На данный момент есть блокировка страницы, пока все данные загружаются, прежде чем загружаются графики.

Чего я хотел добиться здесь, так это запускать функцию рендеринга для каждой диаграммы в момент обработки данных. Итак, что я пытаюсь сделать, так это смоделировать приведенное ниже для каждой диаграммы, которая у меня есть.

Что я пробовал

JS:

// chart basics
google.load('visualization', '1.0', {'packages':['timeline']});
google.setOnLoadCallback(drawChart);

//container
var container = document.getElementById('chart_div_23_36');
  
//begin our function
function drawChart() {
  $.ajax({
    url: '/data.json',
    dataType: "json"
  }).done(function(jsonData) {
  
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData); 
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Timeline(container);
    chart.draw(data, {
          width: 924, 
          height: 340,
          enableInteractivity : false,
          backgroundColor: '#fff',
          avoidOverlappingGridLines: false
      });

  }).fail(function() {
    google.visualization.errors.addError(container, 
      "Failed to load data for the chart.");
  });
}
//end function

HTML:

Извините за странные имена div, они предварительно сгенерированы из серверной системы.

<div id="chart_div_23_36"></div>

И содержимое моего файла JSON:

{
"cols": [
{"id":"Day","label":"Day","pattern":"","type":"string"},
{"id":"Name","label":"Name","pattern":"","type":"string"},
{"id":"Color","label":"Color","pattern":"","type":"string","role":"style"},
{"id":"Start","label":"Start","pattern":"","type":"date"},
{"id":"End","label":"End","pattern":"","type":"date"}
],
"rows": [
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,10,0,0)","f":null},{"v": "Date(2013,10,10,10,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,10,13,58)","f":null},{"v": "Date(2013,10,10,10,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,10,17,59)","f":null},{"v": "Date(2013,10,10,10,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,11,0,0)","f":null},{"v": "Date(2013,10,10,11,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,11,13,58)","f":null},{"v": "Date(2013,10,10,11,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,11,17,59)","f":null},{"v": "Date(2013,10,10,11,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,0,0)","f":null},{"v": "Date(2013,10,10,12,5,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#33CC33","f":null},{"v": "Date(2013,10,10,12,5,59)","f":null},{"v": "Date(2013,10,10,12,6,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,6,59)","f":null},{"v": "Date(2013,10,10,12,7,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#0066ff","f":null},{"v": "Date(2013,10,10,12,7,59)","f":null},{"v": "Date(2013,10,10,12,8,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,8,59)","f":null},{"v": "Date(2013,10,10,12,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,13,0,0)","f":null},{"v": "Date(2013,10,10,13,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,13,13,58)","f":null},{"v": "Date(2013,10,10,13,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,13,17,59)","f":null},{"v": "Date(2013,10,10,13,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,14,0,0)","f":null},{"v": "Date(2013,10,10,14,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,14,13,58)","f":null},{"v": "Date(2013,10,10,14,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,14,17,59)","f":null},{"v": "Date(2013,10,10,14,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,0,0)","f":null},{"v": "Date(2013,10,10,15,1,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#33CC33","f":null},{"v": "Date(2013,10,10,15,1,59)","f":null},{"v": "Date(2013,10,10,15,2,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,2,59)","f":null},{"v": "Date(2013,10,10,15,3,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#0066ff","f":null},{"v": "Date(2013,10,10,15,3,59)","f":null},{"v": "Date(2013,10,10,15,4,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,4,59)","f":null},{"v": "Date(2013,10,10,15,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,16,0,0)","f":null},{"v": "Date(2013,10,10,16,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,16,13,58)","f":null},{"v": "Date(2013,10,10,16,17,59)","f":null}]},
]
}

Ошибки

Не удалось загрузить данные для диаграммы.

Я получаю сообщение об ошибке из моей части .fail вызова AJAX. Единственная проблема в том, что я не могу понять, почему. Все это выглядит правильно для меня, и я пробовал много вариантов этого.

Я вижу получение самого файла JSON: введите здесь описание изображения


asynchronous jquery ajax google-visualization
person Doidgey    schedule 22.03.2016    source источник
comment
Вы проверили в инспекторе, правильно ли указан URL (код 200)?   -  person kaito    schedule 22.03.2016
comment
Я бы рекомендовал проверить фактическую ошибку, вызывающую fail -- добавить необходимые аргументы --› jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});   -  person WhiteHat    schedule 22.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Согласно JSON Validator, предоставленные данные JSON недействительны, это препятствует загрузке файла JSON.

После исправления данных JSON файл данных загружается, и диаграмма отображается правильно, как показано ниже:

// chart basics
google.load('visualization', '1.0', {'packages':['timeline']});
google.setOnLoadCallback(drawChart);



//begin our function
function drawChart() {

  //container
  var container = document.getElementById('chart_div_23_36');

  $.ajax({
    url: 'https://gist.githubusercontent.com/vgrem/a32a35e5e22170e2c9f0/raw/950256440645ae5b506fb18547cbaa0261a1d5bc/data.json',
    dataType: "json",
    cache: false
  }).done(function(jsonData) {

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData); 

    
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Timeline(container);
    chart.draw(data, {
          width: 924, 
          height: 340,
          enableInteractivity : false,
          backgroundColor: '#fff',
          avoidOverlappingGridLines: false
      });

  }).fail(function(error) {
    google.visualization.errors.addError(container, 
      "Failed to load data for the chart.");
  });
}
//end function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div_23_36"></div>

person Vadim Gremyachev    schedule 26.03.2016