Is it possible to set the background of a new tab page to a HTML file? - html

I was wondering if it was possible to set HTML code as a background for chrome.
Here is a edited example: Example (Replace green with HTML output)
I was going to insert this HTML code into the background:
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "bounce",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 100,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
window.onscroll = function(){
var navbar = document.querySelector('.navbar')
if (window.pageYOffset > 49){
if (navbar.classList.contains('transparent')){
navbar.classList.remove('transparent')
navbar.classList.add('opaque')
}
}else{
if (navbar.classList.contains('opaque')){
navbar.classList.remove('opaque')
navbar.classList.add('transparent')
}
}
};
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>JS particles example</title>
<style>
#particles-js {
width: 100%;
height: 100%;
background-color: #49A8EB;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: -1;
position: fixed;
left: 0;
top: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/svginjector/1.1.3/svg-injector.min.js"></script> -->
<script src="js/app.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Is there any way possible to do this? If so, I would love to know!
P.S. I've already tried looking this up and trying things out.

Related

Can't create correct formula to draw line chart with rules in vega-lite?

Working on project with vega-lite and can't overcome with some visualization. Stuck on this task
I would like to get this result , but getting this.
This is my code I tried:
`
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"params": [
{
"name": "chart_title",
"value": " Weekly Distribution"
},
{
"name": "titleAxisXname",
"value": "Weekly Min "
},
{
"name": "tick_Count_X",
"value": 8
}
],
"width": 425,
"height": 135,
"padding": 20,
"title": {
"text": {
"expr": "chart_title"
},
"fontSize": 16,
"color": "white",
"fontWeight": 700,
"font": "Google Sans",
"align": "left",
"dx": 40,
"dy": -10
},
"data": {
"name": "vis",
"values":[
{
"customer": "Customer",
"type": "monthly",
"metrics": {
"partitions": [
{
"a": {
"mean": 135,
"distribution": {
"min": [ 0,10,20,30,40,50,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200,210,220,230,240,250,260,270,280,300],
"data": [
0.01,
0.01,
0.02,
0.03,
0.05,
0.08,
0.13,
0.21,
0.28,
0.31,
0.33,
0.3,
0.28,
0.26,
0.24,
0.22,
0.21,
0.2,
0.19,
0.18,
0.17,
0.16,
0.15,
0.14,
0.13,
0.12,
0.11,
0.1,
0.09,
0.08
]
}
}
}
]
}
}]
},
"transform": [
{"calculate": "datum.metrics.partitions", "as": "P"},
{"flatten": ["P"]},
{"calculate": "datum.P.a.distribution.min", "as": "x"},
{"flatten": ["x"]},
{"calculate": "datum.P.a.distribution.data", "as": "y"},
{"flatten": ["y"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": { "field": "x",
"type": "quantitative"
},
"y": {
"field": "y",
"type": "quantitative"
}
}
},
{
"data": {
"values": [
{}
]
},
"encoding": {
"x": {
"datum": 65
}
},
"layer": [
{
"mark": {
"type": "rule"
}
},
{
"mark": {
"type": "text",
"text": [
"25th",
"Percentile"
]
}
}
]
},
{
"encoding": {
"x": {
"datum": 130
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#594CB8"
}
},
{
"mark": {
"type": "text",
"text": [
"50th",
"Percentile"
],
"color": "#594CB8"
}
}
]
},
{
"encoding": {
"x": {
"datum": 200
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#B4539E"
}
},
{
"mark": {
"type": "text",
"text": [
"75th",
"Percentile"
],
"color": "#B4539E"
}
}
]
}
],
"config": {
"background": "white",
"axisX": {
"title": {
"expr": "titleAxisXname"
},
"tickCount": {
"expr": "tick_Count_X"
},
"titlePadding": 20,
"titleFont": "Google Sans",
"titleColor": "black",
"titleFontSize": 12,
"titleFontWeight": 700,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400
},
"axisY": {
"orient": "right",
"tickCount": 3,
"format": "%",
"title": null,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400,
"labelPadding": 10
},
"line": {
"point": false,
"interpolate": "cardinal",
"color": "#006A62"
},
"text": {
"font": "Google Sans",
"fontSize": 12,
"color": "#001D33",
"fontWeight": 700,
"dx": 15,
"dy": -105
},
"rule": {
"strokeWidth": 5,
"strokeDash": [
0.5,
16
],
"strokeCap": "round"
}
}
}
`
Can't come up with correct calculations which reads x and y fields.
It should be way but I can't find in documentations
Thank you in advance

