CODEWITHSUNDEEP
javascriptjqueryhighcharts
Bic1245
Bic1245

Reputation: 127

Processing CSV: Highcharts

I've just started using the Highcharts JavaScript plugin, but after following the documentation on the Highcharts website I just can't seem to get my CSV file to load correctly. The graph generates, and it does read the CSV, as the data is loaded, but instead of loading the data directly into the graph, and creating a line from the data, it just pushes all the data into the series section at the bottom. Here's my code:

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },
    title: {
        text: 'wavenumber'
    },
    xAxis: {
            categories: []
    },
    yAxis: {
        title: {
            text: '% Transmission'
        }
    },
    series: []
};

$.get('1_phenol.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
});
        </script>

Then, just to give you an idea of what my CSV file looks like, here's a few lines:

phenol
,
,
,
,
,
,
,
,
,
,
605,53.527874
610,53.527874
615,51.276432
620,57.655518
625,59.90696
630,61.032677
635,62.158401
640,62.908882
645,62.908882

So if you guys have any idea how I can adapt the code to load the CSV into the correct area of the container that'd be awesome. Thanks!

Upvotes: 0

Views: 1542

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

I suggest to familiar with article http://docs.highcharts.com/#preprocesssing-data-from-a-file about parsing data.

Have you csv in the same directory as page or in external server ?

Upvotes: 0

Related Questions