CODEWITHSUNDEEP
javascriptcsvhighcharts
Miles Gl
Miles Gl

Reputation: 45

Highcharts adding additional blank series from csv

I am learning JavaScript and have some programming knowledge and can generally work things out eventually, but I am stuck on a problem with highcharts.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'line'
                    },
                    title: {
                        text: 'Betting Performance'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Yield (%)'
                        }
                    },
                    series: []
                };

                /*
                 Load the data from the CSV file. This is the contents of the file:

                 Apples,Pears,Oranges,Bananas,Plums
                 John,8,4,6,5
                 Jane,3,4,2,3
                 Joe,86,76,79,77
                 Janet,3,16,13,15

                 */
                $.get('data.csv', function(data) {
                    // Split the lines
                    var lines = data.split('\n');
                    $.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);

                        }

                    });
                    var chart = new Highcharts.Chart(options);
                });
            });
        </script>
    </head>
    <body>
        <!-- 3. Add the container -->
        <div id="container" style="width: 1200px; height: 800px; margin: 0 auto"></div>
    </body>
</html>

Now, I have managed to get this working and attached a screenshot below.

enter image description here But as you can see at the bottom there is a Series called 'Series 3'

Next is my CSV file as plaintext

,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42 Miles,-100,-100,-100,-58.75,-31,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,28.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48 Miles 2,-100,-100,-100,-58.75,-22,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,48.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48

This plots out fine to the chart as you can see in the image. I made two sets of data to highlight that multiple series' work and that having one series wasn't the issue. All the data points were plotted from number 1-42 with appropriate y value.

I have no idea where the extra series came from and why. I have followed the highcharts demo as much as I could but I am now lost.

Upvotes: 0

Views: 471

Answers (1)

Miles Gl
Miles Gl

Reputation: 45

As posted in the comments by jack R Abbit, excel adds whitespace at the end of a CSV. god knows why. deleting that whitespace fixed the problem, hunky dory! thanks again for those who helped and hopefully someone else will come across this and get helped out too.

regards

miles

Upvotes: 1

Related Questions