# To write a custom code for visualization **URL:** \ **Category:** Kibana\ **Tags:** vega, kibana-plugin-development\ **Created:** [July 7, 2022, 12:21pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112 "2022-07-07T12:21:18Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 7, 2022, 12:21pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/1 "2022-07-07T12:21:18Z")
I'm writing a custom code in kibana (vega). In which I want show the the total working hours of employe by calculating diffrence from two available fields like (out time - Intime). how can I get that in vega by writing a script. (without creating a total count of working hours field in csv file). ```auto { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "data": { "url": { "index": "data2", "%context%": true, "body": {"size": 10000} "aggs": { "Working hours": { "sum": { "script": { "source": "doc['O-time'].value - doc['I-time'].value" } } } } }, "format": {"property": "hits.hits"} }, "mark": "bar", "encoding": { "tooltip": {"field": "_source.ID", "type": "ordinal"}, "y": {"aggregate":"sum","field": "Working hours", "type": "quantitative"}, "x": {"field": "_source.NAME", "type": "ordinal"} } } ``` but using this code I'm able to get names of employe on x-axis but it shows count of working hours as zero/undefined on y axis. ![data](https://us1.discourse-cdn.com/elastic/original/3X/0/2/026965e8488b5d0cbd8410d4bd9beed5cf268c7d.png) I want the output in this format but here I've used a existing field (total working hours) from the CSV file. ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 7, 2022, 12:29pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/2 "2022-07-07T12:29:48Z")
I would just query the data as normal without a script and then use a [calculate transform](https://vega.github.io/vega-lite/docs/calculate.html) to create a new total field that is based on your required calculations. Would be something like the below. ```auto "transform": [ {"calculate": "datum.O-time - datum.I-time", "as": "total"} ] ``` ---
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 7, 2022, 1:12pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/3 "2022-07-07T13:12:45Z")
```auto { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "data": { "url": { "index": "data2", "%context%": true, "body": {"size": 10000} }, "format": {"property": "hits.hits"}, "transform": [ {"calculate": "datum.O-time - datum.I-time", "as": "total"} ] }, "mark": "bar", "encoding": { "tooltip": {"field": "_source.ID", "type": "ordinal"}, "y": {"field": "total", "type": "ordinal",axis:{title: "working hours of employee"} }, "x": {"field": "_source.NAME", "type": "ordinal"} } } ``` In this way ? ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 7, 2022, 1:24pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/4 "2022-07-07T13:24:42Z")
Yes, something like that. I don't know what your data looks like so it's hard to tell but that's the idea. Bring in all the data then do a transform to create a new field based off 2 others. ---
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 8, 2022, 4:48am UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/5 "2022-07-08T04:48:23Z")
ID,NAME,I-time,O-time,Date 1,Amey,10,18,01/02/2022 2,Ritika,10,17,01/02/2022 3,Shubham,10,18,01/02/2022 4,Neha,10,17,01/02/2022 5,Satish,10,17,01/02/2022 My CSV file is in this format. ---
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 8, 2022, 5:47am UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/6 "2022-07-08T05:47:29Z")
![8-7](https://us1.discourse-cdn.com/elastic/original/3X/3/4/345b1ba28e6dc3cf739ef90dbd28cf861dcd9e81.png) Did the process as we discussed .but still it shows the count of working hours as undefined, but showing the field with names on x-axis correctly. Is there anything that I'm missing?? ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 10, 2022, 11:41pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/7 "2022-07-10T23:41:15Z")
To make it easier can you provide your spec after following these [steps](https://www.elastic.co/guide/en/kibana/master/vega.html#asking-for-help-with-a-vega-spec)? ---
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 11, 2022, 5:57am UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/8 "2022-07-11T05:57:18Z")
```auto { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "data": { "format": { "property": "hits.hits" }, "transform": [ { "calculate": "datum.O-time - datum.I-time", "as": "total" } ], "url": { "index": "data2", "body": { "size": 10000, "query": { "bool": { "must": [], "filter": [], "should": [], "must_not": [] } } } }, "values": { "took": 0, "timed_out": false, "_shards": { "total": 1, "successful": 1, "skipped": 0, "failed": 0 }, "hits": { "total": 5, "max_score": 1, "hits": [ { "_index": "data2", "_type": "_doc", "_id": "n58eyYEBLNZ1PJec19vy", "_score": 1, "_source": { "I-time": 10, "@timestamp": "2022-01-02T00:00:00.000+05:30", "O-time": 18, "ID": 1, "Date": "01/02/2022", "NAME": "Amey" } }, { "_index": "data2", "_type": "_doc", "_id": "oJ8eyYEBLNZ1PJec19vy", "_score": 1, "_source": { "I-time": 10, "@timestamp": "2022-01-02T00:00:00.000+05:30", "O-time": 17, "ID": 2, "Date": "01/02/2022", "NAME": "Ritika" } }, { "_index": "data2", "_type": "_doc", "_id": "oZ8eyYEBLNZ1PJec19vy", "_score": 1, "_source": { "I-time": 10, "@timestamp": "2022-01-02T00:00:00.000+05:30", "O-time": 18, "ID": 3, "Date": "01/02/2022", "NAME": "Shubham" } }, { "_index": "data2", "_type": "_doc", "_id": "op8eyYEBLNZ1PJec19vy", "_score": 1, "_source": { "I-time": 10, "@timestamp": "2022-01-02T00:00:00.000+05:30", "O-time": 17, "ID": 4, "Date": "01/02/2022", "NAME": "Neha" } }, { "_index": "data2", "_type": "_doc", "_id": "o58eyYEBLNZ1PJec19vy", "_score": 1, "_source": { "I-time": 10, "@timestamp": "2022-01-02T00:00:00.000+05:30", "O-time": 17, "ID": 5, "Date": "01/02/2022", "NAME": "Satish" } } ] } } }, "mark": "bar", "encoding": { "tooltip": { "field": "_source.ID", "type": "ordinal" }, "y": { "field": "total", "type": "ordinal", "axis": { "title": "working hours of employee" } }, "x": { "field": "_source.NAME", "type": "ordinal" } }, "config": { "range": { "category": { "scheme": "elastic" } }, "mark": { "color": "#54B399" }, "title": { "color": "#343741" }, "style": { "guide-label": { "fill": "#69707d" }, "guide-title": { "fill": "#343741" }, "group-title": { "fill": "#343741" }, "group-subtitle": { "fill": "#343741" } }, "axis": { "tickColor": "#eef0f3", "domainColor": "#eef0f3", "gridColor": "#eef0f3" }, "background": "transparent" }, "width": "container", "height": "container", "autosize": { "type": "fit", "contains": "padding" } } ``` Have a look ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 12, 2022, 5:54pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/9 "2022-07-12T17:54:25Z")
Took me a bit but the reason this doesn't work is you have a `-` in your field name and it was translating that to a minus. To avoid that you can write it like this. ```auto "transform": [ { "calculate": "datum._source['O-time'] - datum._source['I-time']", "as": "total" } ] ``` [See in Editor](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUADM2AJ2SY0oHLrY44uzAE80GOhEox7IAL5KGuwUZA1ZyuAAetqrqAEyKIExsyjaaIBA0AF5waACMAAyZ6UoAjgwWsaBRbF5xCAwQhqgA2gC6Slo0gpgWaHVKEDBsDILKbfUg5ZUA+rJsVXUuU24gxEiC+RDemGxsANZo2SCYNAhwysPdVVrzEHBKw51IuspLcSvqpakdDFBQcBAQWj1pHWs0OHMfVQWxOTX2mxmTkwd1AD3maDESmQAUuUD0KVQzzsMLaoGGvn8QXQISQ4Qu1nMtmGyjYUAiBOBIFkYgAHHArABNACiACEADIAOQAWqkAAoAKTgUFSAE5iDYLtAMb8QJdurp3t4AJL8HZ7NJbAAC+o+6gQOFsoXSoVC-HSqXtoQAKpkQel3ZQsgBqdJiVAAZnSEQA8nrdpjUqylNqACKq2NqTEgB0EG0Ea22iKCgCCAFlubYc3sbFMFPjCYFgmoyQzKcmaXSGTQmWwJeyuXyhaLJdK5QqGcrdJGlRqtXFdabDUoTRHKkgLVabXaHU7XR63ZkvZlff6g6HwwasQB2GPx1ChJSJlq2VPpzPkkC5gu2ABKdBoaxQZYrfirJJrR9hnralaXpC4W1sNhhQ7HkBRFcUpRleVFTVIcRzQsdMVAScI2nEBZz2edF3QB97UdG113dT0fT9QNgyUMMpyxaMQDjNAAyvJNb1SNNQgzZds3zQt0AAZUYJgYAXVw3F-IlqzCOsrCpdBG3AtVIPQMxYK7BDe2QgclXRYdVXVDxxxww9I2NU1iMtUjl3ItdNw3dJt3SXd6IPZjUlPNjzwAFi4m90DvfiHyEl90EFOApJk8sNL-YkVEApSVLVMDm1bNkOTg7tEL7FDB2MjCzM1bC2Ks-DCLNBd7JAMjV0olyaJ3Oj90YqqTzPRFguTMKBKzJRnxEkBRLUGhOhk2ppiUTBdCQWQvj0BA8RAKB5igHpuIAzAGAQSgyveaoAHImIjE7agAAn4K6Qn2w6ZHMuBTtwvZLoiJA7m2cYERcAZkF0DZ0CYa4IjgWR0WUXwyGWVZmgBbxGjgXpqSe8rKHYublOTPRodkP6lEKEBkdR9B4S8bH0rx3wESUJAAkm5Y6EEZMAHc9H+WQyCuroPAgK62C0K7EBwQQ2CsOAUjLEBiW0GgUaZI64EoEaIhArSblprwZfRWRGlhuIFu5iqNpaMg9GJrhEGTFGvp2ekZcB4HQHRcXdFsABiMQAt5ANZVlVw5pZ02Sj0L2AwCgNjwC1Ig-iaxWe8MgGBbOAhCQJgUaRppShAT2ADZZWPdJjz6GYU7T8NMCTuJGkEPPPcj6PY-jshTAYHBq9r+WG4jqOY7jiuO67iBmB2GuKvrxvm8H+KQAZpn7hoKA1gAYTDj30E9qWtHSLQAwiWlkF8Df3a93f98PpR25bM-w+3y+D-j0HV-b7o-FsebFogHBrghwwMw2YtnoLYPW6hfCtCUPAGgZAsBgLkBA2QUCF4MBWAkZIywca2EaIYJQ4CkC+G+n-ZQ+NYZTCAA). ---
**Author:** ![Ritikapawar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ritikapawar/32/98580_2.png) [@Ritikapawar](https://discuss.elastic.co/u/Ritikapawar)\ **Post date:** [July 13, 2022, 5:32am UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/10 "2022-07-13T05:32:14Z")
![newS](https://us1.discourse-cdn.com/elastic/original/3X/1/5/15374578b24b45d402b36cd5a292089ed286f11a.png) Tried with the solution above, but still it shows working hours as undefined. ---
**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\ **Post date:** [July 13, 2022, 3:43pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/11 "2022-07-13T15:43:52Z")
The transform for Vega usually goes within the data object. The transform for vega-lite usually happens outside the data object. See the example link I posted in the post above to see how I did it. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [August 10, 2022, 3:44pm UTC](https://discuss.elastic.co/t/to-write-a-custom-code-for-visualization/309112/12 "2022-08-10T15:44:15Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.