fullcode

<html>
<head>


<!-- Styles -->
<style>
body {
  font-family: Verdana;
  font-size: 12px;
  padding: 10px;
}

#chartdiv,
#chartwrapper,
#loader {
  width: 100%;
  height: 500px;
  position: relative;
}

#loader {
  display: none;
  position: absolute;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  font-size: 18px;
  text-align: center;
}

#chartwrapper.loading #chartdiv {
  opacity: 0.3;
}

#chartwrapper.loading #loader {
  display: block;
}
</style>


<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<!-- Dataloader -->
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>


<!-- Chart code -->
<script type="text/javascript">

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  "theme": "none",
  //"dataDateFormat": "YYYY-MM-DD",
   "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true
    }],

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

  dataSets: [{
      title: "first data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
				url: "1.csv?q="+Math.random(), // Math.random added so csv does not get cached
				format: "csv",
      			"delimiter": ",",       // column separator
      			"useColumnNames": true, // use first row for column names
      			"skip": 1               // skip header row
			},
      categoryField: "date"
    },

    {
      title: "second data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
				url: "2.csv?q="+Math.random(), // Math.random added so csv does not get cached
				format: "csv",
				"delimiter": ",",       // column separator
      			"useColumnNames": true, // use first row for column names
      			"skip": 1               // skip header row
			},
      categoryField: "date"
    },

    {
      title: "third data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
     dataLoader: {
				url: "3.csv?q="+Math.random(), // Math.random added so csv does not get cached
				format: "csv",
				"delimiter": ",",       // column separator
      			"useColumnNames": true, // use first row for column names
      			"skip": 1               // skip header row
			},
      categoryField: "date"
    },

    {
      title: "fourth data set",
      fieldMappings: [{
        fromField: "value",
        toField: "value"
      }, {
        fromField: "rank",
        toField: "rank"
      }],
      dataLoader: {
				url: "4.csv?q="+Math.random(), // Math.random added so csv does not get cached
				format: "csv",
				"delimiter": ",",       // column separator
      			"useColumnNames": true, // use first row for column names
      			"skip": 1               // skip header row
			},
      categoryField: "date"
    }
  ],

  panels: [{

      showCategoryAxis: false,
      title: "Value",
      percentHeight: 70,

      stockGraphs: [{
        id: "g1",

        valueField: "value",
        comparable: true,
        compareField: "value",
        balloonText: "[[title]]:<b>[[value]]</b>",
        compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
      }],

      stockLegend: {
        periodValueTextComparing: "[[percents.value.close]]%",
        periodValueTextRegular: "[[value.close]]"
      }
    },

    {
      title: "rank",
      percentHeight: 30,
      stockGraphs: [{
        valueField: "rank",
        type: "column",
        showBalloon: false,
        fillAlphas: 1
      }],

      stockLegend: {
        periodValueTextRegular: "[[value.close]]"
      }
    }
  ],

  chartScrollbarSettings: {
    graph: "g1"
  },

  chartCursorSettings: {
    valueBalloonsEnabled: true,
    fullWidth: true,
    cursorAlpha: 0.1
  },

  periodSelector: {
    position: "left",
    periods: [{
      period: "MM",
      selected: true,
      count: 1,
      label: "1 month"
    }, {
      period: "YYYY",
      count: 1,
      label: "1 year"
    }, {
      period: "YTD",
      label: "YTD"
    }, {
      period: "MAX",
      label: "MAX"
    }]
  },

  dataSetSelector: {
    position: "left"
  }
});

// add listeners only when chart is fully initialized
chart.addListener("rendered", function(event) {
  var chart = event.chart;
  //retrieve the data when the dataSet is compared or selected from the dropdown
  chart.dataSetSelector.addListener("dataSetCompared", loadDataSetData);
  chart.dataSetSelector.addListener("dataSetSelected", loadDataSetData);
});

function loadDataSetData(event) {
  // check if the data set is empty or not
  if (event.dataSet.dataProvider.length)
    return;

  // let's display loading indicator
  document.getElementById("chartwrapper").className = "loading";


  // (we're going to delay the whole thing so the loading indicator
  // is more prominent)
  //setTimeout(function() {
  //  event.dataSet.dataProvider = generateChartData();
  //  event.chart.validateData();
  //  document.getElementById("chartwrapper").className = "";
  //}, 1000);
}


</script>

</head>

<body>

<div id="chartwrapper">
  <div id="loader">Loading data...</div>
  <div id="chartdiv"></div>
</div>

</body>
</html>