# Visualization directive for a histogram

**URL:** <https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040>\
**Category:** Kibana\
**Created:** [March 21, 2018, 4:57pm UTC](https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040 "2018-03-21T16:57:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jordyd](https://avatars.discourse-cdn.com/v4/letter/j/a6a055/32.png) [@jordyd](https://discuss.elastic.co/u/jordyd)\
**Post date:** [March 21, 2018, 4:57pm UTC](https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040/1 "2018-03-21T16:57:45Z")

</div>

I'm making my own plugin for Kibana. In my plugin I want to use a visualization to display some data in a histogram. I followed the tutorial on [https://www.elastic.co/blog/developing-new-kibana-visualizations](https://www.elastic.co/blog/developing-new-kibana-visualizations), where it showed how to create a tagcloud in a plugin. I was able to get this to work but when I change this to a histogram I get the error: 'flattenDataObjUtilService expects an object with a series, rows, or columns key'. I don't know how the data should be written inside the myVisData. I need it to show a range of variables on the Y axis and the date range on the X. If someone could give me an example, that would be really helpful.

```javascript
const visConfig = {
    type: 'histogram'
  };

$scope.myVisData = {
    tables: [{
      columns: [
        { title: 'Tag' },
        { title: 'Count' }
      ],
      rows: [
        ['test', 100],
        ['tag', 150],
        ['for', 200],
        ['tagcloud', 10],
      ]
    }]
  };

const Vis = Private(VisProvider);
$scope.myVis = new Vis('logstash-*', visConfig);

```

---

<div class="post-metadata">

**Author:** ![Stacey\_Gammon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/stacey_gammon/32/14025_2.png) [@Stacey\_Gammon](https://discuss.elastic.co/u/Stacey_Gammon)\
**Post date:** [March 21, 2018, 6:09pm UTC](https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040/2 "2018-03-21T18:09:05Z")

</div>

This is how the visData is structured for a vertical bar chart. Maybe if you set up your data similarly it'll work?

![37%20PM](https://us1.discourse-cdn.com/elastic/original/3X/a/7/a7229215ab886e306a0ff4f4dce6e1263ff20dff.png)

---

<div class="post-metadata">

**Author:** ![jordyd](https://avatars.discourse-cdn.com/v4/letter/j/a6a055/32.png) [@jordyd](https://discuss.elastic.co/u/jordyd)\
**Post date:** [March 22, 2018, 9:09am UTC](https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040/3 "2018-03-22T09:09:15Z")

</div>

Thanks for the answer. I got it to work but now when I hover over a bar, I get a 'Uncaught TypeError: self.formatter is not a function' error. I'm guessing that a certain setting is missing to fix or disable the hover.

```javascript
$scope.myVisData = {
   series: [{
        aggId:"1",
        aggLabel:"Root Errors",
        label:"Root Errors",
        values: [
         { x: 1521654330000, y: 1},
         { x: 1521654360000, y: 5},
         { x: 1521654390000, y: 2},
         { x: 1521654320000, y: 4}
        ]
      }
      ]
    };

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 20, 2018, 1:12pm UTC](https://discuss.elastic.co/t/visualization-directive-for-a-histogram/125040/5 "2018-04-20T13:12:17Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.