how to change background color of amchart gauge graph in angular 6 - angular6

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?

Related

how to edit string in editable datatable?

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.

Loading pushpin in the forge viewer does not respect the viewerState

We are using the "Autodesk.BIM360.Extension.PushPin" extension inside the forge viewer to enable push pins.
When a push pin has been added to the model, we serialize the pushpin data and store it in our database. An example of such a pushpin is here:
{
"id": "12",
"label": "12",
"status": "quality_issues-not_approved",
"position": {
"x": 15.324803588519861,
"y": -10.150864635427533,
"z": -5.532972775562976
},
"type": "issues",
"objectId": 24518,
"externalId": "d9a1e318-14d0-4d08-b7ab-6d1c331454c2-002793d1",
"viewerState": {
"seedURN": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"objectSet": [{
"id": [],
"isolated": [],
"hidden": [],
"explodeScale": 0,
"idType": "lmv"
}],
"viewport": {
"name": "",
"eye": ["-15.17842530349136", "-0.9048862425583284", "0.6506974303790392"],
"target": ["-22.06049144652811", "0.915848677106827", "-0.4205110420886964"],
"up": [-0.14385076361076257, 0.038057482024001874, 0.9888673247056924],
"worldUpVector": [0, 0, 1],
"pivotPoint": ["-22.510046835506888", "1.6223793651751013", "3.668585646439837"],
"distanceToOrbit": 7.198985875545766,
"aspectRatio": 1.491792224702381,
"projection": "orthographic",
"isOrthographic": true,
"orthographicHeight": 7.198985875545767
},
"renderOptions": {
"environment": "Boardwalk",
"ambientOcclusion": {
"enabled": true,
"radius": 13.123359580052492,
"intensity": 1
},
"toneMap": {
"method": 1,
"exposure": -7,
"lightMultiplier": -1e-20
},
"appearance": {
"ghostHidden": true,
"ambientShadow": true,
"antiAliasing": true,
"progressiveDisplay": true,
"swapBlackAndWhite": false,
"displayLines": true,
"displayPoints": true
}
},
"cutplanes": [],
"globalOffset": {
"x": -20.808594999999997,
"y": 6.686511499999999,
"z": 8.456207
}
},
"objectData": {
"guid": "6de5f80c-73da-30ae-b2d1-8a78f177c2a4",
"urn": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"viewableId": "aaff5911-e8b1-4ae2-b41c-4284d0703eb4-00150218",
"viewName": "{3D}"
}
}
We then load the pushpin into the model again at a later point (when the user reopens the model), like this:
pushPinExtension.loadItems([pushPinItem]);
The result is that the pushpin is added in the model at the correct place, but the viewer state is incorrect. It seems like the viewer state for the pushpin is set to the viewer state of the model at the time when we load the pushpin - and not to the viewer state stored inside the pushpin.
Is this expected behaviour? - and if so, how do I use the viewer state from the pushpin instead?

why not explicitly load the viewer state stored in the pushpin separately after loading the pushpin:
pushPinExtension.loadItems([pushPinItem]);
viewer.restoreState(pushPinItem.viewerState)
EDIT:
Try restore the viewer state when an item is clicked - subscribe to the click event with:
viewer.restoreState(...)
//...
})

Is there another way to fetch the Circle object present in a JSON from Fabric JS?

I'm trying to fetch the JSON from a canvas using FabricJS, It is fetching image type, rect type correctly, the issue seems to be happening only with circle.
The circle seems to break, as in the controls show, but the stroke is not visible.
I am posting my JSON below
{
"version": "3.4.0",
"objects": [
{
"type": "image",
"version": "3.4.0",
"originX": "left",
"originY": "top",
"left": 0,
"top": 40,
"width": 1200,
"height": 800,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"id": 0,
"selectable": false,
"src": "http://126.0.0.122/airlift/upload/inspection/4/AP00004-0-Eksempelbilde%205%20Helikopter-1200x900.JPG",
"filters": []
},
{
"type": "circle",
"version": "3.4.0",
"originX": "left",
"originY": "top",
"left": 509,
"top": 361,
"width": 60,
"height": 60,
"fill": "",
"stroke": "#fced7e",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"id": "1",
"selectable": true
}
]
}
This issue happens when I use loadFromJSON Only rectangles and images seem to be retained.
I am attempting to add a number to the object, adding snippet below
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
//console.log("Object: ", object[o]);
if(object.id > 0){
t = new fabric.Text(String(object.id), {
left: parseInt(object.left) - 15,
top: parseInt(object.top) - 15,
fill: object.stroke,
originX: object.originX,
originY: object.originY,
fontSize: 15
});
canvas.add(t);
}
});
object.id is a predefined id that holds the number to which I am adding text
Adding images for reference.
BEFORE
AFTER

You can extend the fabric toObject() method to include custom properties. Since the loaded json is missing the radius you can do:
fabric.Object.prototype.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
radius: this.radius || null
});
};
})(fabric.Object.prototype.toObject);
You can also include semi major and minor radii for ellipses:
fabric.Object.prototype.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
radius: this.radius || null,
rx: this.rx || null,
ry: this.ry || null
});
};
})(fabric.Object.prototype.toObject);
Set this up prior to your code.

Backstopjs site loading issue not solved by delay: what is wrong?

