I can't seem to find an easy way to add legend which has switchable functionality for items in a single graph for amcharts. I searched around and found a column chart which has switchable graphs (JSFiddle 1). I found switchable items legend but it doesn't resize properly (JSFiddle 2).
This is the closest I can find to adding legends from multiple items of single graph (CodePen 1). It is from amchart website itself but there is no switchable functionality. How can I add the switchable functionality here which allows column resizing (ie. 2 items will be shown with bigger column than 10 columns)? I tried this initially to just see if switch functionality can be added but it does not work:
AmCharts.addInitHandler(function(chart) { //check if legend is enabled and custom generateFromData property //is set before running if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { return; } var categoryField = chart.categoryField; var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; var legendData = chart.dataProvider.map(function(data) { var markerData = { "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], "color": data[colorField] }; if (!markerData.color) { markerData.color = chart.graphs[0].lineColor; } return markerData; }); chart.legend.data = legendData; // here is the code I add chart.legend.switchable=true; }
Update - The AmCharts knowledge base demo has been updated to include the modifications below.
In order to resize the chart outright, you have to actually modify the dataProvider and remove the element from the array and redraw the chart. You can use the legend's clickMarker to store the data item into the event dataItem object and retrieve it as needed through the hidden flag. Combining the fiddles from previous solutions together, I came up with this:
/* Plugin to generate legend markers based on category and fillColor/lineColor field from the chart data by using the legend's custom data array. Also allows for toggling markers and completely removing/adding columns from the chart The plugin assumes there is only one graph object. */ AmCharts.addInitHandler(function(chart) { //method to handle removing/adding columns when the marker is toggled function handleCustomMarkerToggle(legendEvent) { var dataProvider = legendEvent.chart.dataProvider; var itemIndex; //store the location of the removed item //Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have //a dataUpdated event of your own legendEvent.chart.toggleLegend = true; // The following toggles the markers on and off. // The only way to "hide" a column and reserved space on the axis is to remove it // completely from the dataProvider. You'll want to use the hidden flag as a means // to store/retrieve the object as needed and then sort it back to its original location // on the chart using the dataIdx property in the init handler if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) { legendEvent.dataItem.hidden = false; dataProvider.push(legendEvent.dataItem.storedObj); legendEvent.dataItem.storedObj = undefined; //re-sort the array by dataIdx so it comes back in the right order. dataProvider.sort(function(lhs, rhs) { return lhs.dataIdx - rhs.dataIdx; }); } else { // toggle the marker off legendEvent.dataItem.hidden = true; //get the index of the data item from the data provider, using the //dataIdx property. for (var i = 0; i < dataProvider.length; ++i) { if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) { itemIndex = i; break; } } //store the object into the dataItem legendEvent.dataItem.storedObj = dataProvider[itemIndex]; //remove it dataProvider.splice(itemIndex, 1); } legendEvent.chart.validateData(); //redraw the chart } //check if legend is enabled and custom generateFromData property //is set before running if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { return; } var categoryField = chart.categoryField; var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; var legendData = chart.dataProvider.map(function(data, idx) { var markerData = { "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], "color": data[colorField], "dataIdx": idx }; if (!markerData.color) { markerData.color = chart.graphs[0].lineColor; } data.dataIdx = idx; return markerData; }); chart.legend.data = legendData; //make the markers toggleable chart.legend.switchable = true; chart.legend.addListener("clickMarker", handleCustomMarkerToggle); }, ["serial"]);
Demo
