I want to group graphic elements in echarts so that I can position them together. I am not having much luck as the docs are really not that good.
I currently have the following:
option =
{
"width": 400,
"height": 300,
"graphic": [
{
"type": "group",
"left":200,
"top":20,
"elements":[
{
"type": "circle",
"shape": {
"cx": 0,
"cy": 0,
"r": 100
}
},
{
"type": "text",
"style": {
"text": "54%",
"fill": "#aaa",
}
}]
}
]
}
Not sure if the "elements" within the group is correct as the API docs do not say what element to use. Except if I am misunderstanding the concept of group.
The origin of the text graphic is top left whereas for the circle it is the center of the circle. But the group is not positioned as define in left/top
use children instead of elements if graphic type is of group.
{
"type": "group",
"left":200,
"top":20,
"children":[
{
"type": "circle",
"shape": {
"cx": 0,
"cy": 0,
"r": 100
}
},
{
"type": "text",
"style": {
"text": "54%",
"fill": "#aaa",
}
}]
}
Related
I started with this vega-lite example from the gallery and now I'd like to customize this chart by changing the default blue and orange colors to custom color by RGB value. Is that possible with vega-lite?
Yes, just set a scale.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/movies.json"
},
"repeat": {"layer": ["Worldwide Gross", "US Gross"]},
"spec": {
"mark": "bar",
"encoding": {
"x": {
"field": "Major Genre",
"type": "nominal"
},
"y": {
"aggregate": "sum",
"field": {"repeat": "layer"},
"type": "quantitative",
"title": "Total Gross"
},
"color": {"datum": {"repeat": "layer"}, "title": "Gross",
"scale": {"range": ["#2a9d8f", "#e76f51"]}},
"xOffset": {"datum": {"repeat": "layer"}}
}
},
"config": {
"mark": {"invalid": null}
}
}
I have create a connector to azureEventhub , it works fine to pull the data into the topic ,
My use case is to filter the messages that I m pullling basing on the message type .
Example :
{
"messageType": "Transformed",
"timeStamp": 1652113146105,
"payload": {
"externalId": "24323",
"equipmentType": "TemperatureSensor",
"measureType": "Temperature",
"normalizedData": {
"equipmentData": [
{
"key": "ReadingValue",
"value": 23,
"valueType": "number",
"measurementUnit": "celsius",
"measurementDateTime": "2022-05-09T16:18:34.0000000Z"
}
]
},
"dataProviderName": "LineMetrics"
},
},
{
"messageType": "IntegratorGenericDataStream",
"timeStamp": 1652113146103,
"payload": {
"dataSource": {
"type": "sensor",
},
"dataPoints": [
{
"type": "Motion",
"value": 0,
"valueType": "number",
"dateTime": "2022-05-09T16:18:37.0000000Z",
"unit": "count"
}
],
"dataProvider": {
"id": "ba84cbdb-cbf8-4d4f-9a55-93b43f671b5a",
"name": "LineMetrics",
"displayName": "Line Metrics"
}
},
}
I wanted to apply a filter on a value like shown in the pic:
enter image description here
the error that appears to me :
enter image description here
I have some time-data that I'd like to show with Chart.js. The graph is displayed correctly, but instead of having invididual days on the x-axis, I'd like to see the months at most. I tried setting "unit"/"minUnit" like
{
"config": {
"type": "line",
"data": {
"labels": [
"2020-01-26",
[...]
"2022-01-02",
],
"datasets": [...]
},
"options": {
"elements": { "point": { "radius": 0 } },
"scales": { "xAxes": [{ "type": "time", "time": { "unit": "month" } }] }
}
}
}
but this still gives
Any hints?
It turns out you don't need a list [] for the options. The following works well:
"x": {
"type": "time",
"time": { "unit": "month" },
"grid": { "display": false }
}
I'm trying to create an indented tree e.g. as in https://observablehq.com/#d3/indented-tree
I think that what this example does which I can't replicate in vega is encapsulated in this code:
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }
eachBefore is a pre-order traversal on the output of d3.hierarchy.
Is there any way to get this result from (upstream) vega, or is this a feature request for an index output from the tree transform? (/something similar, or else a custom transform)
By the way, I think it may be easy to turn the specific tree layout example into an indented tree because the id happens to give the same 'index' ordering (I think), but think we need to use eachBefore where the data isn't so conveniently ordered.
Thanks for any suggestions!
Declan
Update
I made a change in vega-hierarchy described here:
https://github.com/declann/vega/commit/a651ff36cd3f0897054aa1b236f82e701db62432
Now I can use pre_traversal_id from tree transform output to do indented trees, e.g.:
indented tree in (custom) vega-editor, with tree output including pre_traversal_id field
Modified spec: https://gist.github.com/declann/91fd150ae04016e5890a30295fa58a07
Not sure if this help, but, when I enter at vega.github.io/vega/examples/tree-layout I played with the controls and (after change the settings to: layout:tidy - links:orthogonal - separation:true) I got a similar result you shown in the observablehq page:
Open the Chart in the Vega Editor
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": 600,
"height": 1600,
"padding": 5,
"signals": [
{
"name": "labels", "value": true
},
{
"name": "layout", "value": "tidy"
},
{
"name": "links", "value": "orthogonal"
}
],
"data": [
{
"name": "tree",
"url": "data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {"signal": "layout", "value": "tidy"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": true,
"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": "greys"},
"domain": {"data": "tree", "field": "depth"},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#828282"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree"},
"encode": {
"enter": {
"size": {"value": 25}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"field": "depth"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"text": {"field": "name"},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "datum.children ? -7 : 7"},
"align": {"signal": "datum.children ? 'right' : 'left'"}
}
}
}
]
}
I believe this is possible by adding expression transforms for x (based on tree_node depth) and y (based on the tree node id)
The gist of it is to transform x and y after the tree transform
{"type": "stratify", "key": "id", "parentKey": "parent"},
{
"type": "tree",
"method": {"signal": "layout"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": {"signal": "separation"},
"as": ["_", "_", "depth", "children"]
},
{"type": "formula", "expr": "datum.depth * 20", "as": "x"},
{"type": "formula", "expr": "datum.id * 14", "as": "y"}
Here's an example that modifies the Vega Tree layout example
How can I replace the color in the pie chart?
Please find my code below :
AmCharts.makeChart("pie-diagramm", {
"type": "pie",
"theme": "none",
"dataProvider": [{
"title": "Интернэшнл",
"value": 100
}, {
"title": "Казахстан",
"value": 90
},{
"title": "Лтд",
"value": 100
},
{
"title": "Лимитед",
"value": 400},
{
"title": "компания",
"value": 400},
{
"title": "ЛУКАРКО",
"value": 600},{
"title": "Компани",
"value": 700
},
{
"title": "«КазМунайГаз»",
"value": 900},{
"title": "КТК",
"value": 350},
{
"title": "Федерация",
"value": 1300},
{
"title": "Пайплайн",
"value": 90}
],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"fontSize": 16,
"radius": "25%",
"innerRadius": "30%",
"labelText": "[[title]]",
"exportConfig": {
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
Thanks!
add color attribute in your DataProvider
dataProvider": [{
"title": "Интернэшнл",
"value": 100,
"color": "your choice of color"
}, {
"title": "Казахстан",
"value": 90,
"color": "your choice of color"
}
http://docs.amcharts.com/3/javascriptcharts/AmPieChart,
http://docs.amcharts.com/3/javascriptcharts/Slice
the dataprovider holds the property of each slice in pie chart
chart.chartData = dataProvider;
The best and most simple way to do this would be setting background-color style of your chart's container div. Or you can set chart.backgroundColor="#FF0000"; and chart.backgroundAlpha to some bigger than 0 value.