When I try to run backstopjs on certain sites (they all must have some dynamic rendering thing in common, though I don't know what), the screenshots generated by backstopjs only include the first piece of content, centered in the screen. Here's the URL to a screenshot: https://user-images.githubusercontent.com/41495147/63806833-1612b680-c8e2-11e9-9932-680864b470b7.png
I've already tried setting the delay to 5 seconds. I've tried waiting until the footer class is available before screenshot. No dice. What is going on? Here's my config file:
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
},
{
"label": "desktop",
"width": 1280,
"height": 1024
}
],
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
"scenarios": [
{
"label": "VMLYR Home",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://www.vmlyr.com",
"referenceUrl": "",
"readyEvent": "",
"readySelector": ".region-footer",
"delay": 5000,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
}
],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "puppeteer",
"engineOptions": {
"args": ["--no-sandbox"]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}```

Amcharts does not show 2d Y axis (Json data)

I have the following Json data (extract) that I use to graph a dual Y axis chart with amchart:
[{"Day":"24-05 10H","Production":"0.82431267","USD":"482.02837415988"},{"Day":"24-05 11H","Production":"0.83045272","USD":"485.61885435808"},{"Day":"24-05 12H","Production":"0.83441691","USD":"487.93696995924"},{"Day":"24-05 01H","Production":"0.84323421","USD":"493.09300957644"},{"Day":"24-05 02H","Production":"0.85096095","USD":"497.61132896580006"},{"Day":"24-05 03H","Production":"0.85694953","USD":"501.11323496092"},{"Day":"24-05 04H","Production":"0.868104","USD":"507.635967456"},{"Day":"24-05 06H","Production":"0.8802085","USD":"519.796567173"},{"Day":"24-05 07H","Production":"0.8913847","USD":"532.3438566870001"},{"Day":"24-05 08H","Production":"0.89426695","USD":"530.7322322868499"},{"Day":"24-05 09H","Production":"0.89904346","USD":"531.08385173466"},{"Day":"24-05 10H","Production":"0.90740126","USD":"535.88759172324"},{"Day":"24-05 11H","Production":"0.91944257","USD":"554.8872687652799"},{"Day":"25-05 12H","Production":"0.92783829","USD":"554.54203862259"},{"Day":"25-05 02H","Production":"0.94182047","USD":"565.81654194143"},{"Day":"25-05 03H","Production":"0.94743531","USD":"574.52571941931"},{"Day":"25-05 04H","Production":"0.95331299","USD":"579.83927978564"},{"Day":"25-05 05H","Production":"0.9563386","USD":"580.4497132700001"},{"Day":"25-05 06H","Production":"0.96906754","USD":"594.5520078162"},{"Day":"25-05 07H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 08H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 09H","Production":"0.99806768","USD":"595.88932187024"},{"Day":"25-05 10H","Production":"0.00706363","USD":"4.21520001161"},{"Day":"25-05 11H","Production":"0.01715723","USD":"10.19647316008"},{"Day":"25-05 12H","Production":"0.02629501","USD":"15.77321951856"},{"Day":"25-05 01H","Production":"0.04011605","USD":"24.3299831645"}
And the following code used to graph:
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "http://x.x.x.x/json.php", "format": "json"
},
"valueAxes": [{
"id": "v1",
"startDuration": 1,
"axisColor": "#FF6600",
"axisThickness": 5,
"gridAlpha": 0.1,
"axisAlpha": 1
}, {
"id": "v2",
"axisColor": "#FCD202",
"axisThickness": 5,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "right",
"synchronizeWith": "v1",
"synchronizationMultiplier": 5
}],
"graphs": [{
"valueAxis": "v1",
"type": "column",
"fillColorsField": "#B0DE09",
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Production Crypto",
"valueField": "Production"
}, {
"valueAxis": "v2",
"type": "smoothedLine",
"lineColor": "#364cf2",
"lineThickness": 3,
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Production USD",
"valueField": "USD",
"fillAlphas": 0
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Day",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
}
});
</script>
This is the screenshot of the graph I get:
Where the blue line for the USD series clearly does not render properly.
I have been able to get a dual Y axis graph showing properly (http://jsfiddle.net/spjem6b8/) with random generated data, so I guess this is the json part that generates this issue.
What am I doing wrong here?
Thanks

Your synchronizationMultiplier isn't high enough to make the second Y axis large enough to encapsulate your USD values in your dataset. In your current setup, your second Y axis values range from 0-6, but your USD values range from 4-600. Increase your syncrhonizationMultiplier to 600 in this case and it will work.
"valueAxes": [{
"id": "v1",
"startDuration": 1,
"axisColor": "#FF6600",
"axisThickness": 5,
"gridAlpha": 0.1,
"axisAlpha": 1
}, {
"id": "v2",
"axisColor": "#FCD202",
"axisThickness": 5,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "right",
"synchronizeWith": "v1",
"synchronizationMultiplier": 600
}],
There's also an unsupported beta property called synchronizeGrid that can sometimes do this for your automatically, but it's not guaranteed to work with all value axis setting combinations so your mileage may vary. This is set at the top of the chart config:
AmCharts.makeChart("chartdiv", {
// ...
synchronizeGrid: true, //no need for synchronizeWith/Multiplier in the value axis
// ...
});
Here's an updated fiddle with the updated multiplier: http://jsfiddle.net/spjem6b8/1/