Table generation for Alexandra

table.js

AmCharts.loadFile( "data.csv", {}, function( response ) {

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

  /**
   * Create the chart
   */

  AmCharts.ready(function () {
    type: "serial",
    chartData = data,
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "timestamp";
    chart.synchronizeGrid = true; // this makes all axes grid to be at the same intervals
    // AXES
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dateFormats = [ { 
      period: 'DD',
      format: 'YYYY-MM'
    }, {
      period: 'WW',
      format: 'YYYY-MM'
    }, {
      period: 'MM',
      format: 'YYYY-MM'
    }, {
      period: 'YYYY',
      format: 'YYYY-MM'
    }];
    // first value axis (on the left)
    var valueAxis1 = new AmCharts.ValueAxis();
    valueAxis1.axisColor = "black";
    valueAxis1.axisThickness = 1;
    valueAxis1.title = "Доходность, %";
    chart.addValueAxis(valueAxis1);
    // GRAPHS
    // first graph
    var graph1 = new AmCharts.AmGraph();
    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
    graph1.title = "Накопительная доходность";
    graph1.valueField = "growth";
    //               graph1.balloonText = "[[pureresults]] %";
    graph1.balloonText = "[[growth]] %";
    graph1.bullet = "round";
    graph1.bulletBorderThickness = 1;
    graph1.autoGridCount = true;
    graph1.lineColor = "#a66bb3";
    chart.addGraph(graph1);
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorAlpha = 1;
    chartCursor.fullWidth = false;
    chartCursor.categoryBalloonColor = "green";
    chartCursor.categoryBalloonDateFormat = 'YYYY-MM';
    chartCursor.BalloonColor = "green";
    chart.addChartCursor(chartCursor);
    // SCROLLBAR
    var chartScrollbar = new AmCharts.ChartScrollbar();
    chartScrollbar.resizeEnabled = true;
    console.log( chartScrollbar );
    chart.addChartScrollbar(chartScrollbar);
    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.marginLeft = 110;
    legend.useGraphSettings = true;
    chart.addLegend(legend);
    // WRITE
    chart.write("chartdiv");
  });
 
} );


AmCharts.loadFile( "chart.csv", {}, function( response ) {

  /**
   * Parse CSV
   */
  var data = AmCharts.parseCSV( response, {
    "useColumnNames": true
  } );
  
  // parse date string and find min\max years, fill yearData dictionary
  var years = {min: -1, max: -1};
  var yearData = {};
  for (var i = 0; i < data.length; i++) {
    var el = data[i];
    if (!el.hasOwnProperty("timestamp") || !el.hasOwnProperty("growth")) continue;
    var mdy = el.timestamp.split('.').map(function(n){return parseInt(n);}); // "11.01.2019" => [11, 1, 2019]
    var year = mdy[2];
    var month = mdy[0];
    
    if (years.min === -1) years.min = year;
    else years.min = Math.min(years.min, year);

    if (years.max === -1) years.max = year;
    else years.max = Math.max(years.max, year);
    
    if (!yearData.hasOwnProperty(year)) yearData[year] = {};
    yearData[year][month] = el.growth;
  }


  // Data loader
  // Create the table
  var table = document.createElement("table");
  
  // Add headers
  var columns = 'Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Год'.split(' ');
  var thead = document.createElement("thead");
  var row = document.createElement("tr");
  row.appendChild(document.createElement("th")); // empty cell

  for (i = 0; i < columns.length; i++) {
    var th = document.createElement("th");
    th.innerText = columns[i];
    row.appendChild(th);
  }

  thead.appendChild(row);
  table.appendChild(thead);
  

  // Table body
  var tbody = document.createElement("tbody");
  
  // Loop through years
  for(var year = years.min; year <= years.max; year++) {
    var row = document.createElement("tr");
    th = document.createElement("th");
    th.innerText = year;
    row.appendChild(th);
    
    var sum = 0; // year total
    for (var month = 1; month <= 12; month++) {
      var td = document.createElement("td");
      
      if (yearData.hasOwnProperty(year) && yearData[year].hasOwnProperty(month)) {
        td.innerText = yearData[year][month] + '%';
        sum += parseFloat(yearData[year][month]);
      } else {
        td.innerHTML = '&ndash;'; // no data for the month
      }
      
      row.appendChild(td);
    }
    
    // summary cell
    td = document.createElement("td");
    td.innerText = sum.toFixed(2) + '%'; // 2 digits after decimal dot
    row.appendChild(td);
    
    tbody.appendChild(row);
  }
  
  table.appendChild(tbody)
  
  // Add table to document
  document.getElementById("datatable").appendChild(table);

} );