Your flatten created a Cartesian product and needed to be done in a single step.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"params": [
{
"name": "chart_title",
"value": " Weekly A Distribution"
},
{
"name": "titleAxisXname",
"value": "Weekly A Minutes "
},
{
"name": "tick_Count_X",
"value": 8
}
],
"width": 425,
"height": 135,
"padding": 20,
"title": {
"text": {
"expr": "chart_title"
},
"fontSize": 16,
"color": "#56615F",
"fontWeight": 700,
"font": "Google Sans",
"align": "right",
"dx": 40,
"dy": -10
},
"data": {
"name": "report",
"values":[
{
"customer": "Customer",
"type": "monthly",
"period": "2022-10",
"schema": "1.0.0",
"metrics": {
"filters": {
"age": [
"all",
"18-39",
"40-64",
"65+"
],
"gender": [
"all",
"male",
"female"
]
},
"partitions": [
{
"segment": {
"age": "*",
"gender": "*"
},
"count": 10000,
"a": {
"mean": 135,
"p10": 10,
"p25": 60,
"p50": 130,
"p75": 198,
"p90": 255,
"goal": {
"value": 150,
"p": 0.37
},
"distribution": {
"min": [ 0,10,20,30,40,50,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200,210,220,230,240,250,260,270,280,300],
"max": 300,
"step": 10,
"data": [
0.01,
0.01,
0.02,
0.03,
0.05,
0.08,
0.13,
0.21,
0.28,
0.31,
0.33,
0.3,
0.28,
0.26,
0.24,
0.22,
0.21,
0.2,
0.19,
0.18,
0.17,
0.16,
0.15,
0.14,
0.13,
0.12,
0.11,
0.1,
0.09,
0.08
]
}
}
}
]
}
}]
},
"transform": [
{"calculate": "datum.metrics.partitions", "as": "P"},
{"flatten": ["P"]},
{"calculate": "datum.P.a.distribution.min", "as": "x"},
{"calculate": "datum.P.a.distribution.data", "as": "y"},
{"flatten": ["x","y"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": { "field": "x",
"type": "quantitative"
},
"y": {
"field": "y",
"type": "quantitative"
}
}
},
{
"data": {
"values": [
{}
]
},
"encoding": {
"x": {
"datum": 65
}
},
"layer": [
{
"mark": {
"type": "rule"
}
},
{
"mark": {
"type": "text",
"text": [
"25th",
"Percentile"
]
}
}
]
},
{
"encoding": {
"x": {
"datum": 130
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#594CB8"
}
},
{
"mark": {
"type": "text",
"text": [
"50th",
"Percentile"
],
"color": "#594CB8"
}
}
]
},
{
"encoding": {
"x": {
"datum": 200
}
},
"layer": [
{
"mark": {
"type": "rule",
"color": "#B4539E"
}
},
{
"mark": {
"type": "text",
"text": [
"75th",
"Percentile"
],
"color": "#B4539E"
}
}
]
}
],
"config": {
"background": "#eff1ef",
"axisX": {
"title": {
"expr": "titleAxisXname"
},
"tickCount": {
"expr": "tick_Count_X"
},
"titlePadding": 20,
"titleFont": "Google Sans",
"titleColor": "#56615F",
"titleFontSize": 12,
"titleFontWeight": 700,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400
},
"axisY": {
"orient": "right",
"tickCount": 3,
"format": "%",
"title": null,
"labelFontSize": 12,
"labelColor": "#56615F",
"labelFontWeight": 400,
"labelPadding": 10
},
"line": {
"point": false,
"interpolate": "cardinal",
"color": "#006A62"
},
"text": {
"font": "Google Sans",
"fontSize": 12,
"color": "#001D33",
"fontWeight": 700,
"dx": 15,
"dy": -105
},
"rule": {
"strokeWidth": 5,
"strokeDash": [
0.5,
16
],
"strokeCap": "round"
}
}
}

Pass default values in JOLT

