Signal R. Uncaught TypeError：无法读取属性＆＃39; chartHub＆＃39;未定义的

Question

我正在尝试使用随机数创建实时折线图，遵循本教程：

http://www.c-sharpcorner.com/uploadfile/jj12345678910/real-time-chart-using-signalr-and-chart-js/

我的代码是这样的：

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/Chart.min.js" type="text/javascript"></script>


    <script src="Scripts/jquery-ui-1.8.20.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="/signalr/hubs"></script>
<script>
    function checkHTML5() {
        var canvasForLineChart = document.getElementById("canvasForLineChart");
        if (canvasForLineChart == null || canvasForLineChart == "") {
            document.write("Browser doesn't support HTML5 2D Context");
            return false;
        }
        if (canvasForLineChart.getContext) {

        }
        else {
            document.write("Browser doesn't support HTML5 2D Context");
            return false;
        }
    }

    $(function () {
        //If not HTML5 Support the Exit
        if (checkHTML5() == false) return;

        //Create the Hub
        var chartHub = $.connection.chartHub;


        //Call InitChartData 
        $.connection.hub.start().done(function () {            
            chartHub.server.initChartData();

        });

        //Call to Update LineChart from Server
        chartHub.client.updateChart = function (line_data,pie_data) {
            UpdateLineChart(line_data);  //Call the LineChart Update method
            UpdatePieChart(pie_data);     //Call the PieChart Update method
        };


    });
</script>

此行的代码失败：

  var chartHub = $.connection.chartHub

出现此错误：

Index:68 Uncaught TypeError: Cannot read property 'chartHub' of undefined

我的charthub.cs

  public class ChartHub : Hub
    {
        // Create the instance of ChartDataUpdate    
        private readonly ChartDataUpdate _ChartInstance;
        public ChartHub() : this(ChartDataUpdate.Instance) { }

        public ChartHub(ChartDataUpdate ChartInstance)
        {
            _ChartInstance = ChartInstance;
        }

        public void InitChartData()
        {
            //Show Chart initially when InitChartData called first time    
            LineChart lineChart = new LineChart();
            lineChart.SetLineChartData();
            Clients.All.UpdateChart(lineChart);


            //Call GetChartData to send Chart data every 5 seconds    
            _ChartInstance.GetChartData();

        }

    }

mychartbroadcaster.cs

 public class Chart_Broadcaster
    {
        public class RandomNumberGenerator
        {
            static Random rnd1 = new Random();
            static public int randomScalingFactor()
            {

                return rnd1.Next(100);
            }
            static public int randomColorFactor()
            {

                return rnd1.Next(255);
            }
        }
        //The Line Chart Class    
        public class LineChart
        {
            [JsonProperty("lineChartData")]
            private int[] lineChartData;
            [JsonProperty("colorString")]
            private string colorString;

            public void SetLineChartData()
            {
                lineChartData = new int[7];
                lineChartData[0] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[1] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[2] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[3] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[4] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[5] = RandomNumberGenerator.randomScalingFactor();
                lineChartData[6] = RandomNumberGenerator.randomScalingFactor();

                colorString = "rgba(" + RandomNumberGenerator.randomColorFactor() + "," + RandomNumberGenerator.randomColorFactor() + "," + RandomNumberGenerator.randomColorFactor() + ",.3)";
            }
        }

    }
    public class ChartDataUpdate
    {

        // Singleton instance    
        private readonly static Lazy<ChartDataUpdate> _instance = new Lazy<ChartDataUpdate>(() => new ChartDataUpdate());
        // Send Data every 5 seconds    
        readonly int _updateInterval = 5000;
        //Timer Class    
        private Timer _timer;
        private volatile bool _sendingChartData = false;
        private readonly object _chartUpateLock = new object();
        LineChart lineChart = new LineChart();

        private ChartDataUpdate()
        {

        }

        public static ChartDataUpdate Instance
        {
            get
            {
                return _instance.Value;
            }
        }

        // Calling this method starts the Timer    
        public void GetChartData()
        {
            _timer = new Timer(ChartTimerCallBack, null, _updateInterval, _updateInterval);

        }
        private void ChartTimerCallBack(object state)
        {
            if (_sendingChartData)
            {
                return;
            }
            lock (_chartUpateLock)
            {
                if (!_sendingChartData)
                {
                    _sendingChartData = true;
                    SendChartData();
                    _sendingChartData = false;
                }
            }
        }

        private void SendChartData()
        {
            lineChart.SetLineChartData();
            GetAllClients().All.UpdateChart(lineChart);

        }

        private static dynamic GetAllClients()
        {
            return GlobalHost.ConnectionManager.GetHubContext<ChartHub>().Clients;
        }

    }