HTML Диаграмма Google не рисует линейный график с импортированными данными из Firebase - PullRequest
0 голосов
/ 06 апреля 2020

Надеюсь получить немного помощи с проектом. У меня есть данные, записываемые в базу данных Google Firebase с датчиков. Моя работа состоит в том, чтобы взять эти данные и отобразить их в виде графика на веб-сайте. Я успешно импортирую данные, используя следующий код приложения. js (имена переменных являются временными для целей тестирования):

var measure = []; var date = []; var i;

db.collection ('cafes'). get (). then ((snapshot) => {
snapshot.docs.forEach (do c => {for (i =) 0; i <50; i ++) {измерение [i] = do c .data (). Name; дата [i] = do c .data (). City;}})}) </p>

Это вытягивает каждый документ в Firebase по мере необходимости. Теперь я пришел к своей проблеме. Я использую следующий код, чтобы попытаться создать график из этого массива данных:

var data = new google.visualization.DataTable (); data.addColumn ('число', 'дата'); data.addColumn ('number', 'value');

функция drawChart C () {var data = google.visualization.arrayToDataTable ([['Date', 'co2level'], [date [ 0], измерение [0]], [дата 1 , измерение 1 ], [дата 2 , измерение 2 ], [ дата [3], измерение [3]],]);

var options = {title: 'Измерения Co2', curveType: 'function', legend: {position: 'bottom'}};

var chart = new google.visualization.LineChart (document.getElementById ('curve_chart')));

chart.draw (данные, параметры); }

$ ('# graph'). Click (function () {});

Но он не отображается должным образом или создает линию. Я не могу понять, почему (пи c ниже). Unsuccessful Graph

У меня есть еще один график с локальными данными для целей тестирования, который отображается правильно (pi c ниже):

function drawChartp ( ) {var data = google.visualization.arrayToDataTable ([['Date', 'pmlevel'], ['22 / 01 ', 34], ['23 / 01', 20], ['24 / 01 ', 36 ], ['25 / 01 ', 34]]);

var options = {title:' pm sizes ', curveType:' function ', legend: {position:' bottom '}};

var chart = new google.visualization.LineChart (document.getElementById ('curve_chart')));

chart.draw (данные, параметры); }

$ ('# graph'). Click (function () {});

Successful Graph

любая помощь Буду очень признателен, я пытался выяснить эту проблему некоторое время. Спасибо

...