как нарисовать линейный график из массива с помощью JavaScript

Question

это мой массив:

<script> 
var table = document.getElementById('mytable'); 
var rows = table.getElementsByTagName('tr'); 
var i, j, cells; 
var distance=[]; 
var date=[]; 
var entryid=[]; 
j=rows.length; 
for (i = 1; i < j; i++) { 
cells = rows[i].getElementsByTagName('td'); 
if (!cells.length) { 
continue; 
} 
distance[i-1] = cells[0].innerHTML; 
date[i-1]=cells[1].innerHTML; 
entryid[i-1]=cells[2].innerHTML; 
} 
var c=[]; 
for (var z=0;z<distance.length;z++){ 
c.push([distance[z],date[z]]); 
} 
</script> 

я хочу, чтобы отобразить 2D массива «с» в моем коде в виде линейного графика в сНу элемента HTML. используя javascript. Заранее спасибо :) EDIT: с помощью диаграмм Google я сделал это: Массив

function drawBackgroundColor() { 
var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Distance'); 
data.addColumn('number', 'Date'); 

data.addRows(c); 

var options = { 
hAxis: { 
title: 'Time' 
}, 
vAxis: { 
title: 'Popularity' 
}, 
backgroundColor: '#f1f8e9' 
}; 

var chart = new   google.visualization.LineChart(document.getElementById('yo')); 
chart.draw(data, options); 
} 

'C' содержит значения, как это [[3,2016/3/20], [5,2016/3/21 ], ...] , но ничего не отображается на делении с id = "yo". Редактировать ******* Я добавил колонку домена, это мой новый код.

function drawChart(){ 
// create DataTable 
var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Id'); 
data.addColumn('number', 'distance'); 
data.addColumn('string', 'date'); 

// load data 
for (var p = 0; p < distance.length; p++) { 
var row = [p, distance[p], date[p]]; 
data.addRow(row); 
} 

var options = {}; 

var chart = new google.visualization.LineChart(document.getElementById('yo')); 
chart.draw(data, options); 
} 

но он не работает, ничего не отображая. Я написал этот код в своем элементе тела и включил необходимые библиотеки в раздел главы. Расстояние и дата - это два массива 1d, массив даты содержит значения в формате 2016/3/19, следует ли использовать дату или строку для типа данных столбца?

********************* EDIT ******************* это мой код сейчас:

<script> 
var p=0; 
var table = document.getElementById('mytable'); 
var rows = table.getElementsByTagName('tr'); 
var i, j, cells; 
var distance=[]; 
var date=[]; 
var entryid=[]; 
j=rows.length; 
for (i = 1; i < j; i++) { 
cells = rows[i].getElementsByTagName('td'); 
if (!cells.length) { 
    continue; 
} 
distance[i-1] = cells[0].innerHTML; 
date[i-1]=new Date(reverse(cells[1].innerHTML)); 
entryid[i-1]=cells[2].innerHTML; 
} 
var c=[]; 
for (var z=0;z<distance.length;z++){ 
c.push([date[z],distance[z]]); 
} 
document.getElementById('cvs').innerHTML=c[0]; 
function reverse(f){ 
var g=f.split("/"); 
var goodstr=g[1]+"/"+g[2]+"/"+g[0]; 
return goodstr; 
} 
google.charts.load('44', { 
callback: drawBackgroundColor, 
packages: ['corechart'] 
}); 

function drawBackgroundColor() { 
var m = [ 
[new Date('3/16/2016'), 3], 
[new Date('3/17/2016'), 5], 
[new Date('3/18/2016'), 7], 
[new Date('3/19/2016'), 10], 
]; 

var data = new google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('number', 'Distance'); 

data.addRows(c); 

var options = { 
hAxis: { 
    title: 'Time' 
}, 
vAxis: { 
    title: 'Popularity' 
}, 
backgroundColor: '#f1f8e9' 
}; 

var chart = new google.visualization.LineChart(document.getElementById('yo')); 
chart.draw(data, options); 
} 
</script> 

это выглядит так правильно, но оно не работает ... у меня нет идеи, почему! @WhiteHat очень благодарен за вашу помощь ... в коде, который вы дали, если я использую массив 'm', который вы использовали в data.addRows(), его работу, но когда я поместил свой массив 'c "он не работает :(

Answer 1

не думаю вы найдете что-нибудь проще.
Попробуйте, если это необходимо, я могу добавить в HTML таблицу ...

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

 
function drawBackgroundColor() { 
 
    var c = [ 
 
    [new Date('3/16/2016'), 3], 
 
    [new Date('3/17/2016'), 5], 
 
    [new Date('3/18/2016'), 7], 
 
    [new Date('3/19/2016'), 9], 
 
    ]; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'Distance'); 
 

 
    data.addRows(c); 
 

 
    var options = { 
 
    hAxis: { 
 
     title: 'Time' 
 
    }, 
 
    vAxis: { 
 
     title: 'Popularity' 
 
    }, 
 
    backgroundColor: '#f1f8e9' 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('yo')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="yo"></div>