I am trying to pass default value in JOLT. While passing I am getting the default value multiple times in an array. I tried cardinality with "*" but still I am getting error.
I tried-
"*":"ONE" in cardinality spec.
Below are the input, spec and output ss. Any idea on how to solve this. If any more information is required then please let me know.
Input-
{
"PURCHASE_ORDER_DISPATCH": {
"MsgData": {
"Transaction": {
"PO_POD_HDR_EVW1": {
"WG_ADDR_SEQ_NUM": 1,
"WG_PO_CNTCT_EMAIL": "dwevc#xyzgrp.com",
"WG_REQUESTOR_EMAIL": "ddds#xyzgrp.com",
"WG_REQ_FIRST_NAME": "addy",
"WG_REQ_LAST_NAME": "Easdls",
"WG_DELIVER_TO": "asdee#xyzgrp.com",
"BUSINESS_UNIT": "OFIC",
"PO_ID": 25052,
"VENDOR_SETID": "WCOS",
"VENDOR_ID": 35958,
"VNDR_LOC": 1,
"PO_DT": "2020-01-24",
"DB_NUMBER_BU": "",
"DESCR_BU": "asdddsuranceCo",
"ADDRESS1_BU": "xyzCOMPANIES",
"ADDRESS2_BU": "HOMEOsdFFIsdCE",
"ADDRESS3_BU": "1PsddARKCIsdRddsdCLE",
"ADDRESS4_BU": "",
"CITY_BU": "xyzCENTER",
"STATE_BU": "OH",
"POSTAL_BU": "44251-5001",
"COUNTRY_BU": "USA",
"ADDRESS1_BILL": "",
"ADDRESS2_BILL": "",
"ADDRESS3_BILL": "",
"ADDRESS4_BILL": "",
"CITY_BILL": "",
"STATE_BILL": "",
"POSTAL_BILL": "",
"COUNTRY_BILL": "",
"CURRENCY_CD": "USD",
"TAX_EXEMPT_ID": "",
"STD_ID_NUM_VNDR": "",
"NAME1_VNDR": "asdsdsd",
"ADDRESS1_VNDR": "410TERRYAVEN",
"ADDRESS2_VNDR": "",
"ADDRESS3_VNDR": "",
"ADDRESS4_VNDR": "",
"CITY_VNDR": "SEATTLE",
"STATE_VNDR": "WA",
"POSTAL_VNDR": 98109,
"COUNTRY_VNDR": "USA",
"PYMNT_TERMS_CD": "NET30",
"DESCR50_PAY": "Net30",
"BUYER_ID": 1083,
"PO_AMT_TTL": 14.99,
"TEXT254_CC1": "",
"TEXT254_CC2": "",
"VNDR_UPN_FLG": "N",
"STD_ID_NUM_VNDRGLN": "",
"STD_ID_NUM_BILLTO": "",
"ATTN_TO": "asdsdsd",
"PO_POD_LN_EVW1": {
"WG_REQ_ID": 25694,
"WG_CATEGORY_CD": "FSSUP",
"WG_ITEM_TYPE": 0,
"WG_ACCOUNT": 641100,
"WG_DEPT_ID": 30400,
"WG_PRODUCT": "",
"BUSINESS_UNIT": "OFIC",
"PO_ID": 25052,
"WG_ASSET_GROUP": "",
"WG_CAPITALIZE": "NO",
"WG_PROFILE_ID": "",
"WG_SPLIT_TYPE": 1,
"WG_ASSET_LOC": "HOME",
"WG_PROJECT": "",
"VENDOR_SETID": "WCOS",
"VENDOR_ID": 35958,
"VNDR_LOC": 1,
"LINE_NBR": 1,
"INV_ITEM_ID": "",
"DESCR254_MIXED": "sdasdadspPods,LightRoastCoffee,32Count",
"UNIT_OF_MEASURE": "EA",
"ITM_ID_VNDR": "B0798CX2Q9",
"INV_ITEM_WEIGHT": 0,
"INV_ITEM_HEIGHT": 0,
"INV_ITEM_VOLUME": 0,
"INV_ITEM_LENGTH": 0,
"INV_ITEM_WIDTH": 0,
"VNDR_CATALOG_ID": "",
"MFG_ID": "",
"MFG_ITM_ID": 5000196305,
"CNTRCT_ID": "",
"VERSION_NBR": 0,
"CNTRCT_LINE_NBR": 0,
"CAT_LINE_NBR": 0,
"RELEASE_NBR": 0,
"CANCEL_STATUS": "A",
"UPN_ID": "",
"PO_POD_SHP_EVW1": {
"WG_SHIP_ADDR_TYPE": 0,
"WG_CUST_ADDR_CODE": "OFIC",
"BUSINESS_UNIT": "OFIC",
"PO_ID": 25052,
"VENDOR_SETID": "WCOS",
"VENDOR_ID": 35958,
"VNDR_LOC": 1,
"LINE_NBR": 1,
"SCHED_NBR": 1,
"DUE_DT": "2020-01-29",
"SHIPTO_ID": "OFIC",
"DESCR_SHIPTO": "asdasddOMPANY",
"ADDRESS1_SHIPTO": "asdsdsdCOMPANY",
"ADDRESS2_SHIPTO": "1PARKCIRCLE",
"ADDRESS3_SHIPTO": "POBOX5001",
"ADDRESS4_SHIPTO": "",
"CITY_SHIPTO": "xyzCENTER",
"STATE_SHIPTO": "OH",
"POSTAL_SHIPTO": "44251-5001",
"COUNTRY_SHIPTO": "USA",
"PRICE_PO": 14.99,
"FREIGHT_TERMS": "FOBDEST",
"QTY_PO": 1,
"SHIP_TYPE_ID": "BEST_WAY",
"CANCEL_STATUS": "A",
"ATTN_TO": "",
"STD_ID_NUM_SHIPTO": ""
},
"PSCAMA": {
"AUDIT_ACTN": "A"
}
},
"PSCAMA": {
"AUDIT_ACTN": "A"
}
},
"PSCAMA": {
"LANGUAGE_CD": "ENG",
"AUDIT_ACTN": "A",
"BASE_LANGUAGE_CD": "ENG",
"MSG_SEQ_FLG": "",
"PROCESS_INSTANCE": 1199010,
"PUBLISH_RULE_ID": "WG_MAIN_RULE",
"MSGNODENAME": ""
}
}
}
}
}
Spec
[
{
"operation": "shift",
"spec": {
"#UPSERT": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityHeader.action",
"*": {
"*": {
"*": {
"*": {
"PO_ID": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.externalId",
"#APPROVED": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.status",
"*": {
"WG_REQ_ID": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.poDescription",
"#STANDARD": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.poType",
"*": {
"FREIGHT_TERMS": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.deliveryTermCode"
}
}
}
}
}
}
}
},
{
"operation": "shift",
"spec": {
"*": {
"*": {
"*": {
"integrationEntityHeader": "&3.&2.&1.&",
"integrationEntityDetails": {
"*": {
"externalId": "&5.&4.&3.&2.&1.&",
"status": "&5.&4.&3.&2.&1.&",
"poHeader": "&5.&4.&3.&2.&1.&"
}
}
}
}
}
}
},
{
"operation": "cardinality",
"spec": {
"*": {
"*": {
"*": {
"*": {
"*": {
"*": "ONE"
}
}
}
}
}
}
}
]
Output-

