Highcharts spiderweb showing wrong categories at first position - highcharts

On the y-axis of the spider chart, it reads 0, 100, 20, 30, ...
While the interval is 10 and max value is 100.
How can I make sure Highcharts shows the correct order: 0, 10, 20, ..., 100.
This is a fiddle to show the issue I'm having: https://jsfiddle.net/8g9q3ubd/
"yAxis": {
"gridLineInterpolation": "polygon",
"lineWidth": 0,
"pointInterval": 10,
"min": 0,
"max": 100,
"tickAmount": 10,
"tickInterval": 10,
"tickmarkPlacement": "on",
"categories": ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
},

You do not need to use categories property. With tickInterval: 10 only every tenth category is shown and your last category ("100") is shown in second place.
"yAxis": {
"gridLineInterpolation": "polygon",
"lineWidth": 0,
"pointInterval": 10,
"min": 0,
"max": 100,
"tickAmount": 11,
"tickInterval": 10,
"tickmarkPlacement": "on"
}
Live demo: https://jsfiddle.net/BlackLabel/fmo31h7n/
API Reference: https://api.highcharts.com/highcharts/yAxis.categories

Related

How to i insert a JSON object into an array?

I have a JSON
"passengers": [{
"accompaniedByInfant": true,
"birthDate": {
"day": 6,
"fractionalSecond": 0.000,
"hour": 0,
"minute": 0,
"month": 9,
"orig_day": 6,
"orig_fracSeconds": 0.000,
"orig_hour": 0,
"orig_minute": 0,
"orig_month": 9,
"orig_second": 0,
"orig_timezone": 330,
"orig_year": 1991,
"second": 0,
"timezone": 330,
"year": 1991
},
"hasStrecher": false,
"parentSequence": 0,
"passengerTypeCode": "ADLT",
"gender":"M"
"personName": {
"givenName": "v",
"nameTitle": "MR",
"shareMarketInd": false,
"surname": "j"
},
"requestedSeatCount": 1,
"shareMarketInd": false,
"unaccompaniedMinor": false
}, {
"accompaniedByInfant": false,
"birthDate": {
"day": 10,
"fractionalSecond": 0.000,
"hour": 0,
"minute": 0,
"month": 10,
"orig_day": 10,
"orig_fracSeconds": 0.000,
"orig_hour": 0,
"orig_minute": 0,
"orig_month": 10,
"orig_second": 0,
"orig_timezone": 330,
"orig_year": 2010,
"second": 0,
"timezone": 330,
"year": 2010
},
"hasStrecher": false,
"parentSequence": 0,
"passengerTypeCode": "CHLD",
"personName": {
"givenName": "some",
"shareMarketInd": false,
"surname": "child"
},
"requestedSeatCount": 1,
"shareMarketInd": false,
"unaccompaniedMinor": false
},
and so on depending on the number of passengers.
I have to sent this to the server in
let param : [String: Any] =[ "passengers":passengerparameterarray,"pwd": password,"requestPurpose": "MODIFY_PERMANENTLY_AND_CALC","unm": username ]
Here passengerparameterarray is an array of type string.(here is the issue). I stored details of each passenger in an array
paramarray and whenever user finishes adding details, paramarray is added to the passengerparameterarray on position depending on the indexPath. (1 passenger = added on 0th index, 2 = on 0th and 1st index and so on).
But when I send it to server it goes like
"passengers" : [ [ ..... ] ]
This gives me error as I have an array inside of the array. How do I fix this? I try changing to string but that gives me error as String isn't JSON object because of the " coming before { .
I converted each array to JSON Object. But how do i JSON Object the main array? As the Main array is [String]() . If i try changing to [String:Any]() , things like
array.insert()
Wont work.
How do I fix this? I want to add the JSON object into an array and then sent it to the server.
try this
var param : [String:Any] = ["requestedSeatCount" : 1, "gender" : "M", "parentSequence" : 0, "passengerTypeCode" : "ADLT", "shareMarketInd" : false]
param.updateValue(["nameTitle" : "MR", "givenName" : "aaaa", "surname" : "aaa"], forKey: "personName")
param.updateValue(["year" : "2019", "day" : "29", "month" : "5"], forKey: "birthDate")
This was a stupid question. This all happened because originally my array was
var passengerparameterarray = [Array<Any>]()
instead of
var passengerparameterarray = Array<[String: Any]>()
Which as expected stopped me from inserting JSON object which is in the form of "String:Any"

JSON decoding in Flutter

I am currently working on a health application and i don't know how to decode this sample json using flutter. I want to extract "heartRateZones" list.
{
"activities-heart": [{
"dateTime": "2015-08-04",
"value": {
"customHeartRateZones": [],
"heartRateZones": [{
"caloriesOut": 740.15264,
"max": 94,
"min": 30,
"minutes": 593,
"name": "Out of Range"
}, {
"caloriesOut": 249.66204,
"max": 132,
"min": 94,
"minutes": 46,
"name": "Fat Burn"
}, {
"caloriesOut": 0,
"max": 160,
"min": 132,
"minutes": 0,
"name": "Cardio"
}, {
"caloriesOut": 0,
"max": 220,
"min": 160,
"minutes": 0,
"name": "Peak"
}],
"restingHeartRate": 68
}
}]
}
Please Help...
JSON is hosted at https://api.myjson.com/bins/g05ga .
According to the documentation, you should use json.decode and you will be able to extract what you want.
You can then use it somehow like this activities-heart.value.heartRateZones

First Point hidden by y-axis in datetime graph when container is responsive

http://jsfiddle.net/vUdGJ/
$(function () {
$('#container').highcharts(
{
"xAxis": {
"startOnTick": true,
"endOnTick": true,
"type": "datetime",
"min": Date.UTC(2014, 1, 2),
"max": Date.UTC(2014, 4, 31)
},
"series": [{
"type": "line",
"data": [
[Date.UTC(2014, 1, 2, 11, 0, 0, 0), 30],
[Date.UTC(2014, 1, 3, 11, 0, 0, 0), 24],
],
}]
}
);
});
If you drag the divider to the left, the first point disappears behind the y-axis.
The model could not be much simpler. Is this a bug?
It's caused by setting startOnTick: true. As you can see, the first tick on a chart is 3rd of Feb (even if you specify to be 2nd of a Feb). Simply remove that option and will be working fine: http://jsfiddle.net/vUdGJ/1/

Highstock Candlestick connect nulls or zero's

I have a candlestick chart with 1 hour intervals. I receive the data like this:
[ [ 1400760000000,
0,
0,
0,
0
],
[ 1400763600000,
0,
0,
0,
0
],
[ 1400767200000,
20,
21,
20,
20
],
[ 1400770800000,
0,
0,
0,
0
],
[ 1400774400000,
19,
19,
19,
19
],
[ 1400778000000,
0,
0,
0,
0
]
]
or I can receive the data like this:
[ [ 1400760000000,
null
],
[ 1400763600000,
null
],
[ 1400767200000,
20,
21,
20,
20
],
[ 1400770800000,
null
],
[ 1400774400000,
19,
19,
19,
19
],
[ 1400778000000,
null
]
]
Is there any way to connect the nulls or zero's?
I've tried setting the connectNulls options to true in series like this:
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
connectNulls: true,
data : data
}]
But that didn't work.
You should have a null for each parameter (open, close, high, low) like in the example
http://jsfiddle.net/22mrT/

