Question

I need to create the column chart/Bar chart using CSV data. Here’s the data’s format:

A 156600 154965  45679  184736 160819 42329
B 7271   4537    5379   245    0      1941
C 4347   19143   1075   397    6860   0
D 15     11283   1477   0      0      0
E 6323   537697  222430 21701  98725  3792
F 0      0       0      0      0      0
G 284356 744986  616369 0      0      106877
H 0      0       0      0      0      0
I 0      0       0      32962  0      0
J 0      12742   616    0      0      0
K 0      1215413 1420   0      0      0
L 0      0       0      0      0      0
M 24191  50166   18163  55282  48262  5862
N 0      0       0      0      0      20396

Here I will add the X- axis categories manually. So, I want to create the chart like
the one seen here

I made this:

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Total Transactions'
        },
        xAxis: {
           categories: [],labels : { y : 20, rotation: -45, align: 'right' }
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        series: []
    };

    $.get('data.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
                var series = { 
                    name: 'Transactions ',
                    data: []
                };
        $.each(lines, function(lineNo, line) {

            var items = line.split(',');
            if (lineNo != 0) {
                $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            options.xAxis.categories.push(item);
                        } else if (itemNo == 2){

                            series.data.push(parseFloat(item));
                        }
                });
            }

        });
        options.series.push(series);
        var chart = new Highcharts.Chart(options);
    });

});

But it’s taking the column wise value means:

156600
7271    
4347    
15  
6323    
0   
284356
0   
0   
0   
0   
0   
24191   
0   

But I need this instead:

• For A (like Jan), the value should be

  156600 154965 45679 184736  160819  42329
  

• For B (Like Feb), another column should have the values:

  7271 4537   5379    245 0   1941
  

Can you please help me out?

Answer 1

The way you have it now you will end up with 14 series each containing 6 data points. What you really need to do if you can is alter the csv file so that your columns represent the month and the rows represent the series like so:

Then you can create a array for each row and pass the array to the highchart. I think your code should work with the above csv structure, since you are performing the split based on \n.

EDIT

If you can not change the format of your CSV file then the below modified code should build the 6 series as you need them. It assumes that there is no headers for the columns or the rows. It also ignores the last two rows which extend beyond the 12 months of a year.

$.get('data.csv', function(data) {
  var lines = data.split('\n');
  var series1 = {name: 'India', data: []};
  var series2 = {name: 'China', data: []};
  var series3 = {name: 'Australia', data: []};
  var series4 = {name: 'Shreelanka', data: []};
  var series5 = {name: 'US', data: []};
  var series6 = {name: 'Cuba', data: []};

  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    //IGNORE THE LAST TWO ROWS
    if (lineNo < 12) {
      $.each(items, function(itemNo, item) {
        if (itemNo == 0) {
          series1.data.push(parseFloat(item)); 
        } else if (itemNo == 1){
          series2.data.push(parseFloat(item));
        } else if (itemNo == 2){
          series3.data.push(parseFloat(item));
        } else if (itemNo == 3){
          series4.data.push(parseFloat(item));
        } else if (itemNo == 4){
          series5.data.push(parseFloat(item));
        } else if (itemNo == 5){
          series6.data.push(parseFloat(item));
        }
      });
    }
  });
  options.series.push(series1);
  options.series.push(series2);
  options.series.push(series3);
  options.series.push(series4);
  options.series.push(series5);
  options.series.push(series6);
  var chart = new Highcharts.Chart(options);
});