I am creating a Classic layout using rows, column and measure. I want to add a static column( without doing any sum/average) as a last column. How can this be achieved?
Given the following configuration:
"rows": [
{
"uniqueName": "Type",
"sort": "desc"
},
{
"uniqueName": "SubCategory"
}
],
"columns": [
{
"uniqueName": "Month"
},
{
"uniqueName": "Measures"
}
],
"measures": [
{
"uniqueName": "Amount",
"aggregation": "sum",
"format": "02fecc33bec74ccd9c8a0835259938f0"
},
{
"uniqueName": "Budget",
"formula": "min('BudgetAmount') ",
"caption": "Budget"
}
]
How can I display “Budget” column, which is static and will be the same, only once; whilst “Amount” is categorized by “Month”?
Can you please help me with an example incase it can be achieved by creating an additional instance of WebDataRocks to display the “Budget” measure with the desired configuration? I am not sure how this can be done.TIA
There is no built-in solution because, as a general rule, the pivot table approach does not allow adding fixed columns.
As a workaround, you can create the second component with following slice:
slice: {
rows: [{
uniqueName: "Type",
sort: "desc"
},
{
uniqueName: "SubCategory"
},
],
columns: [{
"uniqueName": "[Measures]"
}],
measures: [{
uniqueName: "Budget",
formula: "min('BudgetAmount') ",
caption: "Budget",
}]
}
}
Related
The linked chart contains only a legend and the legend works as follows:
clicking on a fruit name toggles it on and off
shift-clicking on a fruit name switches it ON and switches OFF all other fruit names
Legend display is controlled by two entities:
data set SELECTED remembers selected items
signal FILTERMODE toggles the type of the filter between include and exclude
Currently, if only one fruit name is ON, then a click on it switches it OFF (so all fruit names become OFF).
I would like to modify this behavior so that a click on the last enabled fruit name would switch everything ON.
(In other words - it would not be possible to deselect everything.)
In order to switch everything ON I only need to change the value of signal FILTERMODE to exclude. This is where I hit a snag.
I have tried the following in the signal definition:
"update": "event.shiftKey? 'include' : (length(data('selected'))? filtermode : 'exclude')",
This does not work. I am fairly sure this happens because of a race condition.
When I check for the length of data('source'), it is still non-empty.
So the sequence of events is the following:
click
update signal FILTERMODE (check if the data set SELECTED is empty - it is not)
update data set SELECTED (only now it has become empty)
What would be the most elegant work-around?
Try this instead. It is the same as your code but also checks the length of the array which your single line doesn't currently do.
You can now shift click melon and then click it normally and the filter mode will switch.
Editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A scatter plot example with interactive legend and x-axis.",
"width": 200,
"height": 200,
"padding": 5,
"autosize": "pad",
"signals": [
{
"name": "shift",
"value": false,
"on": [
{
"events": "#legendSymbol:click, #legendLabel:click",
"update": "event.shiftKey",
"force": true
}
]
},
{
"name": "clicked",
"value": null,
"on": [
{
"events": "#legendSymbol:click, #legendLabel:click",
"update": "{value: datum.value}",
"force": true
}
]
},
{
"name": "filtermode",
"value": "exclude",
"on": [
{
"events": "#legendSymbol:click, #legendLabel:click",
"update": "event.shiftKey? 'include' : (length(data('selected') == 0)? filtermode : 'exclude')",
"force": true
}
]
}
],
"data": [
{
"name": "source",
"values": [
{"fruit": "apple"},
{"fruit": "plum"},
{"fruit": "pear"},
{"fruit": "melon"},
{"fruit": "grape"},
{"fruit": "strawberry"}
]
},
{
"name": "selected",
"on": [
{"trigger": "clicked && (event.shiftKey)", "remove": true},
{"trigger": "clicked && (event.shiftKey)", "insert": "clicked"},
{"trigger": "clicked && (!event.shiftKey)", "toggle": "clicked"}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"range": {"scheme": "category10"},
"domain": {"data": "source", "field": "fruit"}
}
],
"legends": [
{
"stroke": "color",
"title": "Fruit",
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"fill": {"value": "transparent"},
"strokeWidth": {"value": 2},
"opacity": [
{
"test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
"value": 1
},
{
"test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
"value": 1
},
{"value": 0.15}
],
"size": {"value": 64}
}
},
"labels": {
"name": "legendLabel",
"interactive": true,
"update": {
"opacity": [
{
"test": "filtermode == 'exclude' && !indata('selected', 'value', datum.value)",
"value": 1
},
{
"test": "filtermode == 'include' && indata('selected', 'value', datum.value)",
"value": 1
},
{"value": 0.25}
]
}
}
}
}
]
}
Are you checking the length of the correct array? It is hard to understand precisely what the desired behaviour is but if I add the code (depending on whether filter mode is include or exclude)
length(data('selected')) == 6
or
length(data('selected')) == 0
then it seems to work.
Editor
I created a dashboard in Kibana and included also some Vega visualizations. My problem is that I cannot make the Vega bar chart responsive in sense of dynamically adjusting the size when the window size changes:
The bar chart on the dashboard
Settings:
autosize: {
type: "fit",
contains: "padding",
resize: true,
}
Bar chart on the dashboard
The bar chart after resizing - data does not adjust to the window
Bar char after resizing
I also tried to follow the instructions here https://vega.github.io/vega-lite/docs/size.html and used setting width or height to "container", but nothing worked, or I am defining them incorrectly.
The complete Vega specification is available below:
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
title: Test
autosize: {
type: "fit",
contains: "padding",
resize: true,
},
// Define the data source
data: {
url: {
%context%: true
%timefield%: time
index: test
body: {
"aggs":{
"date_hist":{
"date_histogram": {
"field": "time",
"calendar_interval": "day",
"format": "strict_date"
},
"aggs":{
"state":{
"terms": {
"field": "f.keyword",
"include":["active","revoked"],
"min_doc_count": 0,
"size": 10000
}
},
"increased":{
"bucket_script": {
"buckets_path": {
"in": "state['active']>_count",
"out": "state['revoked']>_count"
},
"script": "params.in - params.out"
}
},
"active_patients":{
"cumulative_sum": {
"buckets_path": "increased"
}
}
}
}
},
"size":0
}
}
format: {property: "aggregations.date_hist.buckets"}
}
mark: bar
encoding: {
x: {
field: key_as_string
type: ordinal
axis: {title: "Date", "labelAngle": 45}
}
y: {
field: active_patients.value
type: quantitative
axis: {title: " "}
}
"color": {"value": "#00A6CE "}
}
}
I would appreciate any assistance!
You need to create a signal that will listen window resize event.
This signal will read the container width.
"signals": [
{
"name": "width",
"init": "containerSize()[0]",
"on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
}
],
After that, you need to define a range on xscale to read the signal previously created.
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "your_value"},
"range": [0, { "signal": "width" }],
"padding": 0.05
},
]
I have a page in contentful which I retrieve content to my react app with graphql.
In this page, a link a content model called Person which is like that:
{
"name": "Person",
"description": "",
"displayField": "name",
"fields": [
{
"id": "name",
"name": "Name",
"type": "Symbol",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false
},
{
"id": "profilePic",
"name": "profile pic",
"type": "Link",
"localized": false,
"required": true,
"validations": [],
"disabled": false,
"omitted": false,
"linkType": "Asset"
},
{
"id": "socialLinks",
"name": "social links",
"type": "Array",
"localized": false,
"required": false,
"validations": [],
"disabled": false,
"omitted": false,
"items": {
"type": "Link",
"validations": [
{
"linkContentType": [
"socialLink"
]
}
],
"linkType": "Entry"
}
}
ProfilePic is another content model which include name and picUrl.
SocialLinks is an array of socialLink content model which contain name and link
I can retrieve without problem my profilePic name or picUrl but I cannot get the socialLinks.
I have read the contentful documentation about one-to-many but is not clear to me how to apply to my case: https://www.contentful.com/developers/docs/references/graphql/#/reference/schema-generation/one-to-many-multi-type-relationships
My query:
...rest of the query..
founder{
name,
profilePic{
url,
title
},
socialLinksCollection {
items {
name,
link
}
}
},
... rest of the query...
Can somoene help me understand why it doesn't work as a normal collection?
Should I maybe use this concept of linkedFrom? But how exactly?
I had to add (limit: 1) to my socialLinksCollections otehrwise there were too many calls and wasn't possible to get the data back.
Thanks to #stefan judis for the suggestion where to look out for the errors.
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
Here is my fiddle!
I dont want to show compare to block and i tried with making comaparable to false, but this didn't work.
"stockGraphs": [ {
"id": "g1",
"valueField": "value",
"comparable": false,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
} ],
You can set compared to true in your other datasets (ignore the first one as it is always displayed by default) to show the datasets without using the selector:
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
//don't set compared in the first dataset or it will be displayed twice
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"compared": true,
"categoryField": "date"
},
// ... etc
If you want to display the other datasets without the percent change, set recalculateToPercents to "never" in your desired panel(s) or globally in panelsSettings.
Updated fiddle
Edit
If you're looking to just hide the "Compare To": section, add the following CSS:
.amcharts-compare-div {
display: none;
}
/* hide the br tags before and after the dropdown, brining the compare to box up */
.amcharts-data-set-selector-div br:first-child, .amcharts-data-set-selector-div br+select+br, .amcharts-data-set-selector-div br+select+br+br {
display: none;
}
You also need to set the dataSetSelector's compareText property to an empty string.
Updated fiddle