I am creating a simple time-based data plot using amcharts with has 5 values, its working great but every time there is 2 or more readings with the same value it stack up and only 1 bullet is visible, i tried to create a custom bullet but still no luck.
Is there a way to separate the bullets individually just to make it presentable.
Below is my code.
{
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#2980b9",
"bulletSize": 19,
"customBulletField": "bullet",
"id": "reading_4",
"lineThickness": 0,
"title": "reading_4",
"showHandOnHover": true,
"valueField": "column-8",
"balloonText": "<div style='margin:5px; font-size:12px;'>Reading 4: <b>[[value]]</b></div>",
"visibleInLegend": false,
},
Is there away to make it like below
Related
I am in the finishing stages of my first real Plotly Dash dashboard. I have run into a problem where I can't add dcc.Markdown to any dcc.Graph elements.
It works fine with the dash.DataTable, as shown in the image below.
I am using Python v3.10, Dash v 2.6.2 & Plotly 5.10.
I tried to then use the same methodology to add markdown to the chart next to it, but this throws an error
TypeError: The dash_bootstrap_components.Col component (version
1.2.1) with the ID "Graph(id='sun_burst1', figure={}, style={'height': '45vh'})" detected a Component for a prop other than children Prop
id has value Graph(id='sun_burst1', figure={}, style={'height':
'45vh'})
The DataTable is inside a Row and Col. The code is as follows. I haven't closed it below as it runs on for quite some time
dbc.Row(
# Dash Data Table
[dbc.Col(
[dcc.Markdown('### Top Risks ###'),
dash_table.DataTable(
id='table1',
columns=[
{'name': 'Risk ID', 'id': 'risk_id', 'type': 'text', 'editable': False},
Here is my erroneous code, Am I barking up the wrong Tree, does Markdown even work with dcc.Graph.
dbc.Col(
[dcc.Markdown('### Risk Breakdown ###'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '45vh'}),
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
]),
I really am quite stumped.
My page is made up of 2 rows, top row with 3 columns of width 4, Bottom Row 2 x 6 columns.
The answer was simple in the end. I had not taken into consideration where the 'children' ended.
I had the following which did not work. Note the terminating square bracket after the complete definition.
dbc.Col(
[dcc.Markdown('#### Breakdown of Risk by Risk Type - 2021 ####'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '40vh'})],
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
]),
Ther solution is as follows. encase the 'children in square brackets and leave the other column definitions outside.
Solution:
dbc.Col(
[dcc.Markdown('#### Breakdown of Risk by Risk Type - 2021 ####'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '40vh'})],
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
),
With this in place, I can now mark up my charts as I wish.
A big thank you to jinnynor at Plotly community for provoking my thoughts
I had to solve a specific problem that I'm going to explain using an image to better understand the question.
Basically the result that I wanted to obtain is this:
The white rows are the main items and the gray ones are subitems of the main. To achieve this with Bootstrap Vue tables I pass to the main table (the one contained in every accordion tab) the array with all the main items, and every main item has his subItems set contained in an array. Now to render the grey rows for every white row I used the row details slot in which I put another b-table that receives as items the subItems of the main row.
This solution looks fine but it comes with some important problems:
first of all I had to reset the row-details padding in order to align the outer table with the inner table, but it still has some differences in width (if you look close between the TDs there are some differences)
as second point, the most important one, every row has to be selectable only one per time, in order to modify the infos contained inside. At the moment I set the outer table selectable with only one row per time, and same for the inner tables, but since these are more than one it creates conflicts every time I select rows on different subitems or if I select a main item together with one or more subitems.
Now my question is:
before I proceed finding a solution maintaining the actual structure that I built, I was wondering if there is a better way to achieve this without nesting tables and at the same time maintaining the actual look of the entire table.
If this can help, I post the piece of code related to the result seen in the above image:
// OUTER TABLE
<b-table
:items="dataTable.itemsOnDesktop"
:fields="billOfMaterialsType == '2' ? dataTable.fields : dataTable.fieldsA1"
:selectable="isSelectable"
#row-selected="onRowSelected"
ref="selectableTable"
outlined
sticky-header="700px"
head-variant="light"
select-mode="single"
stacked="md"
selected-variant="danger"
details-td-class="row-details-styling"
id="outer-project-table"
bordered
fixed
:busy="tableBusy"
>
.
.
.
<template
v-if="billOfMaterialsType == '2'"
#row-details="row"
>
// INNER TABLE
<b-table
id="inner-project-table"
hover
table-variant="secondaryLight"
selected-variant="danger"
select-mode="single"
#row-selected="onRowSelected"
:selectable="isSelectable"
thead-class="hidden_header"
:fields="dataTable.fields"
:items="row.item.node.bomiteminfoSet.edges"
:ref="`innerTable-${row.item.node.id}`"
bordered
small
fixed
>
.
.
.
</b-table>
</template>
</b-table>
And here it is a short example of the dataTable.itemsOnDesktop json structure:
[{
"node": {
"id": "Qk9NSXRllE2vZGU6MjA2MzU=",
"code": "1.4.7.2.a",
"description": " INTONACO COMPLETO AL CIVILE PREMISCELATO A PROIEZIONE ...",
"quantity": "1290.00",
"unitOfMeasurement": "m2",
"bomiteminfoSet": {
"edges": [{
"node": {
"id": "Qk9YinRlbUalk87230mGlOjExOTkx",
"code": null,
"description": "PORZIONE BURLOTTI\npiano interrato, piano terra",
"parts": "955.00",
"length": null,
"width": null,
"heightOrWeight": null,
"unitOfMeasurement": null,
"quantity": "955.00"
}
},
{
"node": {
"id": "Qk9ld5RlSXRlbUaOb2RlOjExOTky",
"code": null,
"description": "PORZIONE LAZZARINI\npiano terra",
"parts": "335.00",
"length": null,
"width": null,
"heightOrWeight": null,
"unitOfMeasurement": null,
"quantity": "335.00"
}
}]
}
},
"isActive": true,
"_showDetails": true
}]
Let me know your ideas about this, I would really appreciate it.
I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?
I've been tinkering with .json file to create my own custom theme, however I am stuck on multiple choice setting. Example:
Area chart -> Format -> Data labels - > here I can customize the general setting for data labels, but what I would like to set up, is the "CUSTOMIZE SERIES" for each of the series. That is, I would like to have black text label color for the first serie, yellow for the second etc.
Below is the image from power bi for the category I am trying to customize:
Customize series in Power BI
Code for these labels:
"labels": [{
"show": true,
"color": {
"solid": {
"color": "#333333"
}
},
"labelPosition": "Under",
"fontSize": 14,
"fontFamily": "Arial",
"labelDensity": 30,
"showAll": true,
"enableBackground": true,
"backgroundTransparency": 70
What this .json code achieves, is that it sets up only the general settings for all the series. That is all series will have font size 14, font Arial, background transparency 70% etc. I would like to somehow index these series, so when this .json theme gets imported into power bi the first serie would have the customized settings that I've set up, second the same etc. E.g.:
"labelPosition": "Under",
"fontSize": 14,
"fontFamily": "Arial",
"labelDensity": 30,
"showAll": true,
"enableBackground": true,
Above are the general settings for all of the series, below would be the customized series
1. serie --->>>
"backgroundTransparency": 70
2. serie ---->>>
"backgroundTransparency": 60
3. series etc..
I have a JSON file with data as:
[{
"data": [{
"assetID": 1,
"colorCode": 3
}, {
"assetID": 2,
"colorCode": 1
}, {
"assetID": 3,
"colorCode": 4
}, {
"assetID": 4,
"colorCode": 2
}, {
"assetID": 5,
"colorCode": 3
}, {
.
.
.
"assetID": 1000,
"colorCode": 2
}]
}]
where,
assetID is unique (upto 1000)...
colorCode is a random number between 1 to 4... and each colorCode corresponds to any unique color.Like,
colorCode 1, color Green...
colorCode 2, color Orange...
colorCode 3, color Yellow...
colorCode 4, color Red...
I have created a simple webmap in ArcGIS online with one tile layer and one feature layer. Now, I have to write a code in JS where when the feature's OBJECTID matches the assetID, a point should be drawn there in the color corresponding to the colorCode on the map.
Like, for assetID 1 colorCode is 3, so at feature with OBJECTID 1 on the map, a point should be drawn there in green color and so on.
I have created the JSON file and the webmap, but I am really new to all this ArcGIs and dojo and I am really at a loss where to proceed next.
How are you hosting the application. Is it just a webmap in ArcGIS online or you using WebAppBuilder or you have a custom web application. All these factor determine whether you can customize your map or not.
Also, your layer is it a FeatureLayer or a Map Service. or just graphic data. If it is graphic data its lot easier to make the customization. Let me know more details so that I can provide you with specific answer.
Take a look at this post https://gis.stackexchange.com/questions/50558/customizing-arcgis-online-application-template-and-uploading-it-back-to-arcgis-o
it provides information on how you can customize webmap.
Hope this was helpful.