I need to position a line or rectangle in a given position for every category in a column chart. How can i position something in a position based on the Y axis values?
E.G. the Y axis has values from 0 to 1500, i want to position the first annotation line at 200.
Just to see what it should look like, this is the fiddle of the chart where i use some columns to position the annotation line (but then i can't hide those columns).
https://jsfiddle.net/21br83pz/
"annotations": {
"showbelow": "0",
//Annotations on a chart can be divided across multiple groups for easy management, and manipulation through API
"groups": [{
//Each group needs a unique ID
"id": "Minimi",
//Under each group, you can define multiple items. Each item is a polygon, text or image - with its own set of parameters.
"items": [{
//Each item needs a unique ID
"id": "minimo-0",
"type": "line",
"fillColor": "#6baa01",
"x": "$xaxis.0.label.0.startx",
"y": "300",
"tox": "$xaxis.0.label.0.endx"
},{
//Each item needs a unique ID
"id": "minimo-1",
"type": "line",
"fillColor": "#6baa01",
"x": "$xaxis.0.label.1.startx",
"y": "300",
"tox": "$xaxis.0.label.1.endx"
},{
//Each item needs a unique ID
"id": "minimo-2",
"type": "line",
"fillColor": "#6baa01",
"x": "$xaxis.0.label.2.startx",
"y": "300",
"tox": "$xaxis.0.label.2.endx"
},
...
] // items
}]
}
Related
I'm facing an issue while showing product variant drop down in ReactJS component.
Background of the Probelm;
A product can have multiple variants based on different options like (but not limited to) size (with values [7,8,9]), color (with values ["blue", "red", "green"]) or type (with values ["A", "B"]). Sometimes a product can have multiple options available sometime just none.
The following data that is coming from backend, we have two options size and color with 2-2 values each. But in variant, we only have size=7, color=blue and size=9, color=red
{
"data": {
"id": 3,
"name": "Awesome product",
"variants": {
"1": {
"price": "120.00",
"quantity_in_stock": 10,
"Size": "7",
"Color": "blue"
},
"2": {
"price": "125.00",
"quantity_in_stock": 12,
"Size": "9",
"Color": "red"
}
},
"options": {
"Size": [
"7",
"9"
],
"Color": [
"blue",
"red"
]
}
}
}
And I wanted to show the following data in UI,
A user can select any values from size (7,8,9) and color (blue, red) dropdowns. Now, I'm not sure how to prevent user from select variant option that is not available (for e.g. size=7, color=red)
I am using vega-lite to create a pie chart (on Airtable). I have a single data point, which is a target set by me, and the percentage complete for that target. For example, as below:
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
I would like to make a pie chart that is 60% complete, and the rest empty. Similar to the interactive single arc pie chart displayed https://vega.github.io/vega-lite/docs/arc.html.
My code currently looks like this
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Customer Acquired",
"width": "container",
"height": "container",
"data": {
"values": [
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
]},
"mark": {
"type": "arc",
"tooltip": true
},
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative"
}
}
}
And my pie chart currently just looks like this:
I realise I could force the pie chart to appear the way I want it by manually setting the theta2 property like so
"mark": {
"type": "arc",
"tooltip": true,
"theta2": 3.5
}
However I don't know what the "Percentage complete" field will be and this value may change often, so I would rather not have to do it manually. Is this at all possible with vega-lite?
The domain for the theta encoding will automatically be set to the minimum and maximum of your input data. To show the correct portion of the chart, you need to set the domain to [0, 100]:
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative",
"scale": {"domain": [0, 100]}
}
}
You can view the resulting chart in the vega editor:
i have made some charts for spreader beams in Amcharts (Worpress) and want to change the toolstips,
reverse the order of the 2 values.
append "tonnes" and "metres" after the respective values.
I can swap the order they appear in the code to change the order they appear, but how to append in plain text after the digit values so it shows "8 tonnes: 2 metres"?
Code for these is below in the tooltipText:
"series": [{
"type": "LineSeries",
"name": "30° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value1",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
}, {
"type": "LineSeries",
"name": "45° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"dataFields": {
"valueY": "value2",
"categoryX": "category"
},
"simplifiedProcessing": true,
"calculatePercent": true,
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
url is https://applifting.ga/modular-spreader-beams/sectionlift-6/
Thanks
Just swapped the order of the tool tip values and appended in plain text the denominator.
I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.
What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.
I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?
Working:
"series": [
{
"data": [
{
"y": 92,
"name": "Apples: 92ms for 83,481,430 requests",
"color": "#91cb73"
},
{
"y": 761,
"name": "Bananas: 761ms for 58,050,877 requests",
"color": "#ab7053"
},
{
"y": 774,
"name": "Kiwis: 774ms for 362,294 requests",
"color": "#44719c"
}
]
}
]
Demo: http://jsfiddle.net/b65kp/
Not working:
"series": [
{
"name": "Apples",
"data": {
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}
},
{
"name": "Bananas",
"data": {
"y": 761,
"name": "761ms for 58,050,877 requests",
"color": "#ab7053"
}
},
{
"name": "Kiwis",
"data": {
"y": 774,
"name": "774ms for 362,294 requests",
"color": "#44719c"
}
}
]
Demo: http://jsfiddle.net/u74Qw/1/
The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:
"data": [{
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}]
Here is your full fix, but it might not give the result you expect, personally I like your first attempt better
FWIW, alternate approach to setting this up:
http://jsfiddle.net/jlbriggs/zbW4D/
Things to consider:
1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)
2) rotating labels always adds more work for the user
3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction
A horizontal bar chart with no legend and single color for data solves these problems.
here is the configuration code: http://pastebin.com/3W3r9sHQ
apologies for the formatting but it is generated rather than written
I would like the labels to align with the columns and to be able to add my own labels which I think can be done with categories
You are plotting each point to a different series !!! It should be a single series with multiple points to get things right. You will also need to define an xAxis that contains all the x values in the correct order.
"xAxis": {
"categories": [
'Core i7-3770 4-Core 3.4GHz',
'Core 2 Duo E4600 2.4GHz',
'Pentium Dual Core E2200 2.2GHz'
]
}
Set all the values into the data array with y value and the color
"series": [{
"type": "column",
"name": "Popular CPU",
"data": [
{
"color": "#AA4643",
"y": 100},
{
"color": "#4572A7",
"y": 13.24},
{
"color": "#AA4643",
"y": 12.03}
]
}]
demo basic # jsFiddle
demo # jsFiddle