How do I force highcharts to pay attention to min and max on my secondary axis?

I'm trying to set a secondary axis with a min/max value, and the primary axis often overwrites the max on the secondary axis.
I know that I could use alignTicks:false, but I don't like the way that makes the ticks look. I also know that I can hide the ticks for one of the axes, but again, I don't like they it looks.
I would like to either force the right side to use min/max and figure out the proper tick intervals, or I'd like to force the left side to have a specific number of ticks.
I need some ideas, here's a jsfiddle with my code and some mock data.
http://jsfiddle.net/2s6kK/
$(function () {
$('#container').highcharts({
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%b %e"
}
},
"yAxis": [{
"min": 0,
"startOnTick": false,
"labels": {
"style": {
"color": "#4074C3"
}
},
"title": {
"text": "Revenue",
"style": {
"color": "#4074C3"
},
"margin": 5
},
"index": 0
}, {
"allowDecimals": false,
"min": 0,
"max": 100,
"maxPadding": 0.2,
"startOnTick": false,
"labels": {
"style": {
"color": "#8DAD36"
}
},
"title": {
"text": "Win Rate",
"style": {
"color": "#8DAD36"
},
"margin": 2
},
"opposite": true,
"index": 1,
// "alignTicks": false
}],
"legend": {
"enabled": true,
"align": "center",
"verticalAlign": "top",
"x": 0,
"y": -5,
"borderWidth": 0
},
"series": [{
"name": "Revenue",
"type": "line",
"yAxis": 0,
"data": [5.4,27,27,27,58,0, 0, 0, 0
],"pointStart":1377993600000,"pointInterval":86400000
}, {
"name": "Win Rate",
"type": "line",
"color": "#8DAD36",
"yAxis": 1,
"data": [60,48,48,48,48,60, 0, 0, 0, 0
],"pointStart":1377993600000,"pointInterval":86400000
}]
});
});
Thanks,
Josh
You could try setting your tickInterval to 10 in your y-axis definition:
"tickInterval": 10
http://jsfiddle.net/2s6kK/1/

Resources