Trying to iterate an array through mutliple highcharts

Question

So I have a large amount of data that I need to display all stored in separate CSV files. So I created two charts just fine in highcharts, one line, one area, but instead of copying and pasting the function over and over again I was hoping I could just iterate through it like so:

var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var libraryLength = library.length;
var area =['#attendanceRoom','#attendanceGroup'];
var i = 0;

function areaChart(){
$(function () { 
    $.get(library[i], function(csv) {
        $(area[i]).highcharts({
            chart: {
                type: 'area'
            },
            data: {
                csv: csv
            },
            title: {
                text: 'Attendance by Room'
            },          
            yAxis: {
                title: {
                text: null
                },
                minorTickInterval: 'auto'
            },

            legend:{
                align: 'left',
                verticalAlign: 'top',
                floating: true        
            },
        });
    }); 
});
}

for (i = 0; i < libraryLength; i++){
areaChart();
}

I was looking at this Manage multiple highchart charts in a single webpage using jQuery.extend() or Highcharts.setOptions but that sets options for each individual chart and then you just make them over and over again. I thought a better solution might be to just have the one function and then just re-run it for each individual chart especially since I'm pulling the data from .CSV files.

So is this possible? Or should I go with jQuery.extend()?

Thanks for any help in advance!

This looks like a perfectly fine solution given the small/predictable differences between your individual charts. — Halvor Holsten Strand, Dec 02 '15 at 22:36

score 0 · Accepted Answer · answered Dec 03 '15 at 15:06

Just two things I would improve:

$(function () { }); - I would encapsulate whole JS, not only part with AJAX and Highcharts:

$(function () { 
  var library = ['data/data.csv', 'data/attendanceGroup.csv'];

  ...

  for (i = 0; i < libraryLength; i++){
      areaChart();
  }
});

make library[i] and area[i] as arguments for areaChart():

$(function () { 
  var library = ['data/data.csv', 'data/attendanceGroup.csv'];

  ...

  function areaChart(lib, area){
    $.get(lib, function(csv) {
      $(area).highcharts({
        chart: {
          type: 'area'
        },
        data: {
          csv: csv
        }
      });
    });
  }

  for (i = 0; i < libraryLength; i++){
    areaChart(library[i], area[i]);
  }
});

Of course, you can add more params to areaChart for example type, and pass on what kind of the chart should be rendered:

$(function () { 
    var library = ['data/data.csv', 'data/attendanceGroup.csv'];
    var types = ['line', 'area'];

    ...

    function areaChart(lib, area, type){
      $.get(lib, function(csv) {
        $(area).highcharts({
          chart: {
            type: type
          },
          data: {
            csv: csv
          }
        });
      });
    }

    for (i = 0; i < libraryLength; i++){
      areaChart(library[i], area[i], types[i]);
    }
});

Don't overdo with the params, no one likes to read 10params and control order etc. Instead you may consider passing one object param (renamed from areaChart to myChart):

myChart({
  lib: library[i], 
  area: area[i], 
  type: types[i]
});

And in myChart() method:

function myChart(options) {
    $.get(options.lib, function(csv) {
        $(options.area).highcharts({
            chart: {
                type: options.type
            },
            data: {
                csv: csv
            }
        });
    });
 }

Thank you! I don't know why this change mattered but it did and know it works beautifully. Thank you for the improvements! — Max Cohen, Dec 06 '15 at 17:35
If something didn't work, then most probably #1 resolved your issue. It was a bit strange to wait for load event in function. — Paweł Fus, Dec 07 '15 at 09:10

Trying to iterate an array through mutliple highcharts

1 Answers1