CODEWITHSUNDEEP
javascriptamcharts
iJade
iJade

Reputation: 23791

Unable to Add More than 2 charts to amchart stock chart

I'm trying to add 3 charts to the stock chart displaying data from different data set in separate panels.

Here is the JS code:

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];

generateChartData();

function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
    var a3 = -1 * Math.round(Math.random() * (1000 + i)) + 2000 + i;

        chartData1.push({
            date: newDate,
            value: a1
        });
        chartData2.push({
            date: newDate,
            value: a2
        });
    chartData3.push({
            date: newDate,
            value: a3
        });
    }
}

AmCharts.makeChart("chartdiv", {
    type: "stock",

    dataSets: [{
            title: "first data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value"
            }],
            dataProvider: chartData1,
            categoryField: "date"
        },

             {
            title: "second data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value2"
            }],
            dataProvider: chartData2,
            categoryField: "date"
        },

        {
            title: "third data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value3"
            }],
            dataProvider: chartData3,
            categoryField: "date",
      compared: true
        }
    ],

    panels: [{

            showCategoryAxis: false,
            title: "Data set #1",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true,
        bullet: "round"
            }],

            stockLegend: {

            }
        },{

            showCategoryAxis: false,
            title: "Data set #2",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g2",
                valueField: "value2",
                comparable: true,
        bullet: "round"
            }],

            stockLegend: {

            }
        }, {

            showCategoryAxis: true,
            title: "Data set #3",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g3",
                valueField: "value3",
                compareField: "value3",
                comparable: true,
        bullet: "round",
                visibleInLegend: false
            }],

            stockLegend: {

            }
        }
    ],

    chartScrollbarSettings: {
        graph: "g1"
    },

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

    periodSelector: {
        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"
        }]
    }
});

Here is a link to the demo. It displays only two charts , the third is not rendering.

Upvotes: 0

Views: 141

Answers (1)

xorspark
xorspark

Reputation: 16012

You need to set compared to true in all dataSets after the first one if you want them to be visible by default. You only have it set in the third one but not the second.

{
  title: "second data set",
  fieldMappings: [
    {
      fromField: "value",
      toField: "value2"
    }
  ],
  dataProvider: chartData2,
  categoryField: "date",
  compared: true //needs to be enabled
},

{
  title: "third data set",
  fieldMappings: [
    {
      fromField: "value",
      toField: "value3"
    }
  ],
  dataProvider: chartData3,
  categoryField: "date",
  compared: true  //needs to be enabled

Updated codepen

Upvotes: 1

Related Questions