Ошибка ползунка диапазона дат линейной диаграммы Google в C # MVC - PullRequest
0 голосов
/ 14 июня 2019

Я использую данные из 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);

        }

Ожидаемые результаты: график средней скорости / ч с датой. Ползунок / фильтр диапазона, в котором пользователь может видеть граф между или только для данной даты. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...