After having added the missing asterisks, you should determine where exactly to put the identifier "ONE". (eg. separate the cases)
In this case, consider using the following spec to the end of the current one
[
....,
{
"operation": "cardinality",
"spec": {
"*": {
"*": {
"*": {
"integrationEntityDetails": {
"*": {
"*": "ONE"
}
}
}
}
}
}
}
]
you got error because depth of the object labeled "integrationEntityHeader" is not equal(less than) to the object tagged "integrationEntityDetails"
So, you might also consider using
,
{
"operation": "cardinality",
"spec": {
"*": {
"*": {
"*": {
"integrationEntityHeader": {
"*": "ONE"
},
"integrationEntityDetails": {
"*": {
"*": "ONE"
}
}
}
}
}
}
}
]
to include both cases(if it was needed)

Your cardinality was wrong according to your input. please test this spec
[
{
"operation": "shift",
"spec": {
"#UPSERT": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityHeader.action",
"*": {
"*": {
"*": {
"*": {
"PO_ID": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.externalId",
"#APPROVED": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.status",
"*": {
"WG_REQ_ID": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.poDescription",
"#STANDARD": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.poType",
"*": {
"FREIGHT_TERMS": "integration-inbound:IntegrationDetails.integrationEntities.integrationEntity.integrationEntityDetails.poDetails.poHeader.deliveryTermCode"
}
}
}
}
}
}
}
},
{
"operation": "shift",
"spec": {
"*": {
"*": {
"*": {
"integrationEntityHeader": "&3.&2.&1.&",
"integrationEntityDetails": {
"*": {
"externalId": "&5.&4.&3.&2.&1.&",
"status": "&5.&4.&3.&2.&1.&",
"poHeader": "&5.&4.&3.&2.&1.&"
}
}
}
}
}
}
},
{
"operation": "cardinality",
"spec": {
"*": {
"*": {
"*": {
"*": {
"*": {
"status": "ONE",
"poHeader": {
"*": "ONE"
}
}
}
}
}
}
}
}
]

