Stacked column chart from multiple datatsets

Question

I've trying to create a panel in a amstock chart that contains a stacked column chart. For some reason it's only showing the first data set. Unlike the given example (https://www.amcharts.com/kbase/using-stacked-graphs-on-stock-chart/), my data is coming from multiple data sets. I think the problem may be my understanding of fieldmappings but I am unsure.

Link to a simplified version of the code: https://plnkr.co/edit/AUdN0T1UM4c9PkbFec1v?p=preview

const sources = ['source_a', 'source_b', 'source_c', 'source_d']
let dataSources = {};
let generateData = () => {
  var data = [];
  var days = 30;
  var firstDate = new Date();
  firstDate.setHours(0, 0, 0, 0);
  firstDate.setDate(firstDate.getDate() - days);

  for (let i = 0; i < days; i++) {

    let newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    data.push({
      'line_value': Math.round(Math.random() * 1000),
      'column_value': Math.round(Math.random() * 100),
      'date': newDate
    });
  }
  return data;
}

sources.forEach((key) => {
  dataSources[key] = generateData();
});



let dataSets = [];
sources.forEach((key, index) => {
  dataSets.push({
    title: key,
    fieldMappings: [{
      fromField: 'line_value',
      toField: 'line_value' + index
    }, {
      fromField: 'column_value',
      toField: 'column_value' + index
    }],
    categoryField: "date",
    dataProvider: dataSources[key],
    compared: true
  })
});


var lineGraphs = [];
var columnGraphs = [];
sources.forEach((key, index) => {
  lineGraphs.push({
    id: 'g' + index,
    type: 'line',
    comparable: true,
    compareField: 'line_value' + index,
    lineThickness: 2,
    fillAlphas: 0.3,
    useDataSetColors: false,
    title: key
  });
  columnGraphs.push({
    id: 'g' + (sources.length + index),
    type: "column",
    valueField: 'column_value' + index,

    fillAlphas: 0.8,
    useDataSetColors: false,
    title: key
  });
});

let config = {
  type: "stock",
  "theme": "light",

  dataSets: dataSets,


  panels: [{
      title: "Lines",
      recalculateToPercents: "never",
      showCategoryAxis: false,
      percentHeight: 70,
      valueAxes: [{
        id: "v1",
        dashLength: 5,
        stackType: "regular"
      }],
      categoryAxis: {
        dashLength: 5
      },
      stockGraphs: lineGraphs,
      stockLegend: {
        valueTextRegular: undefined,
        periodValueTextComparing: "[[percents.value.close]]%"
      }
    },

    {
      title: "Columns",
      recalculateToPercents: "never",
      percentHeight: 30,
      marginTop: 1,
      showCategoryAxis: true,
      valueAxes: [{
        dashLength: 5,
        stackType: "regular"
      }],

      categoryAxis: {
        dashLength: 5
      },

      stockGraphs: columnGraphs,

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

    }
  ],

  chartScrollbarSettings: {

    graph: "g1",
    graphType: "line",
    usePeriod: "WW"
  },


  chartCursorSettings: {
    valueLineBalloonEnabled: true,
    valueLineEnabled: true
  },

  periodSelector: {
    position: "bottom",
    periods: [{
      period: "DD",
      count: 10,
      label: "10 days"
    }, {
      period: "MM",
      selected: true,
      count: 1,
      label: "1 month"
    }, {
      period: "YYYY",
      count: 1,
      label: "1 year"
    }, {
      period: "YTD",
      label: "YTD"
    }, {
      period: "MAX",
      label: "MAX"
    }]
  },
  "export": {
    "enabled": true
  }
};

console.log(config);

var chart = AmCharts.makeChart("chartdiv", config);

One solution might be to just refactor the data sets but in the real version, the data sets can be very big so it would be great if this can be avoided.

Any help would be greatly appreciated!

xorspark xorspark · Accepted Answer · 2017-07-27T10:56:44

In order to show multiple graphs from multiple dataSets, not only do you need to set the dataSet's compared property to true, you also need to set the stockGraph's comparable property to true so that it will show data from the other compared datasets; you were missing this setting in your columnGraphs array. Since you want a stacked column, you also have to set the properties with the compareGraph prefix to adjust the compared graphs' appearance. In this case you want to set the compareGraphType property to "column" and compareGraphFillAlphas to a non-zero value to add a fill to your columns.

Updated code:

sources.forEach((key, index) => {
    // ...
    columnGraphs.push({
        id: 'g' + (sources.length + index),
        type: "column",
        valueField: 'column_value' + index,

        // ** added **
        comparable: true,
        compareGraphType: 'column',
        compareGraphFillAlphas: .8,
        // **

        fillAlphas: 0.8,
        useDataSetColors: false,
        title: key
    });
});

Updated plunker

Stacked column chart from multiple datatsets

1 Answers