Amcharts Legend / Filter Configuration?

I'm working on a data intensive IOT project, and we are using many different AmCharts to display our data to the user. I just implemented a line chart with a legend and it's workin

Solution 1:

You can use the showItem and hideItem events in the legend to force the clicked on marker to maintain its visibility by setting the graph's hidden property to false and hide the other graphs by setting hidden to true:

// in makeChart:"legend": {
    "enabled": true,
    // ..."listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
// ...functionhideOthers(e) {
  var currentGraph = e.dataItem;
  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = true;  //hide the others
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateNow();
}

Demo below:

functionhideOthers(e) {
  var currentGraph = e.dataItem;
  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = true;  //hide the others
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateNow();
}

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "round",
      "id": "AmGraph-1",
      "title": "graph 1",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "square",
      "id": "AmGraph-2",
      "title": "graph 2",
      "valueField": "column-2",
      "hidden": true
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "stackType": "regular",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": [{
      "category": "category 1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "category 2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "category 3",
      "column-1": 2,
      "column-2": 3
    },
    {
      "category": "category 4",
      "column-1": 1,
      "column-2": 3
    },
    {
      "category": "category 5",
      "column-1": 2,
      "column-2": 1
    },
    {
      "category": "category 6",
      "column-1": 3,
      "column-2": 2
    },
    {
      "category": "category 7",
      "column-1": 6,
      "column-2": 8
    }
  ]
});

<scripttype="text/javascript"src="https://www.amcharts.com/lib/3/amcharts.js"></script><scripttype="text/javascript"src="https://www.amcharts.com/lib/3/serial.js"></script><divid="chartdiv"style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>

Edit

To make it so that clicking on the same marker toggles the visibility of the other charts back on, you can store a couple of flags in the chart instance itself through the event handler and use those flags to determine whether to hide all other charts or make them all visible:

functionhideOthers(e) {
  var currentGraph = e.dataItem;
  var hidden = true;
  //check if we clicked on this graph before and if all the other graphs are visible.// if we clicked on this graph before and the other graphs are invisible,// make them visible, otherwise default to previous behaviorif (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
      hidden = false;
      e.chart.allVisible = true;
  }
  else {
    e.chart.allVisible = false;
  }
  e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked

  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = hidden;  //set the other graph's visibility based on the rules above
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateNow();
}

AmCharts.makeChart("chartdiv", {
  // .. custom flags to make the above code work"lastClicked": null,
  "allVisible": true, //if you're only showing one graph by default, set this to false// ...
})

Demo:

functionhideOthers(e) {
  var currentGraph = e.dataItem;
  var hidden = true;
  //check if we clicked on this graph before and if all the other graphs are visible.// if we clicked on this graph before and the other graphs are invisible,// make them visible, otherwise default to previous behaviorif (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
      hidden = false;
      e.chart.allVisible = true;
  }
  else {
    e.chart.allVisible = false;
  }
  e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked
  
  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = hidden;  //set the other graph's visibility based on the rules above
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateData();
}

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "lastClicked": null,
  "allVisible": true, //if you're only showing one graph by default, set this to false"categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "round",
      "id": "AmGraph-1",
      "title": "graph 1",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "square",
      "id": "AmGraph-2",
      "title": "graph 2",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    //"includeHidden": true,"title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": [{
      "category": "category 1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "category 2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "category 3",
      "column-1": 2,
      "column-2": 3
    },
    {
      "category": "category 4",
      "column-1": 1,
      "column-2": 3
    },
    {
      "category": "category 5",
      "column-1": 2,
      "column-2": 1
    },
    {
      "category": "category 6",
      "column-1": 3,
      "column-2": 2
    },
    {
      "category": "category 7",
      "column-1": 6,
      "column-2": 8
    }
  ]
});

<scripttype="text/javascript"src="https://www.amcharts.com/lib/3/amcharts.js"></script><scripttype="text/javascript"src="https://www.amcharts.com/lib/3/serial.js"></script><divid="chartdiv"style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>