Highcharts chart not displaying data from csv file

Question

I am working on a project that is supposed to take csv data that is being written in real time and display it on an html page. I am using Javascript, and the JQuery, HighCharts, and PapaParse libraries.

Here is my JSFiddle with my code: https://jsfiddle.net/m5n8xdo9/3/

I know it doesn't look right, but I don't know how to make it look like it looks on my computer. Should I use a different hosting site?

When I hardcode dummy data into the chart like this:

//Altitude
    $(function () {
        $('#altGraph').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Payload Altitude'
            },
            subtitle: {
                text: 'Altitude (m) vs. Time (s)'
            },
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            yAxis: {
                title: {
                    text: 'Altitude (m)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Altitude',
                data: //dummy data here
            }]
        });
    });

it all works and looks nice. But when I use papaparse to parse the csv into arrays of data, and pass an array of data to the corresponding chart like so:

//Altitude
    $(function () {
        $('#altGraph').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Payload Altitude'
            },
            subtitle: {
                text: 'Altitude (m) vs. Time (s)'
            },
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            yAxis: {
                title: {
                    text: 'Altitude (m)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Altitude',
                data: altitude
            }]
        });
    });

the charts show up blank.

On my computer, after you choose a file the charts show up, though empty of data points. That's my problem. I was thinking that maybe since the charts are written to the page before the data is uploaded, that would be why the data isn't showing up. I am currently at a loss as to how to fix this.

So all you are changing is the altitude data? Then please provide an example of how that data looks. Also, anything in console? — Halvor Holsten Strand
the example data is in the jsfiddle link. The altitude data should come from a csv file, and not hardcoded. — YazanLpizra

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2015-03-17T12:37:47

The problem is that your papaParse convert values to strings in array, instead of numbers. See "dynamicTyping" parameter and then set it as true.

Highcharts chart not displaying data from csv file

1 Answers