HighCharts Not Adding Series Data Points

Question

I'm having some big trouble with trying to dynamically change data based on date for highcharts. For a better understanding of my program, it logs system data with a timestamp. I have a date and time picker to specify starting and ending date / time to get new data. This gets passed to PHP via JS and Ajax and sends back XML. Javascript then parses the XML into new data for the chart.

As a note, I have tried both removing all series and even tried destroying the chart completely but for some reason I cannot get it to add series points back into the chart. Another note is that I use a JS function to generate the chart.

Here is the JS that uses Ajax:

function LoadNewCPUData(fromdate, todate, serverid) {
    var chart = $('#cpuContainer').highcharts().series[0].remove();
    $.ajax({
        type : "GET",
        url : "js/ajax.php?page=cpudata&fromdate=" + encodeURIComponent(fromdate) + "&todate=" + encodeURIComponent(todate) + "&serverid=" + serverid,
        dataType : "xml",
        success : function(xml) {
            var cpudata = [];
            var timestamps = [];
            $(xml).find('cpudata').each(function() {
                cpudata.push($(this).attr('cpu'));
                var t = $(this).attr('timestamp').split(/[- :]/);
                var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
                timestamps.push(formatDate(d));
            });
            GenerateCPU(timestamps, cpudata);
        }
    });
}

As you can see the function parses the xml data into two arrays (timestamp and cpudata) and then sends it off to GenerateCPU. formatDate is defined in another function. I can show it if needed, however I don't believe it is relevant (more on that below). Here is GenerateCPU:

function GenerateCPU(times, cpuInfo) {
        $('#cpuContainer').highcharts({
            chart : {
                type : 'line'
        },
        credits : {
            enabled : false
        },
        title : {
            text : 'CPU Usage'
        },
        tooltip : {
            valueSuffix : '%'
        },
        xAxis : {
            categories : times
        },
        yAxis : {
            title : {
                text : 'CPU Usage',
            },
            tickInterval : 1,
            min : 0,
            max : 100
        },
        series : [{
            name : 'CPU Usage',
            data : cpuInfo
        }]
    });
}

The weird part of the whole thing is that the chart shows the correct data for the xAxis (which is defined in the parameters of GenerateCPU). However no matter what I do I can't get it to show series data. I have also tried chart.addSeries but that too doesn't work. The cpudata array HAS data both before it sends it to GenerateCPU and while in GenerateCPU. Just to show it, here is an example of the XML:

<cpuinfo>
    <cpudata timestamp="2015-08-06 20:20:31" cpu="15"/>
</cpuinfo>

I'm hoping that this isn't too long and somebody can give it a read. Anybody have any ideas of what I am doing wrong?

Thank you!

Try to use Date.UTC() and let me know how your times, cpuInfo variables, look like. — Sebastian Bochan
Thanks for your response. I don't believe it to be the dates as when I modify the data, the dates show up properly. Please see video monitoring.kbnetwork.ca/Video1.mp4. Dates will update when button is pressed. As for the variables, since they're in an array I'll put the array here in a PasteBin. Timestamps: pastebin.com/PZDSmyFP - cpudata: pastebin.com/rDUU68Eg. There is no difference in data from when the page loads and when I click the "Load Data" button. — user2416047
In your data time are incorrect, because should be timestamp (time in miliseconds). — Sebastian Bochan

Kabulan0lak Kabulan0lak · Accepted Answer · 2015-08-07T08:12:56

If the first chart displays correctly, before you try to update data, the problem may come from the redefining of the chart. I would suggest you to use the update() function of Highcharts to dynamically update the series and xAxis.

EDIT

So what your code would become :

function LoadNewCPUData(fromdate, todate, serverid) {
    $.ajax({
        type : "GET",
        url : "js/ajax.php?page=cpudata&fromdate=" + encodeURIComponent(fromdate) + "&todate=" + encodeURIComponent(todate) + "&serverid=" + serverid,
        dataType : "xml",
        success : function(xml) {
            var cpudata = [];
            $(xml).find('cpudata').each(function() {
                var t = $(this).attr('timestamp').split(/[- :]/);
                var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
                cpudata.push({name: formatDate(d), y: parseInt($(this).attr('cpu'))});
            });
            GenerateCPU(cpudata);
        }
    });
}

And you GenerateCPU function becomes:

function GenerateCPU(cpuInfo) {
        $('#cpuContainer').highcharts({
            chart : {
                type : 'line'
        },
        credits : {
            enabled : false
        },
        title : {
            text : 'CPU Usage'
        },
        tooltip : {
            valueSuffix : '%'
        },
        xAxis : {
            type: 'category'
        },
        yAxis : {
            title : {
                text : 'CPU Usage',
            },
            tickInterval : 1,
            min : 0,
            max : 100
        },
        series : [{
            name : 'CPU Usage',
            data : cpuInfo
        }]
    });
}

Does this give you a different result ?

RE-EDIT

Your error 14 is thrown because you pass string instead of numbers. Use the function parseInt() like above to avoid it. (Or use parseFloat() if you have decimals)

HighCharts Not Adding Series Data Points

1 Answers