Difference between histogram bars

Elastic Stack Kibana
1

Hi,
I am currently working on custom kibana visualizations.
The new visualization is similar to vertical bar chart. In that, i want to use filter aggregation. now instead of showing the metric for each filter, the bars should show the difference between the two consecutive bars. For ex: if i use two filters: whose metrics are 50 and 20 respectively, then the first bar should show, 50 and next bar should show 30(50-20). [i know that the filter metrics will keep on decreasing].
Another approach to this would be : Show the charts as it is in the filter. Add a difference button in the left side panel on kibana visualization, such that when it is ticked, the difference is shown, otherwise the original metric is shown.

Now, my question is , how much of this is feasible. To show the difference, i can do that in javascript. But i have no clue how to do that using a checkbox button (or something like that).
If someone could give their opinion on this, it would be helpful.

Thanks in advance.

-Shubham

2

I would suggest adding the checkbox to the "Options" section of the Vertical Bar Chart visualizer.

Looking at the UI code in the master branch (versioned at 6.0 right now), there's a file src/core_plugins/kbn_vislib_vis_types/public/editors/histogram.html that contains all the options for a Histogram visualization. If I add some code like this to the end of it:

<div class="vis-option-item form-group">
  <label>
    <input type="checkbox" ng-model="vis.params.calculateDifference"/>
    Calculate difference between bars
  </label>
</div>

This is the result:

I was going to say that the next thing you'd want to do is add a responseConverter to the Histogram JS to do your own calculations on the data and then return changed data to the chart. But that didn't work when I tried it - it looks like a responseConverter is just registered at the initial page load, but not re-run for every response. That's probably because in the current behavior these options control the query that gets sent to Elasticsearch and we haven't so far ever had to manipulate that data coming back based on visualization parameters.

If the responseConverter was rerun and could change directions based on change in params, then something like this would get you started:

In src/core_plugins/kbn_vislib_vis_types/public/histogram.js

import AggResponsePointSeriesPointSeriesProvider from 'ui/agg_response/point_series/point_series';
...
export default function HistogramVisType(Private) {
  ...
  const pointSeries = Private(AggResponsePointSeriesPointSeriesProvider);
  return new VislibVisType({
    ...,
    params: {
      ...
      calculateDifference: false,
      ...
    },
    responseConverter: function (vis, table) {
      if (vis.params.calculateDifference) {
        console.log('calculate difference: yes');
        // outer loop / inner loop to manipulate data
        // table.rows[row][column].key and table.rows[row][column].value
      } else {
        console.log('calculate difference: no');
      }

      const points = pointSeries(vis, table);
      return points;
    },
    ...    
  });
}

I would suggest opening a Github Issue about the behavior of responseConverter and add the "discuss" label to it, to start a discussion on whether this is behavior that should change in Kibana. Or maybe someone else will pitch an idea of a better way to do what you are trying. :slight_smile:

3

Thanks, I have tried this and it works for me. Thankyou so much.
Also can you tell me how can i access those custom labels in my controller js. I tried but coludn't access them. they do not appear in the esResponse sheet.
Is there any particular way to access the elements selected on the schema panel?

-Shubham