Google Charts Проблема с загрузкой таблицы с несколькими столбцами

Question

Я пытаюсь создать многоколоночную диаграмму с визуализацией Google, я использую два запроса для этого, но это не работает.

В консоли появляется следующая ошибка:

Error: Row given with size different than 3 (the number of columns in the table).

Вот мои запросы:

Запрос1:

 #region Total Hours Per Month sick

        var querythpmsick = (from r in db.SickLeaveRequestForms
                            where r.EmployeeID == id
                            group r by r.MonthOfHoliday into g
                            select new { Value = g.Key, Count1 = g.Sum(h => h.SickLeaveTaken) }
                           ).OrderBy(e => e.Value);


        var resultthpmsick = querythpmsick.ToList();

        var datachartthpmsick = new object[resultthpmsick.Count];
        int Q = 0;
        foreach (var i in resultthpmsick)
        {
            datachartthpmsick[Q] = new object[] { i.Value.ToString(), i.Count1 };
            Q++;
        }
        string datathpmsick = JsonConvert.SerializeObject(datachartthpmsick, Formatting.None);
        ViewBag.datajthpmsick = new HtmlString(datathpmsick);

        #endregion

Запрос 2:

  #region Total Hours Per Month
        var querythpmpro = (from r in db.HolidayRequestForms
                            where r.EmployeeID == id
                            group r by r.MonthOfHoliday into g
                            select new { Value = g.Key, Count = g.Sum(h => h.HoursTaken) }
                           ).OrderBy(e => e.Value);


        var resultthpmpro = querythpmpro.ToList();

        var datachartthpmpro = new object[resultthpmpro.Count];
        int S = 0;
        foreach (var i in resultthpmpro)
        {
            datachartthpmpro[S] = new object[] { i.Value.ToString(), i.Count };
            S++;
        }
        string datathpmpro = JsonConvert.SerializeObject(datachartthpmpro, Formatting.None);
        ViewBag.datajthpmpro = new HtmlString(datathpmpro);

        #endregion

И, наконец, мой Javascript:

 <script>
var datathpmpro = '@ViewBag.datajthpmpro';
var datassthpmpro = JSON.parse(datathpmpro);

var datathpmsick = '@ViewBag.datajthpmsick';
var datassthpmsick = JSON.parse(datathpmsick);

 <script type="text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChartA);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChartA() {

    // Create the data table.

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Value');
    data.addColumn('number', 'Count');
    data.addColumn('number', 'Count1');
    data.addRows([[datassthpmpro], [datassthpmsick]]);


    // Set chart options
    var options = {
        'title': 'Holiday Hours Taken Per Month',
        'width': 600,
        'height': 350,
        'hAxis': {title: 'Month Number'},
        'vAxis': {title: 'Holiday Hours Taken'},
        'is3D': true,
        'legend': 'none'
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.ColumnChart(document.getElementById('chartTHPMpro_div'));
    chart.draw(data, options);
}

Мне бы хотелось, чтобы я мог сравнить два запроса натот же график.Есть ли способ обойти эту ошибку?Должно ли это быть два разных запроса, чтобы работать?

Answer 1

каждый из ваших запросов состоит из двух столбцов,
но таблица данных Google имеет три столбца,
так что это не сработает.

вам нужно будет создать две отдельные таблицы данных,
затем используйте метод join () , чтобы объединить их в один.

var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Value');
data1.addColumn('number', 'Count');
data1.addRows([datassthpmpro]);

var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Value');
data2.addColumn('number', 'Count1');
data2.addRows([datassthpmsick]);

var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

затем используйте объединенную таблицу данных, чтобы нарисовать диаграмму ...

chart.draw(joinedData, options);