Using multiple files to load data into chart

[amyehill]

I have searched high and low for a solution and have found many people asking this question but no answer. I am trying to alter this example to work with external data: https://www.amcharts.com/kbase/making-stock-charts-period-selector-input-fields-read-only/

Is it possible to load data from multiple CSVs into an array and then apply each set to a chart dataset?? Thanks!

Something like this...

var dataSets = []; var files = ['1.csv', '2.csv', '3.csv', '4.csv'];

    for(var fileid in files) {
        AmCharts.loadFile(fileid, {}, function(    response ) {

            /**
            * Parse CSV
            */
     var data = AmCharts.parseCSV( response, {
        "useColumnNames": true
        } );
     dataSets.push(data);
 });
}

................................. (Not sure whether to use "dataLoader" or "dataProvider") .................................

var chart = AmCharts.makeChart("chartdiv", { type: "stock", "theme": "none", //"dataProvider": dataSets,

pathToImages: "https://www.amcharts.com/lib/3/images/",

dataSets: [{ title: "first data set", fieldMappings: [{ fromField: "value", toField: "value" }, { fromField: "rank", toField: "rank" }], dataLoader: dataSets[0], categoryField: "date" },

{
  title: "second data set",
  fieldMappings: [{
    fromField: "value",
    toField: "value"
  }, {
    fromField: "rank",
    toField: "rank"
  }],
  dataLoader: dataSets[1],
  categoryField: "date"
},

{
  title: "third data set",
  fieldMappings: [{
    fromField: "value",
    toField: "value"
  }, {
    fromField: "rank",
    toField: "rank"
  }],
  dataLoader: dataSets[2],
  categoryField: "date"
},

{
  title: "fourth data set",
  fieldMappings: [{
    fromField: "value",
    toField: "value"
  }, {
    fromField: "rank",
    toField: "rank"
  }],
  dataLoader: dataSets[3],
  categoryField: "date"
}

],

[martynasma]

You can add dataLoader to each data set definition. You don't need to load those files separately. I.e.:

var chart = AmCharts.makeChart( "chartdiv", {

    // ...

    dataSets: [ {
        title: "first data set",
        fieldMappings: [ {
            fromField: "value",
            toField: "value"
        }, {
            fromField: "rank",
            toField: "rank"
        } ],
        dataLoader: {
            url: "1.csv",
            format: "csv",
            // possibly other csv options
        },
        categoryField: "date"
    }, {
        title: "second data set",
        fieldMappings: [ {
            fromField: "value",
            toField: "value"
        }, {
            fromField: "rank",
            toField: "rank"
        } ],
        dataLoader: {
            url: "2.csv",
            format: "csv",
            // possibly other csv options
        },
        categoryField: "date"
    }, {
        title: "third data set",
        fieldMappings: [ {
            fromField: "value",
            toField: "value"
        }, {
            fromField: "rank",
            toField: "rank"
        } ],
        dataLoader: {
            url: "3.csv",
            format: "csv",
            // possibly other csv options
        },
        categoryField: "date"
    }, {
        title: "fourth data set",
        fieldMappings: [ {
            fromField: "value",
            toField: "value"
        }, {
            fromField: "rank",
            toField: "rank"
        } ],
        dataLoader: {
            url: "4.csv",
            format: "csv",
            // possibly other csv options
        },
        categoryField: "date"
    } ],

    // ...
} );

Data Loader will take care of everything else.

[amyehill]

That worked! Thank you!

[martynasma]

You're welcome!

[ThomasDesaranno-r0629748]

I've implemented this, but how can i use this now in my graph?

[themagicalmammal]

How can you do this on Javascript?