Node-red: How to have an editable u-list? - javascript

I'm have a question about Node-red, hope someone can help me.
In my project I need to send a txt file to a few esp32 clients.
I managed to get the .txt file to 1 esp32 client, but what I'll need is to send to several clients, tahnt can vary.
So what I'm trring to get is have an editable list of esp32 clients ( which will turn into subscribed subscribed topics I'm be updating lets say, e.g.: Client_1, Client_2..etc).
I found the node-red-node-ui-list weeks days example with radio buttons (here 1) to be a perfect display for what I need, the thing is, how to produce and editable list that would feed the ui-list demands.
The ui-list needs data in this format [{"title":"Esp32","isChecked":false}].
I managed to produce a list of names: ["Client_1","Client_2"], resorting to an input box that but what I'm not getting able to do is turn this list of names into a list or series (not sure what to call it) that I can feed the ui-list.
In ui-list example we can see how multiple elements should be fed to the list widget:
[{"title":"Sunday","isChecked":true},{"title":"Monday"},{"title":"Tuesday"},{"title":"Wednesday"},{"title":"Thursday"},{"title":"Friday"},{"title":"Saturday","isChecked":true}]
This seems like an list of JSON objects where title and isChecked are the keys, am I right?
the question, hot to get from a list of strings ["Client_1","Client_2"] to that list of objects =
Its a lack of javascript skills for sure.
if anyone has any example or answer that might help me I'm very grateful.
Eventually a delete option would probably be also useful.
And still have to figure out hou to have this list permanent (don't loose it in every reset or power-off).
Here is my current flow, where i can, measure the length, print and delete a global list:
[
{
"id": "81b5cdfd56ea7bbc",
"type": "tab",
"label": "Flow 4",
"disabled": false,
"info": "",
"env":
[]
},
{
"id": "9422ceb76fba4d42",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 510,
"y": 260,
"wires":
[
[
"f9ad60dcd7d9447a"
]
]
},
{
"id": "c4c42d4670044e4f",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 260,
"wires":
[]
},
{
"id": "f9ad60dcd7d9447a",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"func": "\nvar fs = global.get('deviceList')||0;\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload:fs.length}\nif (!msg.payload) msg.payload=\"Vazio\";\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 260,
"wires":
[
[
"c4c42d4670044e4f"
]
]
},
{
"id": "82a053ecc65e397e",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Client_1",
"payloadType": "str",
"x": 510,
"y": 340,
"wires":
[
[
"4c0274504c14fe11"
]
]
},
{
"id": "8aa2953926e0644a",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 340,
"wires":
[]
},
{
"id": "4c0274504c14fe11",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"func": "const fsd = 'deviceList';\n\nlet fs = global.get(fsd) || [];\n\nglobal.set(fsd, fs);\n\nfs[fs.length] = msg.payload;\n\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\n//msg = { payload:fs.length}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 340,
"wires":
[
[
"8aa2953926e0644a"
]
]
},
{
"id": "755407d906abd3bc",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 520,
"y": 300,
"wires":
[
[
"6510945a12641605"
]
]
},
{
"id": "b731204d6fe17dfe",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1120,
"y": 300,
"wires":
[]
},
{
"id": "6510945a12641605",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"func": "\nvar deviceList = global.get('deviceList');\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload: deviceList}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 820,
"y": 300,
"wires":
[
[
"b731204d6fe17dfe"
]
]
},
{
"id": "b6e926ea63f838f3",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Delete list",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 500,
"y": 380,
"wires":
[
[
"a9b54a8c025573b7"
]
]
},
{
"id": "cf15719dd8237868",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Delete deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1130,
"y": 380,
"wires":
[]
},
{
"id": "a9b54a8c025573b7",
"type": "change",
"z": "81b5cdfd56ea7bbc",
"name": "",
"rules":
[
{
"t": "delete",
"p": "deviceList",
"pt": "global"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 850,
"y": 380,
"wires":
[
[
"cf15719dd8237868"
]
]
}
]

Related

Incorrect Maquest Direction Route API Feedback

I am integrating the MapQuest API Direction Routing function into my website. However, when I submit my request to the API, it returns incorrect routing points between 2 destinations.
Below is the request form I POST to the API: http://www.mapquestapi.com/directions/v2/route?key=[APIKEY]
{
"locations": [
{
"latLng": {
"lat": 37.47601247,
"lng": 126.96594338
}
},
{
"latLng": {
"lat": 37.4713402954355,
"lng": 126.95234849232048
}
}
],
"options": {
"avoids": [],
"avoidTimedConditions": false,
"doReverseGeocode": false,
"enhancedNarrative": true,
"generalize": 0,
"narrativeType": "text",
"routeType": "fastest",
"shapeFormat": "raw",
"unit": "k"
}
}
And the results that I received, I used the startPoint.lng and startPoint.lat in the maneuvers, but that doesn't seem to be correct
Below is the return results and map illustrations:
{
"route": {
"sessionId": "AHEA5gcAAFMBAAANAAAAMgAAAIQAAAB42mNoYWBgZGJgYGDPSC1KtUrOfcOaA-IybLykdYbrcqHnrSM-y6L8v3nd4t63PIoBC0DXeI7hyGImxx9ut9iLl0YdZPO69S5mBVaNILAwZvIzEA0AW5Egkyj61e4:car",
"realTime": 31,
"distance": 0.6,
"time": 31,
"formattedTime": "00:00:31",
"hasHighway": false,
"hasTollRoad": false,
"hasBridge": false,
"hasSeasonalClosure": false,
"hasTunnel": false,
"hasFerry": false,
"hasUnpaved": false,
"hasTimedRestriction": false,
"hasCountryCross": false,
"shape": {
"shapePoints": [
37.483936,
126.974279,
37.48681,
126.96995,
37.487346,
126.969139
],
"legIndexes": [
0,
3
],
"maneuverIndexes": [
0,
2
]
},
"legs": [
{
"index": 0,
"hasTollRoad": false,
"hasHighway": false,
"hasBridge": false,
"hasUnpaved": false,
"hasTunnel": false,
"hasSeasonalClosure": false,
"hasFerry": false,
"hasCountryCross": false,
"hasTimedRestriction": false,
"distance": 0.6,
"time": 31,
"formattedTime": "00:00:31",
"origIndex": 0,
"origNarrative": "",
"destIndex": 0,
"destNarrative": "",
"maneuvers": [
{
"index": 0,
"distance": 0.6,
"narrative": "Head northwest. Go for 591 m.",
"time": 31,
"direction": 2,
"directionName": "Northwest",
"signs": [],
"maneuverNotes": [],
"formattedTime": "00:00:31",
"transportMode": "car",
"startPoint": {
"lng": 126.974279,
"lat": 37.483936
},
"turnType": 0,
"mapUrl": "",
"attributes": 0,
"iconUrl": "",
"streets": []
},
{
"index": 1,
"distance": 0,
"narrative": "Arrive at your destination.",
"time": 0,
"direction": 0,
"directionName": "None",
"signs": [],
"maneuverNotes": [],
"formattedTime": "00:00:00",
"transportMode": "car",
"startPoint": {
"lng": 126.969139,
"lat": 37.487345999999995
},
"turnType": 0,
"mapUrl": "",
"attributes": 0,
"iconUrl": "",
"streets": []
}
]
}
],
"options": {
"avoids": [],
"avoidTimedConditions": false,
"doReverseGeocode": false,
"enhancedNarrative": true,
"generalize": 2,
"narrativeType": "text",
"routeType": "FASTEST",
"shapeFormat": "raw",
"unit": "K",
"walkingSpeed": -1,
"highwayEfficiency": 22,
"locale": "en_US",
"useTraffic": false,
"timeType": 0,
"dateType": 0,
"sideOfStreetDisplay": true
},
"boundingBox": {
"ul": {
"lng": 126.969139,
"lat": 37.487345999999995
},
"lr": {
"lng": 126.974279,
"lat": 37.483936
}
},
"routeWarnings": [],
"maxRoutes": "",
"locations": [
{
"street": "",
"adminArea6": "",
"adminArea6Type": "Neighborhood",
"adminArea5": "",
"adminArea5Type": "City",
"adminArea4": "",
"adminArea4Type": "County",
"adminArea3": "",
"adminArea3Type": "State",
"adminArea1": "",
"adminArea1Type": "Country",
"postalCode": "",
"geocodeQualityCode": "XXXXX",
"geocodeQuality": "LATLNG",
"dragPoint": false,
"sideOfStreet": "N",
"linkId": "0",
"unknownInput": "",
"type": "s",
"latLng": {
"lat": 37.47601247,
"lng": 126.96594338
},
"displayLatLng": {
"lat": 37.47601247,
"lng": 126.96594338
}
},
{
"street": "",
"adminArea6": "",
"adminArea6Type": "Neighborhood",
"adminArea5": "",
"adminArea5Type": "City",
"adminArea4": "",
"adminArea4Type": "County",
"adminArea3": "",
"adminArea3Type": "State",
"adminArea1": "",
"adminArea1Type": "Country",
"postalCode": "",
"geocodeQualityCode": "XXXXX",
"geocodeQuality": "LATLNG",
"dragPoint": false,
"sideOfStreet": "N",
"linkId": "0",
"unknownInput": "",
"type": "s",
"latLng": {
"lat": 37.4713402954355,
"lng": 126.95234849232048
},
"displayLatLng": {
"lat": 37.4713402954355,
"lng": 126.95234849232048
}
}
],
"locationSequence": [
0,
1
]
},
"info": {
"statuscode": 0,
"copyright": {
"text": "© 2022 MapQuest, Inc.",
"imageUrl": "http://api.mqcdn.com/res/mqlogo.gif",
"imageAltText": "© 2022 MapQuest, Inc."
},
"messages": []
}
}
Are there any parameters I have to adjust to archive the correct information? I have tried to change generalize parameter but it does not help much. I used to get the location really precise about a month ago... This is strange to me
MapQuest's map/route data in South Korea is lacking a lot of detail. We hope some day to have more detailed routing in the area.

How do I write a json list with objects in javascript

Hello Guys I have a small problem with writing my list.
I got this out of the debug tab and i only want to have one output without undefind.
I used Node-Red this is my code
This is the code of the function Set Data
var number1 = msg.payload.kinput
var number2 = msg.payload.kinout
var newlisencenumber = '{' + '"number1json"' + ':' + number1 +','+'"number2json"'+':'+ number2 +'}'
//-------------------------------------------------------------
var prepared = '{' + '"storage"' + ':' + '['+ newlisencenumber + ']' + '}'
//-------------------------------------------------------------
var msgout = prepared
msg.payload = msgout
return msg;
At least here is the code for the Node-Red flow
[
{
"id": "b071a31b549f930b",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": "",
"env": []
},
{
"id": "1b26b618f4eb0d4e",
"type": "inject",
"z": "b071a31b549f930b",
"name": "",
"props": [
{
"p": "payload.kinput",
"v": "\"A1234\"",
"vt": "str"
},
{
"p": "payload.kinout",
"v": "\"in\"",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 270,
"y": 300,
"wires": [
[
"45ab02267afb7af9",
"ede6741db6b1fc08"
]
]
},
{
"id": "ede6741db6b1fc08",
"type": "function",
"z": "b071a31b549f930b",
"name": "Set Data",
"func": "var number1 = msg.payload.kinput\nvar number2 = msg.payload.kinout\n\nvar newlisencenumber = '{' + '\"licensenumber\"' + ':' + number1 +','+'\"inout\"'+':'+ number2 +'}'\n\n//-------------------------------------------------------------\nvar prepared = '{' + '\"storage\"' + ':' + '['+ newlisencenumber + ']' + '}'\n\n//-------------------------------------------------------------\nvar msgout = prepared\n\n\n \n\n\nmsg.payload = msgout\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 840,
"y": 360,
"wires": [
[
"5cbe08fbd89b1b22"
]
]
},
{
"id": "77a032844ea6a095",
"type": "inject",
"z": "b071a31b549f930b",
"name": "",
"props": [
{
"p": "payload.kinput",
"v": "A1234",
"vt": "str"
},
{
"p": "payload.kinout",
"v": "out",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 270,
"y": 380,
"wires": [
[
"45ab02267afb7af9",
"ede6741db6b1fc08"
]
]
},
{
"id": "d8a6455136577088",
"type": "inject",
"z": "b071a31b549f930b",
"name": "",
"props": [
{
"p": "payload.kinput",
"v": "A4321",
"vt": "str"
},
{
"p": "payload.kinout",
"v": "in",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 270,
"y": 340,
"wires": [
[
"45ab02267afb7af9",
"ede6741db6b1fc08"
]
]
},
{
"id": "f6a8cc6165483098",
"type": "inject",
"z": "b071a31b549f930b",
"name": "",
"props": [
{
"p": "payload.kinput",
"v": "A4321",
"vt": "str"
},
{
"p": "payload.kinout",
"v": "out",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 270,
"y": 420,
"wires": [
[
"45ab02267afb7af9",
"ede6741db6b1fc08"
]
]
},
{
"id": "45ab02267afb7af9",
"type": "file in",
"z": "b071a31b549f930b",
"name": "",
"filename": "C:\\test\\test.json",
"filenameType": "str",
"format": "utf8",
"chunk": false,
"sendError": false,
"encoding": "none",
"allProps": false,
"x": 500,
"y": 360,
"wires": [
[
"ede6741db6b1fc08"
]
]
},
{
"id": "5cbe08fbd89b1b22",
"type": "debug",
"z": "b071a31b549f930b",
"name": "debug 6",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 1020,
"y": 360,
"wires": []
}
]
Your code is typecasting the values to string. Now in this case undefined values will convert to a string "undefined".
You could do something like this:
// Basically add a fallback of empty string
var number1 = msg?.payload?.kinput || "";
var number2 = msg?.payload?.kinout || "";
So if the value is undefined or even null it will fallback to an empty string so you should get something like this
"{"storage": [{ "licensenumber": "", "input": "" }]}"

Stripe invoice.upcoming webhook

I want to know what is the example data from invoice.upcoming webhook of stripe.
Is the data.object.id is null?
Where I can get the amount? Is it on the data.object.amount_paid or data.object.amount_due?
And what is the status of this invoice?
Example data I got here in stackoverflow but I think it's not complete?
{
"created": 1326853478,
"livemode": false,
"id": "evt_000000000010000",
"type": "invoice.upcoming",
"object": "event",
"request": null,
"pending_webhooks": 1,
"api_version": "2017-06-05",
"data": {
"object": {
"id": null,
"object": "invoice",
"amount_due": 0,
"amount_paid": 0,
"application_fee": null,
"attempt_count": 0,
"attempted": true,
"charge": null,
"closed": true,
"currency": "usd",
"customer": "cus_J1QXR23OrUTxx1fk",
"date": 1503541536,
"description": null,
"discount": null,
"ending_balance": 0,
"forgiven": false,
"lines": {
"data": [
{
"id": "sub_BNx15yNiTkAlQOye",
"object": "line_item",
"amount": 500,
"currency": "jpy",
"description": null,
"discountable": true,
"livemode": true,
"metadata": {
},
"period": {
"start": 1507604796,
"end": 1510283196
},
"plan": {
"id": "bplan",
"object": "plan",
"amount": 500,
"created": 1504352393,
"currency": "jpy",
"interval": "month",
"interval_count": 1,
"livemode": false,
"metadata": {
},
"name": "B plan",
"statement_descriptor": null,
"trial_period_days": null
},
"proration": false,
"quantity": 1,
"subscription": null,
"subscription_item": "si_1B0LmKE9P3qCpf5erqbpMxkI",
"type": "subscription"
}
],
"total_count": 1,
"object": "list",
"url": "/v1/invoices/in_1AuB2KE9P3qCpf5ekFh7qpAi/lines"
},
"livemode": false,
"metadata": {
},
"next_payment_attempt": null,
"paid": true,
"period_end": 1503541536,
"period_start": 1503541536,
"receipt_number": null,
"starting_balance": 0,
"statement_descriptor": null,
"subscription": "sub2JQx1xlg9zIFhk",
"subtotal": 0,
"tax": null,
"tax_percent": null,
"total": 0,
"webhooks_delivered_at": 1503541537
}
}
}
Those Events generated from the Dashboard are totally fake, so I don't think you'll ever find usable data in them, but amount_due is what you want here.
Since Upcoming Invoices haven't been created yet - they're just a preview of future charges - they have no ID or status.
Here's a full example of Stripe's invoice.upcoming event.
I found it using the test clocks feature. Please note that is the kind of data you'll get by renewing a yearly susbscription.
{
"object": "invoice",
"account_country": "US",
"account_name": "Your company",
"account_tax_ids": null,
"amount_due": 9900,
"amount_paid": 0,
"amount_remaining": 9900,
"application_fee_amount": null,
"attempt_count": 0,
"attempted": false,
"automatic_tax": {
"enabled": false,
"status": null
},
"billing_reason": "upcoming",
"charge": null,
"collection_method": "charge_automatically",
"created": 1679397051,
"currency": "usd",
"custom_fields": null,
"customer": "cus_XXXXXXXX",
"customer_address": null,
"customer_email": "xxxx#user.io",
"customer_name": "Customer name",
"customer_phone": null,
"customer_shipping": null,
"customer_tax_exempt": "none",
"customer_tax_ids": [],
"default_payment_method": null,
"default_source": null,
"default_tax_rates": [],
"description": null,
"discount": null,
"discounts": [],
"due_date": null,
"ending_balance": 0,
"footer": null,
"last_finalization_error": null,
"lines": {
"object": "list",
"data": [
{
"id": "il_tmp_xxxxxxxxxxxxxxxxxxxxxxx",
"object": "line_item",
"amount": 9900,
"currency": "usd",
"description": "1 × Your sub (at $99.00 / year)",
"discount_amounts": [],
"discountable": true,
"discounts": [],
"livemode": false,
"metadata": {},
"period": {
"end": 1711019451,
"start": 1679397051
},
"plan": {
"id": "price_XXXXXXXXXXXXXXXX",
"object": "plan",
"active": true,
"aggregate_usage": null,
"amount": 9900,
"amount_decimal": "9900",
"billing_scheme": "per_unit",
"created": 1600678675,
"currency": "usd",
"interval": "year",
"interval_count": 1,
"livemode": false,
"metadata": {},
"nickname": null,
"product": "prod_XXXXXXXXXXXX",
"tiers_mode": null,
"transform_usage": null,
"trial_period_days": null,
"usage_type": "licensed"
},
"price": {
"id": "price_XXXXXXXXXXXXXX",
"object": "price",
"active": true,
"billing_scheme": "per_unit",
"created": 1600678675,
"currency": "usd",
"livemode": false,
"lookup_key": null,
"metadata": {},
"nickname": null,
"product": "prod_XXXXXXXXXXXX",
"recurring": {
"aggregate_usage": null,
"interval": "year",
"interval_count": 1,
"trial_period_days": null,
"usage_type": "licensed"
},
"tax_behavior": "unspecified",
"tiers_mode": null,
"transform_quantity": null,
"type": "recurring",
"unit_amount": 9900,
"unit_amount_decimal": "9900"
},
"proration": false,
"proration_details": {
"credited_items": null
},
"quantity": 1,
"subscription": "sub_XXXXXXXXXXXXXX",
"subscription_item": "si_XXXXXXXXXXXX",
"tax_amounts": [],
"tax_rates": [],
"type": "subscription"
}
],
"has_more": false,
"total_count": 1,
"url": "/v1/invoices/upcoming/lines?customer=cus_XXXXXXXXXXXX&subscription=sub_XXXXXXXXXXX"
},
"livemode": false,
"metadata": {},
"next_payment_attempt": 1679400651,
"number": null,
"on_behalf_of": null,
"paid": false,
"paid_out_of_band": false,
"payment_intent": null,
"payment_settings": {
"payment_method_options": null,
"payment_method_types": null
},
"period_end": 1679397051,
"period_start": 1647861051,
"post_payment_credit_notes_amount": 0,
"pre_payment_credit_notes_amount": 0,
"quote": null,
"receipt_number": null,
"starting_balance": 0,
"statement_descriptor": null,
"status": "draft",
"status_transitions": {
"finalized_at": null,
"marked_uncollectible_at": null,
"paid_at": null,
"voided_at": null
},
"subscription": "sub_XXXXXXXXXXXX",
"subtotal": 9900,
"tax": null,
"test_clock": "clock_1Kfj8pAP8XE2C2mat1YQW7Rg",
"total": 9900,
"total_discount_amounts": [],
"total_tax_amounts": [],
"transfer_data": null,
"webhooks_delivered_at": null
}

negative axis values glitch the chart

I tried to create chart with some values on axis are being listed as expected considering data that is provided ( marked with red )
but what confuses me is when i provide negative values ( same values just added - )
it just shows 0 on axis
is there possibility to create same behavior as I have on positive values when they are provided ni data, so it does not glitch when values are provided ?
$(function() {
var chart = new Highcharts.Chart(
{
"meta": {
"drilldownEnabled": false
},
"chart": {
renderTo:"container",
"additionalData": {
"dateTime": false,
"datetype": "string",
"cliccable": true,
"drillable": false,
"drillableChart": false,
"isCockpit": true,
"categoryColumn": "product_name",
"categoryGroupBy": "",
"categoryGroupByNamens": "",
"categoryName": "product_name",
"categoryOrderColumn": "",
"categoryOrderType": "",
"categoryStacked": "",
"categoryStackedType": ""
},
"zoomType": "xy",
"panning": true,
"type": "column",
"options3d": {
"enabled": false,
"alpha": 25,
"beta": 15,
"depth": 50,
"viewDistance": 25
},
"backgroundColor": "#FFFFFF",
"heightDimType": "pixels",
"widthDimType": "pixels",
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"borderColor": "#FFFFFF",
"style": {
"backgroundColor": "#FFFFFF",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
},
"events": {}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"title": {
"text": "",
"style": {
"align": "",
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
}
},
"legend": {
"itemDistance": 0,
"symbolPadding": 25,
"enabled": false
},
"xAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"type": "category",
"id": 0,
"title": {
"customTitle": false,
"text": "product_name",
"style": {}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
}
}
],
"yAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"min": 0,
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
},
"gridLineDashStyle": "$convertedTypeline",
"minorGridLineDashStyle": "$convertedMinorTpeline"
}
],
"series": [
{
"name": "store_sales",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": -6.36,
"name": "ADJ Rosy Sunglasses",
"datetype": "string"
},
{
"drilldown": false,
"y": -9.55,
"name": "Akron City Map",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.55,
"name": "American Beef Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.35,
"name": "American Chicken Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.19,
"name": "American Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.68,
"name": "American Corned Beef",
"datetype": "string"
},
{
"drilldown": false,
"y": -8.57,
"name": "American Foot-Long Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -6,
"name": "American Low Fat Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.94,
"name": "American Low Fat Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.49,
"name": "American Pimento Loaf",
"datetype": "string"
}
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
}
],
"tooltip": {
"borderWidth": 0,
"borderRadius": 0,
"followTouchMove": false,
"followPointer": true,
"useHTML": true,
"backgroundColor": null,
"style": {
"padding": 0
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"fontFamily": "",
"fontSize": "",
"color": ""
},
"position": {
"align": "center",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"line": {
"marker": {
"symbol": "circle",
"lineWidth": 2
}
},
"series": {
"events": {},
"showCheckbox": true,
"cursor": "pointer",
"point": {
"events": {}
},
"dataLabels": {
"allowOverlap": true
},
"turboThreshold": 2000
}
}
}
);
});
here is a snippet of negative ( with glitch )
http://jsfiddle.net/JeLrb/532
here is a same snippet just with positive (how axis values should be displayed)
http://jsfiddle.net/JeLrb/533/
Anyone know solution for this ?
Thank you !
Remove the yAxis: "min:0" and it will create negative yAxis DataLabels for you.
Please check
"yAxis": [
{
/*"min": 0, remove this */
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
}
}
]
http://jsfiddle.net/98b0dkLj
If you change "yAxis": "min": from 0 to something like -20 it will work.

Vega how to create charts that dynamically resize & how to change x-axis?

am trying to figure out how to use vega in a web app.
From what I am seeing it looks like it is possible to resize the chart size but I am not entirely sure how to go about it? Would I have to manually change the json object that vega is working off or is there an easier way?
Also, I am having a bad time trying to customize the x-axis. I have date that ranges from 0-potentially thousands. Would like to be able to dynamically set the tick data for the x-axis (by tick data I mean how the x axis increments.. part of my confusion I'm sure is that I don't know what vega means by tick, etc.).
BTW, I'm using angular for the front-end with ng-vega to put the "spec" for vega onto the scope.
{
"signals":[
{
"name":"width",
"init":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on":[
{
"update":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events":"window:resize"
}
]
}
]
}
Please have a look in sample
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit", "contains": "padding"},
"background": "white",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/seattle-weather.csv",
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","},
"transform": [
{
"type": "formula",
"as": "month_date",
"expr": "datetime(0, month(datum[\"date\"]), 1, 0, 0, 0, 0)"
},
{
"type": "formula",
"as": "month_date_end",
"expr": "datetime(0, month(datum[\"date\"])+1, 1, 0, 0, 0, 0)"
},
{
"type": "aggregate",
"groupby": ["month_date", "month_date_end"],
"ops": ["mean"],
"fields": ["precipitation"],
"as": ["mean_precipitation"]
},
{
"type": "filter",
"expr": "(isDate(datum[\"month_date\"]) || (isValid(datum[\"month_date\"]) && isFinite(+datum[\"month_date\"])))"
}
]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events": "window:resize"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "source_0"},
"encode": {
"update": {
"fill": {"value": "#4c78a8"},
"x2": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date", "offset": 1}
],
"x": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date_end"}
],
"y": {"scale": "y", "field": "mean_precipitation"},
"y2": {"scale": "y", "value": 0}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source_0",
"fields": ["month_date", "month_date_end"]
},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "mean_precipitation"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "date (month)",
"labelFlush": true,
"labelOverlap": true,
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.value, '%b')"}}
}
},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Mean of precipitation",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"config": {"background": "white"}
}

Categories

Resources