мне нужно, чтобы график выглядел так, как показано ниже, под названием продукта по оси x
1 ось X: дата
2. Ось Y: стоимость.
3. точки должны быть названием продукта.

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var charts = {};
var options = {
Column: {
chartArea: {
height: '100%',
width: '100%',
top: 24,
left: 64,
right: 32,
bottom: 48,
},
tooltip: {
valueDecimals: 2,
valueSuffix: ' USD',
valuePrefix: '$'
},
'vAxis': {
title: 'Cost in USD ($)', format:'$#',
},
height: '100%',
legend: {
position: 'bottom'
},
pointSize: 4,
width: '100%'
},
};
// columns charts data
var jsonData = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]];
loadData(jsonData, '1', 'Line');
var data2 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]];
// load json data
function loadData(jsonData, id, chartType) {
// create data table
var dataTable = new google.visualization.DataTable();
switch (chartType) {
case 'Line':
var chartData = [];
chartData.push(['date', 'Cost']);
jsonData.forEach(function (row) {
chartData.push([row[0], parseFloat(row[1])]);
});
var dataTable = google.visualization.arrayToDataTable(chartData);
// drawChart();
// var chartData = [];
// chartData.push(['date', 'Cost']);
// data2.forEach(function (row) {
// chartData.push([row[0], parseFloat(row[1])]);
// });
//var dataTable = google.visualization.arrayToDataTable(chartData);
//var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
break;
}
// draw chart
$(window).resize(function () {
drawChart(id, chartType, dataTable);
});
drawChart(id, chartType, dataTable);
}
// draw chart
function drawChart(id, chartType, dataTable) {
if (!charts.hasOwnProperty(id)) {
charts[id] = new google.visualization.ChartWrapper({
chartType: chartType + 'Chart',
containerId: 'chart-' + id,
options: options[chartType]
});
}
charts[id].setDataTable(dataTable);
charts[id].draw();
}
});html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div class = "chart" id = "chart-1"></div>я получаю данные из одной переменной, но как объединить все данные varbile в одну диаграмму ?? данные как category1 (pro1) = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05- 01 ", 339]]
category2 (pro2) = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01" , 215149], ["2017-05-01", 215149]]
category3 (pro3) = [["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]] category4 (pro4) = [["2017-01-01", 3299]]
в каждом массиве есть своя линия на одном графике, возможно ли? с помощью таблицы данных присоединиться



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


добавить столбец в таблицу данных диаграммы для каждого массива
добавить строку для каждого элемента в массивах,
затем сгруппируйте таблицу данных по дате ...
для этикеток создайте массив имен,
только убедитесь, что меток столько же, сколько и массивов данных ...
var names = ['Aws', 'Azure', 'Other 1', 'Other 2'];
тогда...
// add category column
var colIndex = dataTable.addColumn('number', names[categoryIndex]);
см. следующий рабочий фрагмент ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// save charts for redraw
var charts = {};
// combine data into array
var jsonData = [];
var category1 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]];
var category2 = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]];
var category3 = [["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]];
var category4 = [["2017-01-01", 3299]];
var names = ['Aws', 'Azure', 'Other 1', 'Other 2'];
jsonData.push(category1);
jsonData.push(category2);
jsonData.push(category3);
jsonData.push(category4);
// create data table
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
var aggColumns = [];
$.each(jsonData, function(categoryIndex, category) {
// add category column
var colIndex = dataTable.addColumn('number', names[categoryIndex]);
aggColumns.push({
aggregation: google.visualization.data.sum,
column: colIndex,
label: dataTable.getColumnLabel(colIndex),
type: dataTable.getColumnType(colIndex)
});
// add category data
$.each(category, function(dataIndex, data) {
var rowIndex = dataTable.addRow();
dataTable.setValue(rowIndex, 0, data[0]);
dataTable.setValue(rowIndex, colIndex, data[1]);
});
});
// group data
var dataTable = google.visualization.data.group(
dataTable,
[0],
aggColumns
);
// draw chart
$(window).resize(function () {
drawChart('0', dataTable);
});
drawChart('0', dataTable);
// draw chart
function drawChart(id, dataTable) {
if (!charts.hasOwnProperty(id)) {
charts[id] = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-' + id
});
}
charts[id].setDataTable(dataTable);
charts[id].draw();
}
});html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div class = "chart" id = "chart-0"></div>Благодарность !! как добавить название категории что-то вроде ярлыка category1 = Aws cateogry2 = Azure в легенде или всплывающих подсказках ??
возможно ли какое-либо событие нажатия легенды в диаграммах Google, как и в диаграммах highcharts, например, когда я нажимаю aws, чем отображается только одна строка aws?
не через стандартные функции, он выделяет строку только при нажатии ...
хорошо, нп .... это не работает, когда я добавляю с параметрами: {hAxis: {format: 'MMMM-yy',}}
hAxis.format будет работать только со столбцами даты и номера, а не со строкой ...
да объединить все отображение массива в одну диаграмму, например, с помощью объединения таблиц данных или чего-то еще?