Related
I have a line graph.
I wanted the lines to start from the y-axis only. Currently the line is starting after a break.
This is the original graph:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json
This is the chart in which I tried to get the change:
https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json
This is the current chart
I would like to change this so the lines start from the y-axis only.
How could I shift the grid lines to the right to start with the y-axis domain line or is there a better way to start the line from the domain line.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120],
"labelExpr": "abs(datum.value)"}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
You are using discrete x-axis (bands) rather than continuous. I would do something like this.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 10,
"pre_90": 15,
"pre_60": 30,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango"
},
{
"pre_120": 50,
"pre_90": 30,
"pre_60": 45,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"bandPosition": 0,
"axis":{ "bandPosition":0, "labelOffset":-55},
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
],
"scale": {
"domain": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": "0", "bandPosition": 0}}
}
]
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120]}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
I have this object containing information about photos, including details about their cropping.
{
"images": [
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [12, 345]
},
"y": {
"lat": {
"x" : [12,345],
"y": "234"
},
"long": 123
}
}
}
}
}
]
},
{
"key": "ASDV1-02.jpg",
"image_location": "image.png"
}
]
}
And I want to return the following output:
"F02":
{
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
More accurate, i want to return a new object containing all the crops objects in this object. Or a new array, whatever it is. Tried to do this with a filter method, but it was no use. Thank you in advance.
The Array filter() method creates a new array with all elements that pass the test implemented by the provided function.
If the object does not have the crops property, using filter will exclude the element from the array.
If you would like to include objects without crops, map() method might be a better option.
If you do want to capture a specific key, you can use a variation of the findKey function defined below.
var obj = {
"images": [
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [12, 345]
},
"y": {
"lat": {
"x" : [12,345],
"y": "234"
},
"long": 123
}
}
}
}
}
]
},
{
"key": "ASDV1-02.jpg",
"image_location": "image.png"
}
]
};
obj.images.filter(image => image.crops);
/***
returns an array with crops if they exist.
[
{
"key": "ASDV1-01.jpg",
"image_location": "image1.jpg",
"data": {
"documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
"scandate": "Feb 1 2018 12:05PM",
"F08": "1",
"F09": "",
"F10": "101076",
"F11": ""
},
"crops": {
"F08": {
"rectangle": {
"left": 690,
"top": 2111,
"width": 597,
"height": 121
}
},
"F09": {},
"F10": {
"rectangle": {
"left": 653,
"top": 821,
"width": 653,
"height": 243
}
},
"F11": {}
}
},
{
"key": "ASDV1-01.jpg",
"image_location": "image.png",
"crops": {
"F05": {
"rectangle": {
"left": 0,
"top": 808,
"width": 624,
"height": 243
}
}
},
"metadata": [
{
"name": "colors",
"data": {
"dimensions": {
"width": 2000,
"height": 2600
},
"coordinates": {
"width": {
"x": {
"lat": 4,
"long": [
12,
345
]
},
"y": {
"lat": {
"x": [
12,
345
],
"y": "234"
},
"long": 123
}
}
}
}
}
]
}
]
*/
function findKey(group, key) {
return group.images
.filter(item => item.crops)
.filter(item => item.crops[key])
.map(item => item.crops[key])
.reduce((a,b) => Object.assign(a,b), {});
}
im trying to show data in bar highcharts.. the bar highcart should be only 2 bar and both of the bar had data ..
so here the explanation...
i have 2 categories bar chart, and both of categories have a sub categories.
to be clear here is the data of categories :
the first category :
scategori 1-1, scategori 2-1,scategori3-1
and here is the second category :
scategori 1-2,scategori 2-2,scategori 3-2,scategori 4-2,scategori 5-2,scategori 6-2
and here is the example that i want to achieve :
and both of data comes from this json data :
[{
"name": "scategories 1-1",
"color": "#1E4585",
"data": [
{
"y": 40,
"total": 40,
"data": "1",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 2-1",
"color": "#600AB5",
"data": [
{
"y": 40,
"total": 40,
"data": "2",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 3-1",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 1-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 2-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 3-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 4-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 5-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 6-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},]
and when I tried the data json above to the script of highchart . the result is not like what I want..
here is the result of my try:
can someone help me to achieve what I want to achieve or to make the result is same like what Ico want
You need to use the stack property and create two stacks. Example:
var series = [{
stack: 'A',
...
},
{
stack: 'B',
...
}
];
Live demo: http://jsfiddle.net/BlackLabel/0fbrac5g/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
The issue is that the individual sliver radius' of this variable pie chart are not consistent with the the percentage labels (i.e. 25%, 50%, 75%, and 100%). The radius' all seem to be correctly calculated, but visually I cannot seem to figure out how to get them to match correctly with the label rings. It feels like some small config property that's padding the label rings incorrectly, or maybe I just have a fundamental misunderstanding of calculating these z values. I've been spinning my wheels on this for a while now, and any help would be amazing!
Also, I currently do not have enough SO street cred to post a photo of the chart, but I will try to quickly get 10 karma in order to post it.
Edit: Yay, I did it! I have street cred now.
A good example of the current problem would be to look at the largest orange sliver in the top-center/right. That sliver is associated with the "Intellectual Engagement" item in the legend that correctly shows it's z value as 85. The problem is that 85 shouldn't extend all the way up to the 100% radius label.
Highcharts.chart('container', {
"chart": {
"type": "variablepie",
"margin": [
0,
200,
20,
0
]
},
"title": {
"text": null
},
"tooltip": {
"enabled": true
},
"legend": {
"align": "right",
"verticalAlign": "middle",
"layout": "vertical",
"rtl": true,
"labelFormat": "{name} <span style=\"opacity: 0.4;\">({z})</span>",
"itemStyle": {
"fontSize": "11px"
}
},
"plotOptions": {
"series": {
"innerSize": 0,
"stacking": "normal",
"showInLegend": true,
"point": {
"events": {}
}
}
},
"series": [
{
"minPointSize": 40,
"innerSize": 0,
"sizeBy": "radius",
"name": "Subdomain score",
"dataLabels": {
"enabled": false
},
"tooltip": {
"headerFormat": "<span style=\"color:{point.color}\">●</span><span style=\"font-size: 12px;font-weight:bold;\"> {point.key}</span><br/>",
"pointFormat": "<br/>Score: {point.z}<br/>",
"valueDecimals": 2
},
"data": [
{
"name": "Learning Strategies",
"y": 12,
"z": 48.6
},
{
"name": "Intellectual Engagement",
"y": 12,
"z": 85
},
{
"name": "Effort Control",
"y": 12,
"z": 56.6
},
{
"name": "Attention",
"y": 12,
"z": 60
},
{
"name": "Autonomy",
"y": 12,
"z": 66.6
},
{
"name": "Social Cognition",
"y": 12,
"z": 46.6
},
{
"name": "Current Emotional Health",
"y": 12,
"z": 52
},
{
"name": "Self Compassion",
"y": 12,
"z": 68.6
},
{
"name": "Stress Resilience",
"y": 12,
"z": 56
},
{
"name": "Gratitude Positivity",
"y": 12,
"z": 60
},
{
"name": "Mindset",
"y": 12,
"z": 70
},
{
"name": "Social Engagement",
"y": 12,
"z": 45
},
{
"name": "Nutrition Knowledge",
"y": 10.285714285714286,
"z": 52
},
{
"name": "Nutrition",
"y": 10.285714285714286,
"z": 66.6
},
{
"name": "Activity Level",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Aerobic Activity",
"y": 10.285714285714286,
"z": 53.4
},
{
"name": "Strength Training",
"y": 10.285714285714286,
"z": 70
},
{
"name": "Self Image",
"y": 10.285714285714286,
"z": 65
},
{
"name": "Sleep Habits",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Long Term",
"y": 14.4,
"z": 57.2
},
{
"name": "Short Term",
"y": 14.4,
"z": 48.6
},
{
"name": "Reduce Sadness",
"y": 14.4,
"z": 51.4
},
{
"name": "Increase Happiness",
"y": 14.4,
"z": 60
},
{
"name": "Non Pecuniary",
"y": 14.4,
"z": 70
},
{
"name": "Connection",
"y": 14.4,
"z": 68
},
{
"name": "Compassion Empathy",
"y": 14.4,
"z": 76
},
{
"name": "Forgiveness",
"y": 14.4,
"z": 76
},
{
"name": "Purpose",
"y": 14.4,
"z": 58.2
},
{
"name": "Presence",
"y": 14.4,
"z": 72
}
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "100%",
"minPointSize": 0,
"borderSize": 1,
"borderColor": "#000",
"dataLabels": {
"enabled": true,
"format": "100%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 0
}
],
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "75%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "75%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 75
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "50%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "50%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 50
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "25%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "25%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 25
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
}
],
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"chart": {
"margin": [
0,
0,
300,
0
],
"height": 600
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal"
}
},
"_id": "highcharts-3oqxpuf-36"
}
]
},
"colors": [
"#ff5a00",
"#ff6a00",
"#ff7e00",
"#ff9400",
"#ffb100",
"#ffd200",
"#00396f",
"#004980",
"#005f92",
"#007aa9",
"#009cc1",
"#08c6de",
"#a11500",
"#b51800",
"#c01a00",
"#cb1c00",
"#d72100",
"#e43304",
"#f26b3e",
"#006e00",
"#008200",
"#009906",
"#1cb423",
"#68d566",
"#071d9c",
"#1224ac",
"#2733be",
"#4d52d1",
"#8e8ee7"
]
});
#container {
min-width: 300px;
max-width: 800px;
height: 500px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>
The series don't have the same scale. Value 75 is the highest one and it is treated as 100%. Add the below properties to achieve the wanted result.
series: [{
minPointSize: 0,
zMax: 100,
...
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/dcaqrgot/
API Refernece:
https://api.highcharts.com/highcharts/series.variablepie.minPointSize
https://api.highcharts.com/highcharts/series.variablepie.zMax
I've been playing around with Vega, but I can't get my head around how to turn a vertical bar chart into an horizontal bar chart.
A similar question was posted a while ago here: vega horizontal bar charts but the provided answer isn't very clear on what exactly is being done to the code to produce the desired result. I also haven't been able to get the solution to run!
My understanding for now is that you need to switch the X and Y axis and scales, but where I get lost is in getting the mark to be flipped as well? I've tried setting the "x" and "y" attributes but I just get a blank chart in return... It really feels like I'm only missing one thing as my axes are right, but can't figure what it is!
EDIT: made some progress! My columns are now appearing, but their position is weirdly shifted vs the actual ticks. I've looked into adjusting the "points" parameter of the ordinal scale, but as a result the last column
The plot I obtain right now.
And with the "points" parameter set to true for the y scale.
Here's the code I have so far below
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"points": true
"range": "height",
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": {
"r": {
"value": 66
},
"g": {
"value": 190
},
"b": {
"value": 244
}
}
}
}
}
]
}
Victory!
Here's a working spec!
I used the "padding" property of the ordinal scale to get the desired result.
{
"width": 400,
"height": 400,
"padding": {
"top": 30,
"left": 40,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": "Mon",
"y": 2
},
{
"x": "Tue",
"y": 3
},
{
"x": "Wed",
"y": 10
}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "height",
"points": true,
"padding": 1,
"zero": false,
"domain": {
"data": "table",
"field": "x"
}
},
{
"name": "y",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "y"
},
"nice": true
}
],
"axes": [
{
"type": "x",
"scale": "y"
},
{
"type": "y",
"scale": "x"
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "table"
},
"properties": {
"enter": {
"x": {
"scale": "y",
"field": "y"
},
"x2": {
"value": 0
},
"yc": {
"scale": "x",
"field": "x"
},
"height": {
"value": 40
},
"fill": [
66,
190,
244
]
}
}
}
]
}