HighCharts with Dynamic Data not working

Question

I have a ASP.NET MVC project with SignalR.

I have a page with a HighChart and the script looks like this:

$(function () {
window.Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

var chart;

$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 10
        },
        title: {
            text: 'GMAS Queues'
        },
        xAxis: {
            type: 'datetime',
            tickInterval: 500,
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Queue Count'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Processing Queues'
        }]
    });

});

$.connection.hub.logging = true;
// Reference the auto-generated proxy for the hub.  
var chartData = $.connection.processingQueuesHub;
// Create a function that the hub can call back to display messages.
chartData.client.updateQueueCounts = function (data) {
    //$.each(data, function(i, item) {
    //    // Add the message to the page. 
    //    $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName)
    //        + '</strong>: ' + htmlEncode(item.Length) + '</li>');
    //});
    // set up the updating of the chart.
    var series = chart.series[0];

    $.each(data, function (i, item) {
        if (item.QueueName == "Queue A") {
            var x = Date.parse(item.Date), 
            y = item.Length;

            series.addPoint([x, y], true, false);
        }
    });


};

However, I see the graph but not the points. The strange part is the series data points are there:

Anyone know why HighCharts is not rendering the points?

Thanks, Bill N

Answer 1

It looks like you are not defining what your chart.series is until it is created. The line in your ajax is as follows and its not waiting for DOM ready:

var series = chart.series[0];

But you do not define chart until $(document).ready(function () {.... Try keeping your chart object in scope of your ajax.

Answer 2

I have to thank my good friend and co developer for figuring this out. He is a smarter and braver man than me. :) He went to the highcharts source and found that the highcharts breaks if you add to the graph series before the initial animation is completed. The animation is why the clip-rect is zero-width (it animates from zero to full width over 1s when you first create the chart). You end up adding a point to the series before this animation even really starts. This kills the animation but it doesn’t fix the width of the clip-rect. The fix is to add animation is false for the series.

series: [{ name: 'Processing Queues', data: [], animation: false }]