ASP.net google charts

I am having difficulties to get google charts to work in ASP.NET Core MVC. When using the example from google it works fine (Source: https://developers.google.com/chart/interactive/docs/gallery/columnchart):

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

My problem is that my data has different lengths in columns, thus sticking to the example above I have sometimes ['Year', 'Sales'] or ['Year', 'Sales', 'Expenses'] and I am trying to make this plot dynamic. I am using Viewbag to pass around my data, thus I have made available my model with:

@{
   dataModel.ChartPlotData = ViewBag.ChartPlotData as ChartPlotData
}

I have defined a class holding my data:

public class ChartPlotData
{
   public List<List<object>> Data;
   public ChartPlotData() { Data = new List<List<object>>(); }
}

The data is filled via:

private ChartPlotData MockData()
{
   var retVal = new ChartPlotData();
   var line = new List<object>();
   line.Add("Time");
   line.Add("Test");
   retVal.Data.Add(line);

   line = new List<object>();
   line.Add("0:05");
   line.Add(0);
   retVal.Data.Add(line);
   line = new List<object>();
   line.Add("0:10");
   line.Add(1);
   retVal.Data.Add(line);
   return retVal;
}

Now I was trying to change the part in the plot data as:

var data = google.visualization.arrayToDataTable( @dataModel.ChartPlotData.Data )

It did not work. Next, I extended my class as:

public object[][] DataArray
{
 get
    {
    var tmpLst = new List<object[]>();
    foreach (var lstObj in Data)
    {
    tmpLst.Add(lstObj.ToArray());
    }
    return tmpLst.ToArray();
    }
}

Still no luck. I tried various other things by instantiating the data as

var data = new google.visualization.DataTable();

then tried adding columns and setting cells like

// Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');

but somehow I can not get it to work. Any help would be highly appreciated.

Edit: I tried this:

var data = google.visualization.arrayToDataTable([
                @for (var i = 0; i < 1; i++)
                {
                    <text> ['Time','Test'],['00:00',0],['00:05',1]  </text>
                }
                ]);

It works. But when I replace it with a string containing the list, it stops working:

var data = google.visualization.arrayToDataTable([
                @for (var i = 0; i < 1; i++)
                {
                    <text> @dataModel.dataAsString  </text>
                }
                ]);

I can now narrow it down to the following problem. This works fine:

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['bar'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable(
                @for (var i = 0; i < 1; i++)
                {
                   <text> [['Time', 'Test'], ['0:00', 0], ['0:05', 1]] </text>
                }
                );

            var options = {
                chart: {
                    title: 'Title',
                    subtitle: 'Some subtitle'
                }
            };

            var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

            chart.draw(data, google.charts.Bar.convertOptions(options));
        }
    </script>
</head>
<body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>

If I define a variable within my datamodel that includes exactly this string and replace

var data = google.visualization.arrayToDataTable(
                @for (var i = 0; i < 1; i++)
                {
                   <text> @dataModel.MyDataAsString </text>
                }
                );

it stops working.