Я использую данные из Azure Cosmos DB для вычисления среднего значения и отображения графика средней скорости / ч. Я пытаюсь отфильтровать график Google Avg.Speed / hr с помощью DateRangeSlider в C # MVC. Чтобы сгруппировать дату в часах, я конвертирую DateTime в строку. Без диаграммы фильтра он работает нормально, как (число) в среднем. Скорость / (строка) DateTimeHr. Но для добавления ползунка DateRange, если я преобразую String Date в тип DateTime с помощью функции «new Date ()», я теряю часы, так как они по умолчанию преобразуются в 00Hrs. и если я использую DateTime.ParseExact (), я получаю ошибку
«Uncaught SyntaxError: неожиданный номер».
Не могли бы вы помочь? Любые другие идеи для фильтрации графика по дате также приветствуются.
Чтобы добавить ползунок DateRange, если я преобразую строковую дату в тип DateTime с помощью «new Date ()», я теряю часы, так как они по умолчанию преобразуются в 00Hrs. и если я использую DateTime.ParseExact()
я получаю ошибку
«Uncaught SyntaxError: неожиданный номер».
// google.load("visualization", "1.1", {packages: ['bar', 'corechart']});
google.charts.load('current', { packages: ['corechart', 'controls','table'] });
//google.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'date');
data.addColumn('date', 'time');
data.addColumn('number', 'Speed');
//data.addColumn('number', 'Average WindSpeed Km/hr', '');
//DateTime.ParseExact(Html.Encode(group.Key), "dd MMM yyyy HH", CultureInfo.InvariantCulture)
var rawData = [
@foreach (var group in vehicleData.GroupBy(i => i.DateTime.ToString("dd MMM yyyy HH")))
{
@: [@DateTime.ParseExact(@Html.Encode(group.Key), "dd MMM yyyy HH", CultureInfo.CurrentCulture),new Date('@Html.Encode(group.Key)'), @group.Average(d => d.Speed)],
}
];
data.addRows(rawData);
console.log(rawData);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var dateRangeSlider = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'time',
}
});
var options = {
//title: 'Chart By Date',
chartArea: {
//left: 20,
//top: 10,
width: 1000,
//height: 500
animation: { startup: 'true', duration: 1000, easing: 'inAndOut', },
},
legend: { position: 'top' },
hAxis: {
title: 'Time',
format: 'dd/MM/yyyy HH',
showTextEvery: 0,
slantedText: false,
slantedTextAngle: '90'
},
vAxis: {
title: 'Average Speed',
ticks: [0, 25, 50, 75, 100],
},
animation: { startup: 'true', duration: 1500, easing: 'inAndOut', },
colors: ['#e74727']
};
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'columnchart_div',
});
// setOptions(chart);
dashboard.bind(dateRangeSlider, chart);
// Draw the dashboard.
dashboard.draw(data, options);
}
Контроллер "
public async Task<ActionResult> DevicePage(int DeviceId)
{
var items = await DocumentDBRepository<Device>.GetDevicemapAsync(d => d.DeviceId == DeviceId);
var item = await DocumentDBRepository<Item>.GetAvgAsync(d => d.DeviceId == DeviceId, d => d.DateTime);
item = item.OrderByDescending(d => d.DateTime);
TempData["Avg"] = item;
var vehicles= await DocumentDBRepository<Reports>.GetReportsAsync(d => d.DeviceId == DeviceId, d => d.DateTime);
TempData["Vehicles"] = vehicles;
var Device = await DocumentDBRepository<Devicemodel>.GetDeviceModelAsync(d => d.Id != null);
TempData["deviceModel"] = Device;
return View(items);
}
Ожидаемые результаты: график средней скорости / ч с датой. Ползунок / фильтр диапазона, в котором пользователь может видеть граф между или только для данной даты. Спасибо