Vega Lite - can I anchor a horizontal line with only values of 0 to the bottom of the chart instead of the middle?

I'm trying to get a chart to look nicer in Vega-Lite. If I have multiple points all at a value of 0 the line is centered in the chart.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{ "date": "2022-07-27 4:20", "value": 0 },
{ "date": "2022-07-27 4:21", "value": 0 },
{ "date": "2022-07-27 4:22", "value": 0 },
{ "date": "2022-07-27 4:23", "value": 0 },
{ "date": "2022-07-27 4:24", "value": 0 },
{ "date": "2022-07-27 4:25", "value": 0 },
{ "date": "2022-07-27 4:26", "value": 0 },
{ "date": "2022-07-27 4:27", "value": 0 },
{ "date": "2022-07-27 4:28", "value": 0 },
{ "date": "2022-07-27 4:29", "value": 0 },
{ "date": "2022-07-27 4:30", "value": 0 },
{ "date": "2022-07-27 4:31", "value": 0 },
{ "date": "2022-07-27 4:32", "value": 0 },
{ "date": "2022-07-27 4:33", "value": 0 },
{ "date": "2022-07-27 4:34", "value": 0 },
{ "date": "2022-07-27 4:35", "value": 0 },
{ "date": "2022-07-27 4:36", "value": 0 },
{ "date": "2022-07-27 4:37", "value": 0 },
{ "date": "2022-07-27 4:38", "value": 0 },
{ "date": "2022-07-27 4:39", "value": 0 }
]
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "value",
"type": "quantitative"
}
},
"mark": {
"type": "line"
}
}
Is there a way to get the line to be anchored to the bottom instead?

Set a domain.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{ "date": "2022-07-27 4:20", "value": 0 },
{ "date": "2022-07-27 4:21", "value": 0 },
{ "date": "2022-07-27 4:22", "value": 0 },
{ "date": "2022-07-27 4:23", "value": 0 },
{ "date": "2022-07-27 4:24", "value": 0 },
{ "date": "2022-07-27 4:25", "value": 0 },
{ "date": "2022-07-27 4:26", "value": 0 },
{ "date": "2022-07-27 4:27", "value": 0 },
{ "date": "2022-07-27 4:28", "value": 0 },
{ "date": "2022-07-27 4:29", "value": 0 },
{ "date": "2022-07-27 4:30", "value": 0 },
{ "date": "2022-07-27 4:31", "value": 0 },
{ "date": "2022-07-27 4:32", "value": 0 },
{ "date": "2022-07-27 4:33", "value": 0 },
{ "date": "2022-07-27 4:34", "value": 0 },
{ "date": "2022-07-27 4:35", "value": 0 },
{ "date": "2022-07-27 4:36", "value": 0 },
{ "date": "2022-07-27 4:37", "value": 0 },
{ "date": "2022-07-27 4:38", "value": 0 },
{ "date": "2022-07-27 4:39", "value": 0 }
]
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "value", "scale":{"domain":[0,1]},
"type": "quantitative"
}
},
"mark": {
"type": "line"
}
}

Align DataLabels of Solidguage in Highcharts

