2016-10-23 5 views
1

Я пытаюсь превратить запрос визуализации Google в диаграмму с использованием API диаграмм Google.Как включить запрос визуализации Google в диаграмму?

я в настоящее время есть данные: https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m

Я пытаюсь превратить это в графике, но я не получаю никакой удачи, то, что я попытался это:

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script> 

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

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

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m'); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 

    </script> 
</head> 
<body> 
    <div id="chart_div"></div> 
</body> 
</html> 

I «ве не могу понять, почему это не оборачиваясь данные у меня есть в таблице, любая помощь очень ценится

ответ

1

первым, необходимо отправить запрос и получить данные из ответа

рядом, чтобы нарисовать круговую диаграмму, то первый столбец должен быть строкой

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

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

 
function drawChart() { 
 
    var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_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.PieChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
     chartArea: { 
 
     height: '100%', 
 
     width: '100%' 
 
     }, 
 
     height: 400 
 
    }); 
 
    }); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

Удивительное спасибо! :) – ConorReidd