Line graph disappears after new line is added

Posted by tonystinge on Stack Overflow See other posts from Stack Overflow or by tonystinge
Published on 2014-06-10T22:04:28Z Indexed on 2014/06/11 9:25 UTC
Read the original article Hit count: 169

Filed under:
|
|

I am having trouble uploading a large .csv file to my HIGHCHART graph. I've been able to graph an 85KB up to 1486 lines by 9 (I) columns. Here is an example:

TimeStamp Temp_1_01 Temp_1_02 Temp_2_01 Temp_2_02 Temp_3_01 Temp_3_02 Temp_4_01 Temp_4_02
5/15/2014, 3:25 408 487 63  84  67  91  63  78
5/15/2014 3:30  408 487 63  84  67  91  63  78
5/15/2014 3:35  407 489 63  84  67  91  63  78
5/15/2014 3:40  408 488 63  84  67  91  63  78
5/15/2014 3:44  408 488 63  84  67  91  63  78
...
5/22/2014 9:40  483 421 0   93  76  95  72  89

When I add a new line the line graph disappears. Any suggestions?

Here is the javascript:

 $.get('Dropbox/geo/sites/GC_Room/loveland.csv', function(data)
       {
          // Split the lines
          var lines = data.split('\n');
          var i = 0;
          var csvData = [];





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

             i = i + 1;

          });


          var columns = csvData[0];

          var categories = [], series = [];


          for(var colIndex=0,len=columns.length; colIndex<len; colIndex++)
          {
             //first row data as series's name
             var seriesItem=
             {
                data:[],
                name:csvData[0][colIndex]
             };

             for(var rowIndex=1,rowCnt=csvData.length; rowIndex<rowCnt; rowIndex++)
             {
                //first column data as categories,
                if (colIndex == 0)
                {
                   categories.push(csvData[rowIndex][0]);
                }
                else if(parseFloat(csvData[rowIndex][colIndex])) // <-- here
                {
                   seriesItem.data.push(parseFloat(csvData[rowIndex][colIndex])); 
                }
             };
             //except first column
             if(colIndex>0)series.push(seriesItem);
          }         



          // Create the chart
          var chart = new Highcharts.Chart(
          {
             chart:
             {
                alignTick: false,
                renderTo: 'LANE_METALS',
                type: 'line'

             },
             title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: LANE METALS',
                    x: -20
                },



             xAxis: 
             {  
                categories: categories,
                labels:

               {
                  step: 200,
                   text: 'Time',
                },
                tickWidth: 0
             },
             yAxis: 
             {
                        title: {
                        text: 'Temperature (\xB0C)'
                    },
                min: 0
             },
             tooltip:
             {
                formatter: function()
                {
                   return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'\xB0C';
                }
             },
             legend:
             {
                layout: 'vertical',
                //backgroundColor: '#FFFFFF',
                //floating: true,
                align: 'left',
                //x: 100,
                verticalAlign: 'top',
                //y: 70,
                borderWidth: 0
             },

             plotOptions:
             {
                area:
                {
                   turboThreshold: 0,
                   stacking: 'normal',
                   lineColor: '#666666',
                   lineWidth: 1,
                   marker:
                   {
                      lineWidth: 1,
                      lineColor: '#666666'
                   }
                }
             },
             series: series
          });

       });      

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about csv