I am trying to create a solidguage highchart, but i am not able to align datalabels as per the visual. My code for the chart is:
function dcadjustmentschart() {
$('#adjustments-chart1').highcharts({
chart: {
type: 'solidgauge',
marginTop: 0,
}
},
title: {
text: null,
},
credits : {
enabled : false
},
exporting: {
enabled: false
},
tooltip: {
borderWidth: 0,
enabled: true,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '100%',
borderWidth: 2
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '5px',
},
dataLabels: {
borderWidth: "0",
marginTop: "0"
}
},
series: [{
enableMouseTracking: false,
name: 'Forward <br/> By <br/> 45',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 45,
}],
dataLabels: {
formatter: function () {
return this.series.name
},
y: 25,
x: -50,
styles: {
fontSize: "12px",
borderWidth: "0",
fontWeight: "bold",
width: "50px",
marginleft: "50px"
}
}
}]
});
};
Above is the output.
This is what I need:
I want to align the text "Forward by 45" in the center of the circle
I am using <br/> to break the texts to the second line, how to get rid of that?
I want to change the background color of the circle

I think that you have small mistake in your code. Instead of dataLabels.styles you should use dataLabels.style. Here you can see information about this parameter in Highcharts API:
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.style
You can use 'text-anchor' property width dataLabels.align and dataLabels.verticalAlign to position your text in the center of you pane:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.align
http://api.highcharts.com/highcharts#plotOptions.solidgauge.dataLabels.verticalAlign
You can add backgroundColor inside your background array:
http://api.highcharts.com/highcharts#pane.background
function dcadjustmentschart() {
$('#container').highcharts({
chart: {
type: 'solidgauge',
marginTop: 0,
},
title: {
text: null,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
backgroundColor: '#bada55',
borderWidth: 0,
outerRadius: '100%'
}, {
outerRadius: '100%',
innerRadius: '100%',
borderWidth: 2,
borderColor: 'black'
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '5px',
dataLabels: {
padding: 0,
x: 25,
align: 'center',
verticalAlign: 'middle',
}
},
},
series: [{
enableMouseTracking: false,
name: 'Forward By 45',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 45,
}],
dataLabels: {
overflow: "none",
crop: false,
borderWidth: 0,
formatter: function() {
return this.series.name
},
y: 0,
style: {
fontSize: "12px",
fontWeight: "bold",
width: "50px",
textAnchor: 'middle',
}
}
}]
});
};
dcadjustmentschart()
Here you can see an example how it can work:
http://jsfiddle.net/cune5qs5/25/
Kind regards.

How to Parse Json to get value from "sub-column"?

The column and sub-column are different for each set.
I need to read column "24". Then read sub-column "11" (but not "6" or any other) and get "value": 1.66". I can't get AutoIt to read it.
My Json file:
"24": {
"alt_defindex": {
"0": 210
},
"11": {
"0": {
"value": 1.66,
"last_change": -0.17,
"last_update": 1390231504
}
},
"6": {
"0": {
"value": 1,
"last_change": -0.17,
"last_update": 1382770803
}
}
},
"30": {
"alt_defindex": {
"0": 212
},
"11": {
"0": {
"value": 22.75,
"last_change": 1.75,
"last_update": 1389765935
}
},
"6": {
"0": {
"value": 0.94,
"last_change": 0.28,
"last_update": 1367126509
}
}
},
"35": {
"11": {
"0": {
"value": 346.5,
"last_change": 59.5,
"last_update": 1390149299
}
},
"3": {
"0": {
"value": 0.33,
"last_change": -0.11,
"last_update": 1379423777
}
},
"6": {
"0": {
"value": 0.05,
"last_change": 0,
"last_update": 1336410088
}
},
"600": {
"0": {
"value": 0.05,
"last_change": 0.03,
"last_update": 1362791812
}
}
},
"36": {
"11": {
"0": {
"value": 2.33,
"last_change": 0.17,
"last_update": 1386034870
}
},
"14": {
"0": {
"value": 73.5,
"last_change": 73.5,
"last_update": 1389414784
}
},
"3": {
"0": {
"value": 0.22,
"last_change": -0.06,
"last_update": 1376609090
}
},
"6": {
"0": {
"value": 0.05,
"last_change": 0,
"last_update": 1336410089
}
},
"600": {
"0": {
"value": 0.04,
"last_change": -0.01,
"last_update": 1381960202
}
}
},

Your JSON string is wrong.
Parse error on line 1:
"24": { "alt_def
^
Expecting '{', '['
Use this site to check your JSON.
http://jsonlint.com/