Highcharts How to create a Grouped, stacked bar chart from csv file using javascript and the Highcharts API

I am a javascript newb and can’t quite wrap my head around how to create a grouped, stacked bar chart from a csv file using Highcharts API and javascript. I’ve asked this same question at the support forum at highcharts but haven’t gotten any takers yet. I’ve always had great luck here in finding answers. I’ve created the chart that i want here:

http://maine.gov/mdot/about/assets/hwy/charttest-hbar2.html.

  • d3 csv readin to objects in array
  • XML to CSV Conversion using Javascript
  • what is best way to return data to javascript from uploaded CSV file?
  • Loading Multiple CSV files in Javascript
  • Large CSV to JSON/Object in Node.js
  • D3.js Sequence Sunburst, change data on click
  • Here is the code for this chart with the series being created from within the highcharts api:

    var chart;
         $(document).ready(function() {
            chart = new Highcharts.Chart({
               chart: {
                  renderTo: 'container',
                  defaultSeriesType: 'bar'
               },
               title: {
                  text: 'Customer Service Levels'
               },
               xAxis: {
                  title:{
                     text: 'Highway Corridor Priority'                     
                  },
                  categories: ['1', '2', '3'],                  
                  labels: {
                        formatter: function() {
                            return  '<span style="font-weight:bold;color:#ed1c24;">'+this.value+'</span>  Safety<br/><br/>  Condition<br/><br/>  Service';
                         },
    
                      }
               },
               yAxis: {
                  min: 0,                  
                  title: {
                     text: 'Percent of Miles'
                  }
               },
               legend: {
                  backgroundColor: '#FFFFFF',
                  reversed: true
               },
               tooltip: {
                  formatter: function() {
                     return ''+
                          this.series.name +': '+ this.y +' mi';
                  }
               },
               plotOptions: {
                  series: {
                     stacking: 'percent'
                  }
               },
                    series: [
                  // for priority 1 corridor
                  {
                     name: 'D',
                     data: [304.69, 277.92, 139.94], // safety, condition, service
                     color: '#ff647f',
                     stack: 1
                  }, {
                     name: 'C',
                     data: [482.5, 499.04, 104.54], // safety, condition, service
                     color: '#0095c5',
                     stack: 1
                  }, {
                     name: 'B',
                     data: [720.13, 678.64, 299.5], // safety, condition, service
                     color: '#ffd600',
                     stack: 1
                  }, {  
                     name: 'A',
                     data: [379.02, 415.35, 1475.39],  // safety, condition, service
                     color: '#3cb878',
                     stack: 1
                  }, 
                  // for priority 2 corridor
                   {
                     name: 'D',
                     data: [157.56,99.88,16.34], // safety, condition, service
                     color: '#ff647f',
                     stack: 2,
                     showInLegend: false
                  }, {
                     name: 'C',
                     data: [374.97,347.18,36.39], // safety, condition, service
                     color: '#0095c5',
                     stack: 2,
                     showInLegend: false
                  }, {
                     name: 'B',
                     data: [167.21,358.19,210.67], // safety, condition, service
                     color: '#ffd600',
                     stack: 2,
                     showInLegend: false
                  }, {
                     name: 'A',
                     color: '#3cb878',
                     data: [187.75, 89.15, 680.06], // safety, condition, service
                     stack: 2,
                     showInLegend: false
                  },
    
                  // for priority 3 corridor
                   {
                     name: 'D',
                     data: [188.79,186.91,36.78], // safety, condition, service
                     color: '#ff647f',
                     showInLegend: false,
                     stack: 3
                     }, {
                     name: 'C',
                     data: [507.07,337,209.16], // safety, condition, service
                     color: '#0095c5',
                     showInLegend: false,
                     stack: 3
                  }, {
                     name: 'B',
                     data: [684.08,582.52,545.03], // safety, condition, service
                     color: '#ffd600',
                     stack: 3,
                     showInLegend: false
                  }, {
                     name: 'A',
                     color: '#3cb878',
                     data: [60.54, 299.94, 683.42], // safety, condition, service
                     stack: 3,
                     showInLegend: false
    
                      }]
            });         
    
         }); 
    

    Following is the csv:

    CORRIDOR_PRIORITY|CSL_TYPE|SCORE|CSL_LENGTH
    1|Safety|A|391
    1|Safety|B|679
    1|Safety|C|365
    1|Safety|D|202
    1|Safety|F|97
    1|Service|A|1028
    1|Service|B|513
    1|Service|C|166
    1|Service|D|17
    1|Service|F|9
    1|Condition|A|357
    1|Condition|B|536
    1|Condition|C|490
    1|Condition|D|133
    1|Condition|F|105
    2|Safety|A|279
    2|Safety|B|286
    2|Safety|C|173
    2|Safety|D|94
    2|Safety|F|128
    2|Service|A|799
    2|Service|B|101
    2|Service|C|33
    2|Service|D|4
    2|Service|F|22
    2|Condition|A|189
    2|Condition|B|307
    2|Condition|C|241
    2|Condition|D|130
    2|Condition|F|88
    3|Safety|A|488
    3|Safety|B|517
    3|Safety|C|424
    3|Safety|D|226
    3|Safety|F|321
    3|Service|A|1535
    3|Service|B|208
    3|Service|C|57
    3|Service|D|166
    3|Service|F|10
    3|Condition|A|380
    3|Condition|B|654
    3|Condition|C|458
    3|Condition|D|275
    3|Condition|F|197
    4|Safety|A|333
    4|Safety|B|507
    4|Safety|C|433
    4|Safety|D|347
    4|Safety|F|344
    4|Service|A|1114
    4|Service|B|83
    4|Service|C|762
    4|Service|D|3
    4|Service|F|3
    4|Condition|A|896
    4|Condition|B|525
    4|Condition|C|308
    4|Condition|D|153
    4|Condition|F|71
    5|Safety|A|338
    5|Safety|B|584
    5|Safety|C|697
    5|Safety|D|367
    5|Safety|F|431
    5|Service|A|898
    5|Service|B|78
    5|Service|C|1434
    5|Service|D|5
    5|Service|F|3
    5|Condition|A|747
    5|Condition|B|787
    5|Condition|C|509
    5|Condition|D|253
    5|Condition|F|103
    

    The first number would be the stack number. The last number is the mileage. We may be able to format the csv differently also if that makes a difference – it’s coming from BIQuery. Perhaps stack#|grade|safety#|condition#|service#.

    Due to the multidimensional data, I’m completely confused as to how to pass the data to the chart API.

  • Trigger click n a element created in javascript and download csv file
  • Not able to hardcode file directory for CSV parsing using Papa Parse
  • Export HTML table to csv in google chrome browser
  • generate csv from mvc web api httpresponse and receive it by angularjs for download
  • Best way to read from a big CSV file without loading everything to memory using Javascript
  • How do I ensure D3 finishes loading several CSVs before javascript runs?