I am using Vega and I am stuck on this simple issue. I want to display
The yield is 43.67%
However using the samples provided I have managed to just display the value 43.67
{
mark:
{
type: "text",
align: "center",
fontSize: 40,
fontWeight: "bold"
},
encoding:
{
"text": {"field": "Yield", "type": "quantitative",format: ".2f"}
}
}
Is it possible to add some text in front of this value and put a % sign after it?
THe best way to add this sort of complicated annotation is using a calculate transform; for example:
{
mark:
{
type: "text",
align: "center",
fontSize: 40,
fontWeight: "bold"
},
transform:
[
{"calculate": "'The yield is ' + datum.Yield + '%'", "as": "annotated_yield"}
],
encoding:
{
"text": {"field": "annotated_yield", "type": "nominal"}
}
}
Related
I am using dash_table.DataTable() with cell value of date string. I use editable=True so I can delete and change whole cell's value. I am wondering if I can edit part of string value? For example, below the cell value is a date string of 2021-10-31 18:00. How can I just change month or hour data or whatever without changing whole string? Typically, we just double click the location to highlight the part which need to be changed. But this double-click doesn't work for DataTable. Thanks
from dash_table import DataTable
mytable=DataTable(
id="date-table",
columns=columns,
data=data,
editable=True,
active_cell={"row": 0, "column": 0},
fixed_rows={"headers": True},
sort_action="native",
derived_virtual_data=data,
style_table={
"minHeight": "85vh",
"height": "85vh",
"overflowY": "scroll",
"borderRadius": "0px 0px 10px 10px",
},
style_cell={
"whiteSpace": "normal",
"height": "auto",
"font-family": "verdana",
},
style_header={
"textAlign": "center",
"fontSize": 14,
},
style_data={
"fontSize": 12,
},
style_data_conditional=[
{
"if": {"column_id": 'Well'},
"width": "30%",
"textAlign": "center",
"textDecoration": "underline",
"cursor": "pointer",
},
{
"if": {"column_id": 'Type'},
"width": "50%",
"textAlign": "center",
},
{
"if": {"column_id": 'Pad'},
"width": "20%",
"textAlign": "center",
},
{"if": {"row_index": "odd"}, "backgroundColor": "#fafbfb"},
],
)
It appears this is possible by double clicking THEN moving the arrow keys. Requires hitting enter to save changes. If you lose focus, they're gone.
I'm using dash 2.0.0 and dash-datatable 5.0.0.
I have a json object for chart like below:
{
"results": [
{
"dataSets": {
"One": {
"label": "testLabel",
"labels": "test",
"data": [
"10",
"58"
]
}
},
"chart": [
{
"key": "test",
"label": "chart-1",
"chartType": "bar",
"order": "1",
"dataSets": [
{
"style": "line",
"key": "One"
},
]
}
]
}
]
}
I want to get dataSets values like label, labels, data of “one” in chart’s dataSets by providing “one” as key.
Is it possible to do in javascript or vue?
Yes, it is possible. But you will need to make a series of Array.map() to achieve this.
const results = [{
dataSets: {
One: {
label: "testLabel",
labels: "test",
data: ["10", "58"]
}
},
chart: [{
key: "test",
label: "chart-1",
chartType: "bar",
order: "1",
dataSets: [{
style: "line",
key: "One"
}]
}]
}];
const modifiedResult = results.map(result => {
const outerDataSets = result.dataSets;
result.chart = result.chart.map(chart =>
chart.dataSets.map(innerDataSet => ({
...innerDataSet,
...outerDataSets[innerDataSet.key]
}))
);
return result;
});
console.log(modifiedResult);
Also if you are working with Vue, I think its best to put the modification of result on the computed so it will always try to add those dataSets additional data to the chart's dataSets.
Here a sample demo for implementation in Vue.
I am using gauge graph of amchart having multiple axes with the help of following code from amchart tutorial in my angular6 app.
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "red",
"type": "gauge",
"backgroundColor":"#67b7dc",
"axes": [ {
"axisColor": "#67b7dc",
"axisThickness": 3,
"endValue": 240,
"gridInside": false,
"inside": false,
"radius": "100%",
"valueInterval": 20,
"tickColor": "#67b7dc",
"backgroundColor":"#67b7dc"
}, {
"axisColor": "#fdd400",
"axisThickness": 3,
"endValue": 160,
"radius": "40%",
"valueInterval": 20,
"tickColor": "#fdd400"
} ],
"arrows": [ {
"color": "#67b7dc",
"innerRadius": "20%",
"nailRadius": 0,
"radius": "85%"
} ],
"export": {
"enabled": true
}
} );
The code works fine in my angular app, but I failed to add backgroundcolor to the axes.I found there is an option for chaging the border color of the axes, but how can I add different background colors for the two axes?
I have a JSON schema with 2 properties, minimumTolerance and maximumTolerance. I need to make sure that the value of maximumTolerance is not smaller than minimumTolerance & vice versa. Is this possible in JSON schema?
Here is an example of what I'd like to be able to do:
{
"$schema": "http://json-schema.org/draft-06/schema#",
"title": "MinMax",
"description": "Minum & Maximum",
"type": "object",
"properties": {
"minimumTolerance":{
"type": "number"
"maximum":{
"$ref":"maximumTolerance"
}
}
"maximumTolerance":{
"type": "number"
"minumum": {
"$ref":"minimumTolerance"
}
}
}
As of Draft-7 of the specification there is no way to do this with JSON Schema.
If you are using AJV You can do this using $data and relative JSON pointers. Example:
low: {
type: 'integer',
maximum: {
$data: '1/high',
},
exclusiveMaximum: true,
},
high: {
type: 'integer',
minimum: {
$data: '1/low',
},
exclusiveMinimum: true,
},
Yes, but it may not be the dynamic answer you are looking for...put in the values of min and max for the range expected:
"MinimumTolerance": {
"type": "number",
"minimum": 0,
"maximum": 6000,
},
"MaximumTolerance": {
"type": "number",
"minimum": 6001,
},
We have Kendo scheduler, where we declaring categories. In event model we have categories field, which represents string array.
In scheduler declaration we also have resources, such as this:
resources: [{
field: "categories",
dataSource: [{
text: "",
value: "red",
color: "#FF0000"
}, {
text: "",
value: "green",
color: "#00FF00"
}, {
text: "blue",
value: "blue",
color: "#0000FF"
}],
multiple: true,
title: "Category"
}],
In scheduler editing template we have
<label for="categories">Categories</label>
<select data-bind="value:categories" name="categories" id="categories" multiple="multiple" data-placeholder="Select categories...">
</select>
and in scheduler edit(e) callback
var categ_editor = $("#categories").kendoMultiSelect({
dataTextField: "value",
dataValueField: "value",
itemTemplate: '<div class="k-state-default" style=\"width:100%; height:16px;\" ><div style=\"background-color:#:data.color#; width:14px; height:14px;display:inline-block;\" ></div> #: data.value #</div>',
tagTemplate: '<span class="k-state-default"><b style=\"background-color:#:data.color#;\" > </b> #: data.value #</span>',
dataSource: {
data: [{
text: "",
value: "red",
color: "#FF0000"
}, {
text: "",
value: "green",
color: "#00FF00"
}, {
text: "",
value: "blue",
color: "#0000FF"
}]
}
}).data("kendoMultiSelect");
So, scheduler showing all good, and handle multiple values correct.
But when I'm editing categories, scheduler sends whole Category object (with text and color) like this
"Categories": [{
"text": "",
"value": "red",
"color": "#FF0000"
}, {
"text": "",
"value": "green",
"color": "#00FF00"
}]
but correct JSON must be "Categories":["red","green"]"
How to fix this behavior?
Your multiselect data source contains collection of objects, therefore the value you get from multiselect will be in form of object. This is because valuePrimitive property, by default it is set to false so it will return type of data inside its data source which in this case is object instead of primitive value.
You should change it to true, to make it return just its value not the whole object. Your multiselect definition should be like this:
var categ_editor = $("#categories").kendoMultiSelect({
valuePrimitive: true, // this prop you should add
dataTextField: "value",
dataValueField: "value",
}).data("kendoMultiSelect");
See this dojo to know the difference.