Highcharts.js will not render the chart, it says error "Cannot read property 'series' of undefined"

global, highcharts, javascript, series, undefined

Solution

Just place

var chart;

outside all functions, next to your document ready handler to make it global.

EDIT:

Also, add a reference inside the load call

load: function() {
    chart = this; // `this` is the reference to the chart
    requestData();
}

Problem

I think it is because my global `var chart` hasn't been set yet when my function `requestData` is called. This is my code of highcharts inside a `$(document).ready(function()` ``` chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'spline', marginRight: 130, marginBottom: 25, events: { load: requestData() } }, title: { text: 'Reporte PMU', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { type: 'datetime', tickPixelInterval: 150, maxZoom : 20 * 1000, title: { text: 'tiempo' }, labels : { y : 0, rotation: -60 } }, yAxis: { title: { text: 'Amount' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'serieTension', data: [] }] }); }); ``` and this is my `requestData ()` ``` $.ajax({ url: 'data2.php', success: function(point) { var series =chart.series[0], shift = series.data.length > 20; //shift if the series is longer than 20 //add point chart.series[0].addPoint(point, true, shift); setTimeout(requestData, 1000); }, cache : false }); } ```

Original source