2016-10-25 6 views
1

Я пытаюсь передать некоторые данные тенденции Google на графику Google, но я получаю ошибку Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)Turning тенденции для Google визуального запроса в Google GEOchart

я только предположил, что она будет работать в автоматическом режиме от одного я запрашиваю это в диаграмму, а не получить ошибку. Код я получаю сообщение об ошибке с это:

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
var findTitle = $(".input-wrapper input").val(); 
function drawChart() { 
    console.log(findTitle); 
    var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m'); 
    query.send(function (response) { 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage()); 
     return; 
    } 
    data = response.getDataTable(); 
    var view = new google.visualization.DataView(data); 
    view.setColumns([{ 
     calc: function (data, row) { 
     return data.getFormattedValue(row, 0); 
     }, 
     type: 'string', 
     label: data.getColumnLabel(0) 
    }, 1]); 
    var chart = new google.visualization.GeoChart(document.getElementById('chart_region_top')); 
    chart.draw(view, { 
     chartArea: { 
     height: '80%', 
     width: '100%' 
     }, 
    }); 
    chart.draw(data, { 
     width: 1000, 
     height: 500, 
     title: 'Tag: Battlefield 1', 
     colors: ['#ff0000'], 
     backgroundColor: '#2D2D2D', 
     legendTextStyle: { color: '#FFF', position: 'bottom' }, 
     titleTextStyle: { color: '#FFF' }, 
     hAxis: { 
      textStyle: {color: '#FFF'}, 
      gridlines: {color: '#FFF'} 
     }, 
     vAxis: { 
      textStyle: {color: '#FFF'}, 
      gridlines: {color: '#FFF'} 
     } 
    }); 
    }); 
} 

Любая помощь в почему я получаю эту ошибку и решение очень ценится :)

+0

каждый тип диаграммы имеет определенный формат данных [] (https://developers.google.com/chart/interactive/docs/gallery/geochart#data-format), которые должны быть соблюдены ... – WhiteHat

+0

Но я получаю эту информацию непосредственно из экспорта тенденций Google, почему она дает мне неправильные значения? – ConorReidd

+0

значения не обязательно являются неправильными, просто диаграмма ожидает получить таблицу с двумя столбцами - поэтому использование DataView может оказаться полезным, что позволяет быстро преобразовывать данные в формат, необходимый для диаграммы - - [здесь ссылка на 'DataView.setColumns'] (https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns) – WhiteHat

ответ

0

с GeoChart ожидает две колонки,
использования DataView извлечь первые два столбца из DataTable

также, необходимо загрузить пакет 'geochart' см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['geochart'] 
 
}); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m'); 
 
    query.send(function (response) { 
 
    if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage()); 
 
     return; 
 
    } 
 

 
    var view = new google.visualization.DataView(response.getDataTable()); 
 
    view.setColumns([0, 1]); 
 

 
    var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
     legend: 'none' 
 
    }); 
 
    }); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

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

  • Нет связанных вопросов^_^