Pie-donut using .csv

0
votes

I need to do something like this: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

I've been trying for some time and have not achieved my goal. The data that I'll be using need to come from this URL https://rawgit.com/guilhermeramos816/accenture/master/poli-piegraph-mar15.csv. After some googling I found some simple examples that helped me a lot, but still haven't figured it out.

What I got now is something like this:

$(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('https://rawgit.com/guilhermeramos816/accenture/master/testi.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: 'bar',
            name: items[0],
            y: parseFloat(items[1])
        });
    });

    options.series.push(series);
    // Create the chart
    var chart = new Highcharts.Chart(options);
});
1
javascriptjquerycsvhighchartsbusiness-intelligence
Your code pretty well after you add the last }); :-) fiddle – Core972

1 Answers

0
votes

Your data needs to be preprocessed so that there're 2 series: first with accumulated values for each main category (inner pie) and second with all the points (outer pie):

var lines = data.split('\n'),
    mainData = [], // main data - inner pie
  subData = [], // sub data - outer pie
  colorI = -1, 
  prevCat,
  colors = Highcharts.getOptions().colors;


for(var i = 1; i < lines.length  - 1; i++) {
    var line = lines[i].split(',');

  // value
  line[2] = parseFloat(line[2]);

  if(line[0] !== prevCat) {
    // create new main category (data point))
    colorI++;

    mainData.push({
      y: line[2],
      name: line[0],
      color: colors[colorI]
    });

  } else {
    // accumulate data in the last main category (data point)
    mainData[mainData.length - 1].y += line[2];
  }

    // add sub point
  subData.push({
    y: line[2],
    name: line[0] + ': ' + line[1],
    color: colors[colorI]
  });

  prevCat = line[0];
}

Live demo: http://jsfiddle.net/kkulig/au1enef8/