пытается создать организационную диаграмму с помощью API Google, но, похоже, она не работает. Вроде Ajax код не стреляет

Question

Я пытаюсь создать организационную диаграмму с помощью API Google, но она не работает. Вроде Ajax код не стреляет. Я уверен, что контроллер получает данные из базы данных, потому что я видел их в выходных данных отладки. И я уверен, что мой javascript код срабатывает, потому что я попытался с некоторым предупреждением ("").

OrgaController.cs

    [HttpPost]
    public JsonResult DrawOrga()
    {
        List<Structure> StructList = new List<Structure>();

        string query = "SELECT code, name, depend FROM Structure";

        string connetionString = "Data Source=DESKTOP-*******\\SQLEXPRESS;Initial Catalog=****;Integrated Security=True";

        using (SqlConnection con = new SqlConnection(connetionString))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {

                        // Adding new Structure object to List
                        StructList.Add(new Structure()
                        {
                            Code = dr.GetInt32(0),
                            Name = dr.GetString(1),
                            Depend = dr.IsDBNull(2) ? 0 : dr.GetInt32(2)

                        });
                    }
                }
                con.Close();
            }
        }


        return Json(StructList);
    }

}

Structure.cs

namespace ANDA_FRONTEND.Models
{
    public class Structure
    {
        public Structure()
        {
        }

        public int Code { get; set; }
        public string Name { get; set; }
        public int Depend { get; set; }
    }
}

Здесь код должен запускаться и генерировать диаграмму. У меня есть ключ API

@model ANDA_FRONTEND.Models.Structure

@{
    ViewBag.Title = "Organigramme";
}


<h1>TEST</h1>
<div id="chart">
</div>
<button id="btnLoadChart" class="btn" onclick="drawChart()">Click Me</button>
@section scripts
{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?key=*************"></script>

    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        $('#btnLoadChart').click(function () {
            drawChart();
        });

        function drawChart() {
            $.ajax({
                type: "POST",
                url: "@Url.Action("Orga", "DrawOrga")",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert("test2");
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ParentEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < r.length; i++) {
                        var Code = r[i][0].toString();
                        var Name = r[i][1];
                        var Depend = r[i][2] != null ? r[i][2].toString() : '';
                        data.addRows([[{
                            v: Code,
                            f: Name
                        }, Depend]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    chart.draw(data, { allowHtml: true });
                },
                failure: function (r) {
                    alert(r);
                },
                error: function (r) {
                    alert(r);
                }
            });
        }
    </script>
}

Answer 1

сначала, www.google.com/jsapi больше не должен использоваться, он устарел.

новая версия -> https://www.gstatic.com/charts/loader.js

, это только изменит операторы load.

от ...

google.load("visualization", "1", { packages: ["orgchart"] });
google.setOnLoadCallback(drawChart);

до ...

google.charts.load("current", {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

проверьте примечания к выпуску ...

---

Далее вы добавляете три столбца в таблицу данных, здесь ...

var data = new google.visualization.DataTable();
data.addColumn('string', 'Entity');
data.addColumn('string', 'ParentEntity');
data.addColumn('string', 'ToolTip');

, но вы добавляете значения только для двух столбцов, здесь ...

for (var i = 0; i < r.length; i++) {
  var Code = r[i][0].toString();
  var Name = r[i][1];
  var Depend = r[i][2] != null ? r[i][2].toString() : '';
  data.addRows([[{
    v: Code,
    f: Name
  }, Depend]]);
}

вам нужно либо удалить столбец всплывающей подсказки,
, либо добавить значение для столбца ...

  data.addRows([[{
    v: Code,
    f: Name
  }, Depend, '']]);  // <-- blank tooltip column