Google Chart Debugging

Question

Я пытаюсь добавить новый график на страницу, где я уже успешно реализовал 4 других графика.

Я попытался добавить еще один с похожим кодом, но он не появится.Я отсканировал код и просто не вижу, где я иду не так.Мои данные содержатся в пакетах просмотра, которые я отлаживал, поэтому я знаю их там.

У меня возникли проблемы с графиком, помеченным как Общее количество часов в месяц.Я не думаю, что это проблема с данными, но, возможно, их рендеринг.

примечание: пожалуйста, простите большое количество кода.

код:

@using WebMatrix.Data;
@using System.Data;
@using HolidayTracker.Models;
@using System.Web.Helpers;

@{
ViewBag.Title = "Metrics";
}

    @*CHART A*@

    <script>
    //Status Count data from controller - Gary Doorhy 31 May 2017
    var data4 = '@ViewBag.dataj2';
    var datass3 = JSON.parse(data4);
    </script>

    <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(drawChart);

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

            // Create the data table.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Value');
            data.addColumn('number', 'Count');
            data.addRows(datass3);

            // Set chart options
            var options = {
                'title': 'Holiday Hours Per Site',
                'width': 550,
                'height': 350,
                'is3D': true,
                //legend: 'none'


            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart4_div'));
            chart.draw(data, options);
        }
    </script>

    @*Chart A Finish*@


    @*----------------------------------------------------------------*@


    @*CHART B*@

    <script>
        //In Progress by site chart
        var data6 = '@ViewBag.dataj5';
        var datass5 = JSON.parse(data6);
    </script>

    <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(drawChart);

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

            // Create the data table.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Value');
            data.addColumn('number', 'Count');
            data.addRows(datass5);

            // Set chart options
            var options = {
                'title': ' Sick Hours Per Site',
                'width': 550,
                'height': 350,
                'is3D': true,


            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
            chart.draw(data, options);
        }
    </script>

    @*Chart B Finish*@

    @*----------------------------------------------------------------*@


    @*HOLIDAY TRACKER CHART*@

    <script>
        //Closed Status by site chart
        var data8 = '@ViewBag.dataj7';
        var datass7 = JSON.parse(data8);
    </script>

    <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(drawChart);

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

            // Create the data table.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Value');
            data.addColumn('number', 'Count');
            data.addRows(datass7);

            // Set chart options
            var options = {
                'title': 'Hours Taken By Site AA',
                'width': 1000,
                'height': 500,
                'is3D': true,
                'legend': 'none'


            };

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

    @*HOLIDAY TRACKER CHART FINISH*@

    @*----------------------------------------------------------------*@


    @*Sick TRACKER CHART*@

    <script>
        //Closed Status by site chart
        var dataSickChart = '@ViewBag.datajsickbar';
        var datassSick = JSON.parse(dataSickChart);
    </script>

    <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(drawChart);

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

            // Create the data table.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Value');
            data.addColumn('number', 'Count');
            data.addRows(datassSick);

            // Set chart options
            var options = {
                'title': '',
                'width': 1000,
                'height': 500,
                'is3D': true,
                'legend': 'none'


            };

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

    @*Sick TRACKER CHART FINSIH*@

    @*----------------------------------------------------------------*@


    @*TOTAL HOURS PER MONTH CHART*@


    <script>
        var datathpm = '@ViewBag.datajthpm';
        var datassthpm = JSON.parse(datathpm);
    </script>

    <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(drawChart);

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

            // Create the data table.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Value');
            data.addColumn('number', 'Count');
            data.addRows(datassthpm);

            // Set chart options
            var options = {
                'title': '',
                'width': 1000,
                'height': 500,
                'is3D': true,
                'legend': 'none'
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chartTHPM_div'));
            chart.draw(data, options);
        }
    </script>

    @*TOTAL HOURS PER MONTH CHART FINISH*@

    @*----------------------------------------------------------------*@
    @*----------------------------------------------------------------*@
    @*----------------------------------------------------------------*@
    <center>
        <div class="row">
            <div class="col-md-12" style="padding:15px;  top:50px;">
                <div class="panel">
                    <div class="panel-heading" style="background-color:#F47B20">
                        <h4 style="color:white"><b>Total Hours Taken Per Month</b></h4>
                    </div>
                    <div id="chartTHPM_div"></div>
                </div>
            </div>
        </div>
    </center>

    <center>
        <div class="row">
            <div class="col-md-12" style="padding:15px; top:50px">
                <div class="panel">
                    <div class="panel-heading" style="background-color:#F47B20">
                        <h4 style="color:white">Pie Charts for Holiday and Sick Hours</h4>
                        <h6 style="color:white"> <i>Total Sites = @ViewBag.msg</i></h6>
                    </div>
                    <div class="panel-body">
                        <div class="col-md-6">
                            <div id="chart4_div" style="border-width:1px"></div>
                        </div>


                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="chart7_div"></div>
                                </div>
                                <div class="col-md-6">
                                    <div id="chart14_div"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="chart6_div"></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </center>

    <center>
        <div class="row">
            <div class="col-md-12" style="padding:15px;  top:50px;">
                <div class="panel">
                    <div class="panel-heading" style="background-color:#F47B20">
                        <h4 style="color:white"><b>Holiday Hours Taken Per Site</b></h4>
                    </div>
                    <div id="chart8_div"></div>
                </div>
            </div>
        </div>
    </center>

    <center>
        <div class="row">
            <div class="col-md-12" style="padding:15px; top:50px;">
                <div class="panel">
                    <div class="panel-heading" style="background-color:#F47B20">
                        <h4 style="color:white"><b>Sick Hours Taken Per Site</b></h4>
                    </div>
                    <div id="chart9_div"></div>
                </div>
            </div>
        </div>
    </center>

</body>

РЕДАКТИРОВАТЬ:

Я также добавлю свою часть контроллера для графика, который не работает на случай, если

контроллер:

  #region Total Hours Per Month

        var querythpm = from r in db.HoursPerMonths
                        select new { Count = r.HoursThisMonth, Value = r.Month };


        var resultthpm = querythpm.ToList();

        var datachartthpm = new object[resultthpm.Count];
        int Q = 0;
        foreach (var i in resultthpm)
        {
            datachartthpm[Q] = new object[] { i.Value, i.Count };
            Q++;
        }
        string datathpm = JsonConvert.SerializeObject(datachartthpm, Formatting.None);
        ViewBag.datajthpm = new HtmlString(datathpm);

        #endregion

Ошибка консоли:

Uncaught (in promise) Error: Type mismatch. Value 3 does not match type string in column index 0
at gvjs_Mo (jsapi_compiled_default_module.js:119)
at gvjs_Uba (jsapi_compiled_default_module.js:139)
at gvjs_R.gvjs_.h_ (jsapi_compiled_default_module.js:141)
at gvjs_R.gvjs_.eq (jsapi_compiled_default_module.js:142)
at drawChartA (Index:304)