amCharts Stock Chart with multiple datasets not showing

Question

I went through the examples and docs of amCharts.

Here is my problem: the chart is showing just a line and not two as defined in the 2 datasets:

var chart;

function createStockChart() {
  chart = new AmCharts.AmStockChart();


  // DATASETS //////////////////////////////////////////

    var dataSet = new AmCharts.DataSet();
    chart.dataSets = [{
      title: "XWD.TO",
      color: "#000000",
      fieldMappings: [ {
      fromField: "value",
      toField: "value"
      }, {
      fromField: "volume",
      toField: "volume"
      } ],
      dataProvider: chartData,
      categoryField: "date"
    },

    {
      title: "portfolio-top-9-12-2015",
      color: "#FF0000",
      fieldMappings: [ {
      fromField: "value",
      toField: "value"
      }, {
      fromField: "volume",
      toField: "volume"
      } ],
      dataProvider: chartData2,
      categoryField: "date"
    }];



  // PANELS ///////////////////////////////////////////
  // first stock panel
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = false;
  stockPanel1.title = "Price";
  stockPanel1.percentHeight = 70;

  // graph of first stock panel
  var graph1 = new AmCharts.StockGraph();
  graph1.valueField = "value";
  graph1.comparable = true;
  graph1.compareField = "value";
  graph1.type = "smoothedLine";
  graph1.bullet = "round";
  graph1.lineThickness = 2;
  graph1.bulletBorderColor = "#FFFFFF";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 3;
  stockPanel1.addStockGraph(graph1);

}

For full page code: http://www.fanta-trade.eu/chart.php?tipo=a&code=XWD.TO&compare_top=1&time=1449658858

It's like if the code is not fetching the second dataset.

Answer 1

The Stock Chart does support multiple data sets. However, it won't draw a graph for each of the data sets by default.

By default it only draws a graph for main selected data set - the first one.

In order for it to draw graphs for other data sets, they need to be "compared".

They can be compared by selecting them in Data Set selector (if you have one enabled), or programatically by setting data set's compared property to true.

{
  title: "portfolio-top-9-12-2015",
  color: "#FF0000",
  fieldMappings: [ {
    fromField: "value",
    toField: "value"
  }, {
    fromField: "volume",
    toField: "volume"
  } ],
  dataProvider: chartData2,
  categoryField: "date",
  compared: true
}

Please also note, that compared graphs use different appearance settings. You can set those settings via graph's compareGraph setting. I.e.:

// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
graph1.comparable = true;
graph1.compareField = "value";
graph1.type = "smoothedLine";
graph1.bullet = "round";
graph1.lineThickness = 2;
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
graph1.compareGraph = {
  "type": "smoothedLine",
  "bullet": "round",
  "lineThickness": 2,
  "bulletBorderColor": "#FFFFFF",
  "bulletBorderAlpha": 1,
  "bulletBorderThickness": 3
};
stockPanel1.addStockGraph(graph1);