Инструменты Google Chart не загружаются

Я не могу найти, почему мой код не работает. В консоли Chrome нет ошибок. Я считаю, что данные загружены правильно и не проблема. Я думаю, что я мог ошибиться в фактическом создании диаграмм. Может ли кто-нибудь исправить мой код?Инструменты Google Chart не загружаются

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the controls package. 
     google.load('visualization', '1.0', {'packages':['controls', 'corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(initialize); 

     // Declare variable outside of functions. 
     var data; 


     function initialize() { 
      var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHc4M2t3T0c5c3UtOWtTUFg5RHc1VlE&usp=sharing'); 

      query.send(handleQueryResponse); 
     } 

     function handleQueryResponse(response) { 
      if (response.isError()) { 
       alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
       return; 
      } 
      data = response.getDataTable(); 
      return data; 
     } 

     function drawDashboard() { 

      var scatterRangeSlider = new google.visualization.ControlWrapper({ 
       'controlType': 'NumberRangeFilter', 
       'containerId': 'filter_div', 
       'options': { 
        'filterColumnIndex': 2 
       } 
      }); 

      var scatterChart = new google.visualization.ChartWrapper({ 
       'chartType': 'ScatterChart', 
       'containerId': 'scatter_div', 
       'options': { 
        'title': '2000 MLB Teams\' Attendance vs. Wins', 
        'hAxis': {title: 'Attendance'}, 
        'vAxis': {title: 'Wins'}, 
        'legend': 'none' 
       }, 
       'view': {'columns': [5, 6]} 

      }); 

      var table = new google.visualization.ChartWrapper({ 
       'chartType': 'Table', 
       'containerId': 'table2', 
       'options': { 
        'width': '900px' 
       } 
      }); 

      var tree = new google.visualization.ChartWrapper({ 
       'chartType': 'Treemap', 
       'containerId': 'treemap_div', 
       'options': { 
        'title': 'MLB Attendance Treemap' 
       }, 
       'view': {'columns': [1, 5]} 
      }); 

      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
       dashboard.bind(scatterRangeSlider, scatterChart); 
       dashboard.draw(data); 
     } 

     google.setOnLoadCallback(initialize); 
    </script> 
</head> 

<body> 
    <div id="dashboard_div"> 
     <div id="scatter_div" style="width: 1000px; height: 800px;"></div> 
     <div id="filter_div"></div> 
     <div id="table_div" style="width: 1000px; height: 800px;"></div> 
     <div id="treemap_div" style="width: 1000px; height: 800px;"></div> 
    </div> 
</body>

источник

2013-12-18 dk1

вам необходимо определить инициализировать перед вызовом google.setOnLoadCallback ли? – Malk

Ваш график рисования код никогда не вызывается - вам нужно позвонить drawDashboard из handleQueryResponse или реорганизовать свой код (как нет очевидных причин, почему вы должны были бы иметь несколько различных функций, для выполнения этого задача). Однако, если вы это сделали, у вас есть еще несколько исправлений, так как выбранный вами столбец для фильтрации с помощью NumberRangeFilter не является числовым столбцом (столбец 2 - «Подразделение»). Ваш ScatterChart рисует «Runs Scored» vs «Runs Allowed», а не «Home Game Attendance» против «Wins» (как следует из названия диаграммы). Таблица не привязана к панели мониторинга, поэтому она не будет нарисована - вы должны либо привязать ее к одному или нескольким элементам управления в панели мониторинга, либо установить свой параметр dataTable на data и вызвать методы #draw, чтобы нарисовать его без привязки. Кроме того, ваши данные не в подходящем формате для рисования TreeMap. Если вы хотите использовать этот набор данных для рисования TreeMap, вам нужно будет преобразовать набор данных в подходящий формат.

Вот один пример того, как вы могли бы установить это (не включая TreeMap):

function initialize() { 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHc4M2t3T0c5c3UtOWtTUFg5RHc1VlE&usp=sharing'); 

    query.send(function (response) { 
     if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
     } 
     var data = response.getDataTable(); 

     var scatterRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
       'filterColumnIndex': 4 
      } 
     }); 

     var scatterChart = new google.visualization.ChartWrapper({ 
      'chartType': 'ScatterChart', 
      'containerId': 'scatter_div', 
      'options': { 
       'title': '2000 MLB Teams\' Attendance vs. Wins', 
       'hAxis': {title: 'Attendance'}, 
       'vAxis': {title: 'Wins'}, 
       'legend': 'none' 
      }, 
      'view': {'columns': [4, 7]} 

     }); 

     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'table2', 
      'options': { 
       'width': '900px' 
      } 
     }); 

     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
     dashboard.bind([scatterRangeSlider], [scatterChart, table]); 
     dashboard.draw(data); 
    }); 
} 

google.load('visualization', '1.0', {'packages':['controls'], callback: initialize});

Смотрите рабочий пример здесь: http://jsfiddle.net/asgallant/9mBn6/

источник

2013-12-19 02:05:39 asgallant

Инструменты Google Chart не загружаются

ответ

Смежные вопросы