CODEWITHSUNDEEP
javascriptamcharts
Bill Noble
Bill Noble

Reputation: 6734

AmChart stock chart not showing different graphs

I am trying to show two graphs in an AmChart stock chart but it is showing the same data in both charts. My Javascript code looks like this:

var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",  // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
    pathToImages: "http://www.amcharts.com/images/",
    dataDateFormat: "YYYY-MM-DD",
    dataSets: [{
        color: "#b0de09", // bar chart color

        // userRegistrations variable is source of user data
        dataProvider: userRegistrations,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date"
    },
    {
        color: "#efefef", // bar chart color

        // likes variable is source of data for likes
        dataProvider: likes,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date",
    }],

    panels: [{

        legend: {},

        stockGraphs: [{
            id: "graph1",
            valueField: "value",
            type: "column",
            title: "User Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Users registered: <b>[[val]]</b>",

        }]
    },
    {

        legend: {},

        stockGraphs: [{
            id: "graph2",
            valueField: "value",
            type: "column",
            title: "Watch List Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Added to Watch List: <b>[[val]]</b>",

        }]
    }],

    panelsSettings: {
        startDuration: 1
    },

    categoryAxesSettings: {
        dashLength: 5
    },

    valueAxesSettings: {
        dashLength: 5
    },

    chartScrollbarSettings: {
        graph: "graph1",
        graphType: "line",
        position: "top"
    },

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

    },

    // range selector 
    periodSelector: {
        position: "top",
        periods: [{
            period: "DD",
            count: 1,
            label: "1 day"
        }, {
            period: "DD",
            selected: true,
            count: 7,
            label: "7 days"
        }, {
            period: "MM",
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    },

  // ballon on mouse hover
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    // "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});

// date picker
chart.addListener('rendered', function (event) {
    var dataProvider = chart.dataSets[0].dataProvider;
      $(".amChartsPeriodSelector .amChartsInputField").datepicker({
      dateFormat: "dd-mm-yy",
      minDate: dataProvider[0].date,
      maxDate: dataProvider[dataProvider.length-1].date,
      onClose: function() {
          $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
      }
  });
});

I have two datasets and two panels. Both panels are showing the same dataset (the one with the userRegistrations dataProvider). I want to show to separate data sets.

I have looked through the AmCharts documentation but cannot work out how to do this.

Upvotes: 0

Views: 1346

Answers (1)

martynasma
martynasma

Reputation: 8595

If I understand it correctly, you want the first panel to display graph generated from first data set, and the second panel to show graph from second data set.

To achieve that you will need to do a couple of things:

1) Make the second data set compared by setting it's compared parameter to true as well as map the value field to a different name than the first data set:

{
    color: "#efefef", // bar chart color

    // likes variable is source of data for likes
    dataProvider: likes,

    fieldMappings: [{
        fromField: "val",
        toField: "value2"
    }],
    categoryField: "date",
    compared: true
}

2) Make the graph on the second panel use "value2" field insteadl of "value".

Here's full code:

var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",  // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
    pathToImages: "http://www.amcharts.com/images/",
    dataDateFormat: "YYYY-MM-DD",
    dataSets: [{
        color: "#b0de09", // bar chart color

        // userRegistrations variable is source of user data
        dataProvider: userRegistrations,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date"
    },
    {
        color: "#efefef", // bar chart color

        // likes variable is source of data for likes
        dataProvider: likes,

        fieldMappings: [{
            fromField: "val",
            toField: "value2"
        }],
        categoryField: "date",
        compared: true
    }],

    panels: [{

        legend: {},

        stockGraphs: [{
            id: "graph1",
            valueField: "value",
            type: "column",
            title: "User Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Users registered: <b>[[val]]</b>",

        }]
    },
    {

        legend: {},

        stockGraphs: [{
            id: "graph2",
            valueField: "value2",
            type: "column",
            title: "Watch List Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value2",
            balloonText: "Added to Watch List: <b>[[val]]</b>",

        }]
    }],

    panelsSettings: {
        startDuration: 1
    },

    categoryAxesSettings: {
        dashLength: 5
    },

    valueAxesSettings: {
        dashLength: 5
    },

    chartScrollbarSettings: {
        graph: "graph1",
        graphType: "line",
        position: "top"
    },

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

    },

    // range selector 
    periodSelector: {
        position: "top",
        periods: [{
            period: "DD",
            count: 1,
            label: "1 day"
        }, {
            period: "DD",
            selected: true,
            count: 7,
            label: "7 days"
        }, {
            period: "MM",
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    },

  // ballon on mouse hover
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    // "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});

Upvotes: 3

Related Questions