CODEWITHSUNDEEP
javascriptc#asp.net-mvcgoogle-visualization
Conor8630
Conor8630

Reputation: 345

Google Charts Problem with loading multi column chart

I am attempting to create a multi column chart with google visualization, I am using two querys for this but it's not working.

I get the following error in the console: 

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

Here is my querys:

Query1:

 #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

Query 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

And Finally my 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);
}

I'd like it so I can compare the two querys on the same chart. Is there a work around for this error? Does it have to be two different querys in order to work?

Upvotes: 1

Views: 354

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

each of your queries has two columns,
but the google data table has three columns,
so that's not going to work.

you'll need to create two separate data tables,
then use the join() method to combine them into one. 

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]);

then use the joined data table to draw the chart... 

chart.draw(joinedData, options);

Upvotes: 1

Related Questions