How to add legends in Amserial charts

Question

I am using Amcharts in my AngularJS Application to create a simple bar chart.The following is my code in the controller:

        let empChart;
        let empBarGraph;
        let empLine;
        const writeemp = data => {
            const {
                total,
                employees,
            } = data;

            empChart.dataProvider = e;
            empChart.write('emp');
            empChart.validateData();
        };

        AmCharts.handleLoad();

        var configChart = function () {


            empChart = new AmCharts.AmSerialChart();
            empChart.categoryField = "state";
            empChart.labelRotation = 90;

            var yAxis = new AmCharts.ValueAxis();
            yAxis.position = "left";
            empChart.addValueAxis(yAxis);


            empBarGraph = new AmCharts.AmGraph();
            empBarGraph.valueField = "count";
            empBarGraph.type = "column";
            empBarGraph.fillAlphas = 1;
            empBarGraph.lineColor = "#f0ab00";
            empBarGraph.valueAxis = yAxis;
            empChart.addGraph(empBarGraph);
            empChart.write('empChart');


            $http.get(hostNameService.getHostName()+"/dashboard/employees/statecount")
                .then(response => writeemp(response.data));
        }

Code in html:

                       <div class='panel-body'>
                            <div id="empChart"></div>
                        </div>

This would return me the values of State on x-axis and count on y-axis. I wanted to filter the chart based on the value of state and was not sure how to create the legends for this chart. could anyone suggest me on how to use legends. I want to create legends for the state value that is being returned.

Answer 1

You can add a legend using the OO-based syntax by creating a legend object through new AmCharts.AmLegend() and adding it to the class by calling the chart's addLegend method:

var legend = new AmCharts.AmLegend();
empChart.addLegend(legend);

If you want the legend to show values upon hovering over a column, you need to add a ChartCursor to your chart:

var cursor = new AmCharts.ChartCursor();
empChart.addChartCursor(cursor);

You can change what the legend displays upon column rollover by setting the valueText property. It allows for the same [shortcodes] used in fields like balloonText and labelText, e.g. legend.valueText = "[[category]]: [[value]]". You can also use set its valueFunction if you need to customize the text it returns dynamically like in your previous questions. All of the properties available in the legend object can be found in the AmLegend API documentation.

Updated:

Legends work off of graph objects only, so there isn't an out of the box method that allows you to represent each column as a legend item that toggles the other columns' visibility unless you're willing to reorganize your dataset and use different graph objects for each state. A workaround for this is to use the the legend's custom data array and add some event handling so that clicking on the custom data items adds/removes a toggle by unsetting your count valueField in the dataProvider.

The following annotated code accomplishes what you're trying to do:

  //create the legend but disable it until the dataProvider is populated,
  //since you're retrieving your data using AJAX
  var legend = new AmCharts.AmLegend();
  legend.enabled = false;

  chart.addLegend(legend);
  chart.toggleLegend = false;

  // Callback that handles clicks on the custom data entry markers and labels
  var handleLegendClick = function(legendEvent) {
    //Set a custom flag so that the dataUpdated event doesn't fire infinitely
    legendEvent.chart.toggleLegend = true; 

    // The following toggles the markers on and off.
    // The only way to "hide" a column is to unset the valueField at the data index,
    // so a temporary "storedCount" property is added to the dataProvider that stores the 
    // original value so that the value can be restored when the legend marker is toggled
    // back on
    if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
      legendEvent.dataItem.hidden = false;
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount; //restore the value
    } else {
    // toggle the marker off
      legendEvent.dataItem.hidden = true;
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count;  //store the value
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = undefined; //set to undefined to hide the column
    }
    legendEvent.chart.validateData(); //redraw the chart
  }


  chart.addListener('dataUpdated', function(e) {
    var legendDataItems; //used to store the legend's custom data array.

    if (e.chart.toggleLegend === true) {
      //is the user toggling a legend marker? stop here as the dataProvider will get updated in handleLegendClick
      e.chart.toggleLegend = false;
      return;
    }

    // if we're at this point, the data provider was updated. 
    // reconstruct the data array.
    // initialize by grabbing the state, setting a color and stoing the index
    // for toggline the columns later
    legendDataItems = e.chart.dataProvider.map(function(dataElement, idx) {
      return {
        'title': dataElement.state,
        'color': graph.lineColor,
        'stateIdx': idx //used in toggling
      }
    });

    // if the legend is not enabled, then we're setting this up for the first time.
    // turn it on and attach the event handlers
    if (e.chart.legend.enabled === false) {
      e.chart.legend.enabled = true;
      e.chart.legend.switchable = true;

      e.chart.legend.addListener('clickMarker', handleLegendClick);
      e.chart.legend.addListener('clickLabel', handleLegendClick);
    }

    // update the legend custom data and redraw the chart
    e.chart.legend.data = legendDataItems;
    e.chart.validateNow();
  });

Here's a fiddle that illustrates this: http://jsfiddle.net/g254sdq5/1/