anychartanychart-8.2

AnyChart - Column Chart: get values of one category summarized

I tried to get a small AnyChart chart working but have some problems with my data setup. What I want to have is a way for users to filter data. Therefor, I have to provide all information necessary for filtering within the data set. In the chart, only top level category is used and should display a summarized value of all rows that the filter applies to.

Here comes the code:

<html>
<body>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>

<select id='depFilter'><option value='*'>All</option><option value='Development'>Development</option><option value='Accounting'>Accounting</option><option value='Sales'>Sales</option></select><br>
<select id='genderFilter'><option value='*'>All</option><option value='female'>female</option><option value='male'>male</option></select><br>
<button onClick='filterChart()'>Filter</button><br>
<div id="container"></div>

<script language='JavaScript'>
anychart.onDocumentReady(function() {
  // create line chart
  var dataSet = anychart.data.set([
    ["US", "Development", "male", 20],
    ["US", "Development", "female", 3],
    ["US", "Accounting", "male", 1],
    ["US", "Accounting", "female", 4],
    ["US", "Sales", "male", 15],
    ["US", "Sales", "female", 16],
    ["CA", "Development", "male", 12],
    ["CA", "Development", "female", 25],
    ["CA", "Accounting", "male", 1],
    ["CA", "Accounting", "female", 8],  
    ["CA", "Sales", "male", 30],
    ["CA", "Sales", "female", 18],  
  ]);

  chart = anychart.column();
  baseMapping = dataSet.mapAs({'x': 0, 'dep': 1, 'gender': 2, 'value': 3});
  series = chart.column();

  filterChart();

  chart.container('container');
  chart.draw();
});

function filterChart() {
  var filteredMapping = baseMapping.filter("dep", function(value) { return document.getElementById("depFilter").value == '*' || value == document.getElementById("depFilter").value; });
  filteredMapping = filteredMapping.filter("gender", function(value) { return document.getElementById("genderFilter").value == '*' || value == document.getElementById("genderFilter").value; });

  series.data(filteredMapping);
}
</script>

As you can see, for each country there are filters for department and gender. Value is the number of employees. By now, the chart only displays the last recent data point for each region. What it should do is to display sum of all employees the filter applies to. Example: - when filtering for female accountants it should be 4 at US and 8 at CA - when filtering only for accountants it should be 5 for US and 9 for CA

xMode() function didn't do the job as it doesn't summarize but only overlay. Is there a way to get this working in AnyChart?

Thanks in advance and sorry if this question already has been answered, I didn't find a suitable answer when trying to search for it.

Solution

  • The Cartesian chart doesn't apply any aggregations to user's data. If there are several values for the same category (US or CA), the chart will show the latest value. The latest value overrides the previous ones. To meet your requirements you should preprocess data before applying to the chart. It means that in filter function you should create new data set that includes aggregated values according to filtering conditions. For example, you want to show the total number of employees in "development". Then you should sum "male" and "female" of "development" in US and CA. Then resulting data set should look like this:

      var dataSet = anychart.data.set([
    ["US", 23],
    ["CA", 37]
  ]);

    And then apply this new data set to the chart. It can be done inside the filter function.