I am trying to display a chart with tool tips but I cannot seem to figure out how you put in tool tips when you write your own JSON for the chart.
Is this possible?
Here is the JSON I have written so far:
var days_of_week_chart = {
"elements": [
{
"type": "bar",
"values": [33,0,0,0,0,0,0,],
}
],
"title": {
"text": "Visitors By Day of Week"
},
"x_axis":{
"stroke":1,
"tick_height":10,
"colour":"#d000d0",
"grid_colour":"#00ff00",
"labels": {
"labels": ["Saturday","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday",]
}
},
"y_axis": {
"stroke": 4,
"steps": 5,
"tick_length": 5,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 33 }
};
You need to have the tooltip element, and tip element in the data series:
{ "elements": [ { "type": "hbar", "values": [ { "right": 4 }, { "right": 8 }, { "right": 3 }, { "right": 4 }, { "right": 7 }, { "right": 8 } ], "colour": "#86BBEF", "tip": "Months: #val#" } ], "title": { "text": "Total hours on project mayhem" }, "x_axis": { "offset": false, "min": 0, "max": 10 }, "y_axis": { "offset": 1, "labels": [ "Jeff", "Geoff", "Bob", "Terry", "Duncan", "monk.e.boy" ] }, "tooltip": { "mouse": 2, "stroke": 1, "colour": "#000000", "background": "#ffffff" } }
Related
I am trying to make a custom word cloud visualization from the existing index using vega in kibana dashboard.
It is showing error as "Cannot read properties of undefined (reading 'datum')".
I have used type-formula in "transform property" to create custom visualization word cloud rather than these any types are there?
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"title": "A Wordcloud",
"width": 900,
"height": 500,
"padding": 100,
"autosize": "none",
"background": "pink",
"data": [
{
"name": "table",
"url": {
"index": "nupur2",
"body": {
"aggs": {
"2": {
"terms": {"field": "hashtags","order":{"_count": "asc"}, "size": 100},
"aggs": {
"_count": {
"avg": {"field": "vaderSentiment"}
}
}
}
}
}
},
"format": {"property": "aggregations.2.buckets"},
"transform": [
{
"type": "formula",
"as": "angle",
"expr": "datum.size >= 4 ? 0 : [-45,-30, -15, 0, 15, 30, 45][floor(random() * 7)]"
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "hashtags"},
"range": ["green", "orange", "red"]
}
],
"marks": [
{
"type": "group",
"from": {"data": "table"},
"encode": {
"enter": {
"text": {"field": "hashtags"},
"align": {"value": "center"},
"baseline": {"value": "alphabetic"},
"fill": {"scale": "color", "field": "hashtags"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
},
"transform": [
{
"type": "wordcloud",
"size": [800, 400],
"text": {"field": "hashtags"},
"rotate": {"field": "datum.angle"},
"font": "Helvetica Neue, Arial",
"fontSize": {"field": "datum.size"},
"fontWeight": {"field": "datum.weight"},
"fontSizeRange": [12, 56],
"padding": 2
}
]
}
]
}
This is the image which I got output : https://i.stack.imgur.com/nbb8f.png
I want to have a tree chart of my data using vega in kibana 7.9.0, but I don't know how to write the query for that.
the below code is an example of tree chart from github website. I want such layout for my own index which I have it in kibanan.
Help me how to do that.
tree chart example
Sample tree chart code:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
"width": 1000,
"height": 1600,
"padding": 5,
"signals": [
{
"name": "labels", "value": true,
"bind": {"input": "checkbox"}
},
{
"name": "layout", "value": "tidy",
"bind": {"input": "radio", "options": ["tidy", "cluster"]}
},
{
"name": "links", "value": "diagonal",
"bind": {
"input": "select",
"options": ["line", "curve", "diagonal", "orthogonal"]
}
},
{
"name": "separation", "value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "tree",
"url": "data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {"signal": "layout"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": {"signal": "separation"},
"as": ["y", "x", "depth", "children"]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{ "type": "treelinks" },
{
"type": "linkpath",
"orient": "horizontal",
"shape": {"signal": "links"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"range": {"scheme": "magma"},
"domain": {"data": "tree", "field": "depth"},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#ccc"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree"},
"encode": {
"enter": {
"size": {"value": 100},
"stroke": {"value": "#fff"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"scale": "color", "field": "depth"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"text": {"field": "name"},
"fontSize": {"value": 9},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "datum.children ? -7 : 7"},
"align": {"signal": "datum.children ? 'right' : 'left'"},
"opacity": {"signal": "labels ? 1 : 0"}
}
}
}
]
}
I recommend going and learning the Kibana Vega interaction, Vega spec and elasticsearch search api. This is too broad of a question, you are basically asking someone to do the work for you which is easily deducible from the the documentation.
https://www.elastic.co/guide/en/kibana/current/vega.html
https://vega.github.io/vega/docs/
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-search.html
This is a piece of my data stored :
[
{
"name": "disk.device.write.requests",
"type": "cumulative",
"unit": "request",
"volume": 0,
"user_id": "b0407ee332f6474c87d1e666262d4783",
"project_id": "75ebb9556f8c4e36b0d3e722a57ff3bb",
"resource_id": "7837ab92-5eb7-4cdc-9da3-5f1d2a385841-hda",
"timestamp": "2021-11-14T13:28:45.873289",
"resource_metadata": {
"display_name": "ali",
"name": "instance-00000004",
"instance_id": "7837ab92-5eb7-4cdc-9da3-5f1d2a385841",
"instance_type": "Tochal",
"host": "b34b47c6129603ae3d0387bfa8bf8fe487b0a8424d7e3debb6c69b6d",
"instance_host": "os",
"flavor": {
"id": "t1",
"name": "Tochal",
"vcpus": 4,
"ram": 4096,
"disk": 40,
"ephemeral": 0,
"swap": 0
},
"status": "active",
"state": "running",
"task_state": "",
"image": {
"id": "f77ec16e-1c4e-4ed7-b340-b537ab008367"
},
"image_ref": "f77ec16e-1c4e-4ed7-b340-b537ab008367",
"image_ref_url": null,
"architecture": "x86_64",
"os_type": "hvm",
"vcpus": 4,
"memory_mb": 4096,
"disk_gb": 40,
"ephemeral_gb": 0,
"root_gb": 40,
"disk_name": "hda"
},
"source": "openstack",
"id": "cafd91ab-454e-11ec-b8ba-3b125e027b37",
"monotonic_time": null
}
...]
I've written an aggregation to group data in one hour by name field for a project:
{
index: 'cm',
size: 0,
pretty: true,
body: {
query: {
bool: {
must: [
{
match: {
project_id: '75ebb9556f8c4e36b0d3e722a57ff3bb',
},
},
{
range: {
timestamp: {
gte: 'now-1H',
},
},
},
],
},
},
aggs: {
names: {
terms: { field: 'name' },
aggs: {
myvalue: { sum: { field: 'volume' } },
},
},
},
},
}
And it's output is:
"aggregations": {
"names": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 4,
"buckets": [
{
"key": "disk.device.read.bytes",
"doc_count": 8,
"hatprice": {
"value": 2311073040
}
},
{
"key": "disk.device.read.requests",
"doc_count": 8,
"hatprice": {
"value": 68796
}
},
{
"key": "disk.device.write.bytes",
"doc_count": 8,
"hatprice": {
"value": 13117853696
}
},
{
"key": "disk.device.write.requests",
"doc_count": 8,
"hatprice": {
"value": 776618
}
},
{
"key": "cpu",
"doc_count": 4,
"hatprice": {
"value": 4541150000000
}
},
{
"key": "memory.usage",
"doc_count": 4,
"hatprice": {
"value": 1741
}
},
{
"key": "network.incoming.bytes",
"doc_count": 4,
"hatprice": {
"value": 532735722
}
},
{
"key": "network.incoming.packets",
"doc_count": 4,
"hatprice": {
"value": 864945
}
},
{
"key": "network.outgoing.bytes",
"doc_count": 4,
"hatprice": {
"value": 58562803
}
},
{
"key": "network.outgoing.packets",
"doc_count": 4,
"hatprice": {
"value": 439204
}
}
]
}
}
I need to aggregate base on volume field minus previous hour volume value.
Is it possible?
e.g: network.incoming.bytes in current hour. (not from first).
I think I've solved the problem using SERIAL_DIFF but not sure:
{
index: 'cm',
size: 0,
pretty: true,
body: {
query: {
bool: {
must: [
{
match: {
project_id: '75ebb9556f8c4e36b0d3e722a57ff3bb',
},
},
{
range: {
timestamp: {
gte: 'now-2H',
},
},
},
],
},
},
aggs: {
names: {
terms: { field: 'name' },
aggs: {
mydateh: {
date_histogram: {
field: 'timestamp',
calendar_interval: 'hour',
},
aggs: {
volrate: { max: { field: 'volume' } },
diff: {
serial_diff: {
buckets_path: 'volrate',
lag: 1,
},
},
},
},
},
},
},
},
}
I am trying to create a Vega visualisation using an external URL and I want to construct the URL dynamically using some filters as input to the visualisation. My current Vega code is this:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": {
"name": "table",
"url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json"
},
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}
What I'm trying is to change the URL from "url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json" to something like "url":"https://raw.githubusercontent.com/aryak93/vega/master/data.json?projectName={projectName}" and I am expecting the project name to be populated when a user sets the filter.
So far, I have struggled to find something relevant from the Vega and Vega lite documentations. Please let me know whether this'll be possible.
I'm very new with elastic search and kibana . I'm using vega plugin in kibana visualization.
But not able to create Bar Chart using elastic search aggs.
I'm getting proper result when I'm using kibana dev tools.
I'am attaching the following details with the sample code after run this I'm getting a blank page
Visualization Section:
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "fit",
"padding": 6,
"data": [
{
"name": "traffic-revenue",
"url": {
"index": "brnl_tms_plaza",
"body": {
"size": "0",
"aggs": {
"group_by_vehicle_subcat": {
"terms": {
"field": "VehicleSubCatCode.keyword"
}
}
}
},
"format": {
"property": "aggregations.group_by_vehicle_subcat.buckets"
}
}
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "traffic-revenue",
"field": "key"
},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {
"data": "traffic-revenue",
"field": "doc_count"
},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale"
},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {
"data": "traffic-revenue"
},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "key",
"axis": {"title": "Vehicle category"}
},
"width": {
"scale": "xscale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "doc_count",
"axis": {"title": "Vehicle Rate Count"}
},
"y2": {
"scale": "yscale",
"value": 0
}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {"fill": {"value": "red"}}
}
}
]
}
Data Set
{
"took": 7,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"skipped": 0,
"failed": 0
},
"hits": {
"total": 48,
"max_score": 0,
"hits": []
},
"aggregations": {
"group_by_vehicle_subcat": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"buckets": [
{
"key": "LMV",
"doc_count": 35
},
{
"key": "BUS",
"doc_count": 3
},
{
"key": "LCV",
"doc_count": 3
},
{
"key": "MAV-5",
"doc_count": 3
},
{
"key": "MAV-4 with trailer",
"doc_count": 2
},
{
"key": "MAV-3 without trailer",
"doc_count": 1
},
{
"key": "MINI-BUS",
"doc_count": 1
}
]
}
}
}
I would recommend debugging your vega code using static data to make sure it is defined properly.
I'm not sure why, but I was able to get your visualization to draw when I set the autosize property to none and set the height and width explicitly.
Here is a vega specification based off of the one you provided which should run in the online vega editor.
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "none",
"width": 400,
"height": 500,
"padding": 20,
"data": [
{
"name": "traffic-revenue",
"values": [
{"key": "a", "doc_count": 5},
{"key": "b", "doc_count": 22},
{"key": "c", "doc_count": 1},
{"key": "d", "doc_count": 7},
{"key": "e", "doc_count": 12},
{"key": "f", "doc_count": 2}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "traffic-revenue",
"field": "key"
},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {
"data": "traffic-revenue",
"field": "doc_count"
},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale"
},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {
"data": "traffic-revenue"
},
"encode": {
"enter": {
"x": {
"scale": "xscale",
"field": "key",
"axis": {"title": "Vehicle category"}
},
"width": {
"scale": "xscale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "doc_count",
"axis": {"title": "Vehicle Rate Count"}
},
"y2": {
"scale": "yscale",
"value": 0
}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {"fill": {"value": "red"}}
}
}
]
}
You may already know this since you have the format tag on your elasticsearch data, but if your visualization is working with statically defined data, and not when you pull data from an elasticsearch query, try looking at the data source directly using the vega debuggging functions described here https://vega.github.io/vega/docs/api/debugging/.
Running the following in the browser console should let you look at the data in the format vega is receiving it. VEGA_DEBUG.view.data("")