CSV format for Pie Chart

[lunarbaby]

Hi All,

I am trying to create a pie chart using an external csv file and have been unsuccessful so far. I copied a sample that creates a bar chart via an external csv, and that works fine. So i'm wondering if i'm formating the csv incorrectly. Here is the contents of piedata.csv file:

Code: Select all

Bridge Construction,24
Bridge Other,42
Highway Paving,67

And here is the code i'm using on my page:

Code: Select all

var options = {
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'pie'
				},
				title: {
					text: 'Projects'
				},
				plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
								}
							}
						}
					},
					colors: [
						'#4572A7', 
						'#AA4643',						
						'#DB843D'						
					],
				series: [{
						type: 'pie',
						name: 'Projects',
						data: []
					}]
			};
			$.get('piedata.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);
});

Thanks very much for your help.
Trish

[SOMR]

Can you try this one instead of you each(lines...):

Code: Select all

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

            var series = {
                data: []
            };
			
            series.data.push({
				name:items[0],
				y:parseFloat(items[1])
			});
            
			options.series.push(series);       
    });

Just for the hint a pie chart have basically two informations per "series", a name and a data. So don't need much to set a pie chart

[lunarbaby]

Thanks SOMR - The chart is actually showing! Unfortunately, it's only showing one series out of the three in the csv file :

chart.png (13.03 KiB) Viewed 7835 times

When i hover over the pie, the tooltip says: "Highway Paving: x = Highway Paving, y = 67".

Really appreciate your help.
Trish

[SOMR]

I made a mistake in my code, I add only the last set of Data:

This one should be better :

Code: Select all

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

            
         
            series.data.push({
				name:items[0],
				y:parseFloat(items[1])
			});
		   
         options.series.push(series);       
		});   

[lunarbaby]

Thanks for your quick reply. I applied the change and got this:

chart2.png (8.07 KiB) Viewed 7587 times

Here is the full code:

Code: Select all

 var options = {
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'pie'
				},
				title: {
					text: 'Projects'
				},
				plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
								}
							}
						},
						showInLegend: true,
							size: 350
					},
					legend: {
						align: 'right',
						width: 300,
						verticalAlign: 'top',
						x: 0,
						y: 100,
						layout: 'vertical',
						itemStyle: {
							height: '25px'
						},
						labelFormatter: function() {
							 return this.name +', <strong>'+ this.y +'</strong>';
						}
					},
					colors: [
						'#4572A7', 
						'#AA4643',						
						'#DB843D'						
					],
				series: [{
						type: 'pie',
						name: 'Projects',
						data: []
					}]
			};
			$.get('piedata.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');
    var series = {
                data: []
        };
        // Iterate over the lines and add categories or series
      $.each(lines, function(lineNo,line) {
        var items = line.split(',');           
         
            series.data.push({
            name:items[0],
            y:parseFloat(items[1])
         });
         
         options.series.push(series);       
      });   
    
    // Create the chart
    var chart = new Highcharts.Chart(options);
});

Is my csv file in the correct format?

Code: Select all

Bridge Construction,24
Bridge Other,42
Highway Paving,67

Thanks again for your help.

[SOMR]

I made the same error twice lol :

Code: Select all

<div id="container"></div>
<script type="text/javascript">

    var options = {
                chart: {
                   renderTo: 'container',
                   defaultSeriesType: 'pie'
                },
                title: {
                   text: 'Projects'
                },
                plotOptions: {
                      pie: {
                         allowPointSelect: true,
                         cursor: 'pointer',
                         dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                               return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
                            }
                         }
                      }
                   },
                   colors: [
                      '#4572A7',
                      '#AA4643',                  
                      '#DB843D'                  
                   ],
				   series : []
             };
             $.get('piedata.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
        var series = {
                data: []
        };
        // Iterate over the lines and add categories or series
		$.each(lines, function(lineNo,line) {
        var items = line.split(',');
				
            series.data.push({
				type:'pie',
				name: items[0],
				y:parseFloat(items[1])
			});
		});
		options.series.push(series);
        // Create the chart
        var chart = new Highcharts.Chart(options);
    });

</script>

[lunarbaby]

I copied the code (minus the div tag) and placed it in the head of the page and it produced the same results - i noticed that you had the container div included, so i deleted the code out of the head and placed it within the body of the page and it produced the same result:

chart3.png (7.63 KiB) Viewed 7579 times

Not sure what i might be missing....

Appreciate your time.

[SOMR]

Maybe because you placed this code before the div is created make a problem :

You should enclose all the Js code in a ready document Jquery function :

Code: Select all

$.(
    var options = {
                chart: {
                   renderTo: 'container',
                   defaultSeriesType: 'pie'
                },
                title: {
                   text: 'Projects'
                },
                plotOptions: {
                      pie: {
                         allowPointSelect: true,
                         cursor: 'pointer',
                         dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                               return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
                            }
                         }
                      }
                   },
                   colors: [
                      '#4572A7',
                      '#AA4643',                 
                      '#DB843D'                 
                   ],
               series : []
             };
             $.get('piedata.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
        var series = {
                data: []
        };
        // Iterate over the lines and add categories or series
      $.each(lines, function(lineNo,line) {
        var items = line.split(',');
            
            series.data.push({
            type:'pie',
            name: items[0],
            y:parseFloat(items[1])
         });
      });
      options.series.push(series);
        // Create the chart
        var chart = new Highcharts.Chart(options);
    });
);

[lunarbaby]

Well, I'm afraid still no success. Thanks very much for your help.

[jacwright]

Maybe because you placed this code before the div is created make a problem :

You should enclose all the Js code in a ready document Jquery function :

Code: Select all

$.(
 ...
);

Typo? That is not valid Javascript. You'll want to wrap your code in

Code: Select all

$(function() { ... });

This works for me in the head script:

Code: Select all

$(function() {
	var options = {
		chart: {
			renderTo: 'container',
			defaultSeriesType: 'pie'
		},
		title: {
			text: 'Projects'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					color: '#000000',
					connectorColor: '#000000',
					formatter: function() {
						return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
					}
				}
			}
		},
		colors: [
			'#4572A7',
			'#AA4643',                  
			'#DB843D'                  
		],
		series : []
	};
	
	$.get('piedata.csv', function(data) {
		// Split the lines
		var lines = data.split('\n');
		var series = {
			data: []
		};
		
		// Iterate over the lines and add categories or series
		$.each(lines, function(lineNo,line) {
			var items = line.split(',');
			
			series.data.push({
				type:'pie',
				name: items[0],
				y:parseFloat(items[1])
			});
		});
		
		options.series.push(series);
		// Create the chart
		var chart = new Highcharts.Chart(options);
	});
});

[jacwright]

Ha!! lunarbaby, I figured out your problem. You have an extra newline at the end of your csv file. Remove that extra line and everything will work beautifully. Or alternately, you can add: if (line == "") return; to your $.each method.

[lunarbaby]

Doy! and what's even funnier is that i took that extra space out....but in the wrong file!

Thanks to all of you for your time and effort! I even still have a few hairs left!

Take care,
Trish