Highchart: Datetime X-Axis labels are not showing correctly - highcharts

I am using highchart to show line charts with datetime x-axis.
I have set x-axis type as datetime
xAxis: {
type: 'datetime'
},
and series is of the form
series: [{"name": "temprature", "data": [[1585898010000, 0], [1585898020000, 0.27], [1585898030000, 0.18], [1585898040000, 0.18], [1585898050000, 0.22], [1585898060000, 0.14], [1585898070000, 0.24], [1585898080000, 0.2], [1585898090000, 0.22], [1585898100000, 0.18], [1585898110000, 0.18], [1585898120000, 0.2], [1585898130000, 0.22], [1585898140000, 0.21], [1585898150000, 0.18], [1585898160000, 0.18], [1585898170000, 0.15], [1585898180000, 0.23], [1585898190000, 0.2], [1585898200000, 0.16], [1585898210000, 0.18], [1585898220000, 0.2], [1585898230000, 0.21], [1585898240000, 0.2], [1585898250000, 0.2], [1585898260000, 0.21], [1585898270000, 0.23], [1585898280000, 0.2], [1585898290000, 0.31], [1585898300000, 0.38], [1585898310000, 0.35], [1585898320000, 0.27], [1585898330000, 0.48], [1585898340000, 0.35], [1585898350000, 0.25], [1585898360000, 0.33], [1585898370000, 0.28], [1585898380000, 0.35], [1585898390000, 0.33], [1585898400000, 0.43], [1585898410000, 0.42], [1585898420000, 0.3], [1585898430000, 1.03], [1585898440000, 0.38], [1585898450000, 0.47], [1585898460000, 0.34], [1585898470000, 0.47], [1585898480000, 0.44], [1585898490000, 0.37], [1585898500000, 0.68], [1585898510000, 0.41], [1585898520000, 0.53], [1585898530000, 0.53], [1585898540000, 1.68], [1585898550000, 0.25], [1585898560000, 0.16], [1585898570000, 0.23], [1585898580000, 0.22], [1585898590000, 0.16], [1585898600000, 0.23], [1585898610000, 0.18], [1585898620000, 0.23], [1585898630000, 0.2], [1585898640000, 0.18], [1585898650000, 0.2], [1585898660000, 0.2], [1585898670000, 0.18], [1585898680000, 0.23], [1585898690000, 0.18], [1585898700000, 0.2], [1585898710000, 0.18], [1585898720000, 0.2], [1585898730000, 0.23], [1585898740000, 0.18], [1585898750000, 0.18], [1585898760000, 0.22], [1585898770000, 0.22], [1585898780000, 0.16], [1585898790000, 0.18], [1585898800000, 0.25], [1585898810000, 0.13], [1585898820000, 0.2], [1585898830000, 0.21], [1585898840000, 0.17], [1585898850000, 0.18], [1585898860000, 0.25], [1585898870000, 0.2], [1585898880000, 0.25], [1585898890000, 0.31], [1585898900000, 0.3], [1585898910000, 0.4], [1585898920000, 0.28], [1585898930000, 0.5], [1585898940000, 0.28], [1585898950000, 0.28], [1585898960000, 0.32], [1585898970000, 0.3], [1585898980000, 0.31], [1585898990000, 0.31], [1585899000000, 0.49], [1585899010000, 0.41], [1585899020000, 0.25], [1585899030000, 1.06], [1585899040000, 0.35], [1585899050000, 0.45], [1585899060000, 0.41], [1585899070000, 0.6], [1585899080000, 0.41], [1585899090000, 0.42], [1585899100000, 0.56], [1585899110000, 0.58], [1585899120000, 0.56], [1585899130000, 0.46], [1585899140000, 1.61], [1585899150000, 0.23], [1585899160000, 0.19], [1585899170000, 0.32], [1585899180000, 0.17], [1585899190000, 0.2], [1585899200000, 0.23], [1585899210000, 0.2], [1585899220000, 0.18], [1585899230000, 0.22], [1585899240000, 0.18], [1585899250000, 0.2], [1585899260000, 0.23], [1585899270000, 0.21], [1585899280000, 0.22], [1585899290000, 0.18], [1585899300000, 0.21], [1585899310000, 0.18], [1585899320000, 0.18], [1585899330000, 0.25], [1585899340000, 0.13], [1585899350000, 0.25], [1585899360000, 0.18], [1585899370000, 0.18], [1585899380000, 0.24], [1585899390000, 0.21], [1585899400000, 0.24], [1585899410000, 0.21], [1585899420000, 0.22], [1585899430000, 0.19], [1585899440000, 0.2], [1585899450000, 0.18], [1585899460000, 0.2], [1585899470000, 0.23], [1585899480000, 0.18], [1585899490000, 0.32], [1585899500000, 0.31], [1585899510000, 0.42], [1585899520000, 0.22], [1585899530000, 0.44], [1585899540000, 0.33], [1585899550000, 0.3], [1585899560000, 0.35], [1585899570000, 0.23], [1585899580000, 0.33], [1585899590000, 0.32], [1585899600000, 0.45], [1585899610000, 0.31], [1585899620000, 0.33], [1585899630000, 1.08], [1585899640000, 0.31], [1585899650000, 0.38], [1585899660000, 0.44], [1585899670000, 0.5], [1585899680000, 0.45], [1585899690000, 0.35], [1585899700000, 0.58], [1585899710000, 0.57], [1585899720000, 0.58], [1585899730000, 0.52], [1585899740000, 1.66], [1585899750000, 0.18], [1585899760000, 0.2], [1585899770000, 0.16], [1585899780000, 0.22], [1585899790000, 0.2]]}]
time is in milliseconds
and my output shows only one label but sometimes it shows enough labels. I am not able to add jsfidle as it works good there. Problem happens on my application.

I have tried to reproduce your issue, but everything works fine with using the data which you have provided.
Demo: https://jsfiddle.net/BlackLabel/1j37eL0u/
xAxis: {
type: 'datetime'
},
I assumed (from your screen) that the problem exists only when the chart width is small. What can I suggest is to use the responsive rule to set the xAxis.tickAmount to some amount.
API: https://api.highcharts.com/highcharts/xAxis.tickAmount
API: https://api.highcharts.com/highcharts/responsive
Or you can try to use the tickPositioner callback to match the ticks.
API: https://api.highcharts.com/highcharts/xAxis.tickPositioner
If the above advices wouldn't help - please try to reproduce your case on some online editor which I could work on. One thing which came to my mind - maybe you are using the different Highcharts version than the current one?

Related

Normalizing data that has low variation

I ran several benchmarks on a CPU cache simulation to count the number of the reuse distances (the distance between two accesses of the same cache entry during execution of the program), here are two examples of the data I got from two different benchmarks:
Benchmark 1:
"reuse_dist_counts": {
"-1": 340,
"0": 623,
"1": 930,
"100": 1,
"107": 1,
"114": 1,
"121": 1,
"128": 1,
"135": 1,
"142": 1,
"149": 1,
"156": 1,
"163": 1,
"170": 1,
"177": 1,
"184": 1,
"191": 1,
"198": 1,
"2": 617,
"205": 1,
"212": 1,
"219": 1,
"226": 1,
"233": 1,
"240": 1,
"247": 1,
"254": 1,
"261": 1,
"268": 1,
"275": 1,
"282": 1,
"289": 1,
"296": 1,
"3": 617,
"303": 1,
"310": 1,
"311": 1,
"314": 1,
"4": 1,
"48": 1,
"55": 1,
"62": 1,
"69": 1,
"76": 1,
"79": 1,
"86": 1,
"93": 1
}
Benchmark2:
"reuse_dist_counts": {
"-1": 58,
"0": 128,
"1": 320,
"11": 17,
"12": 1,
"13": 2,
"14": 4,
"15": 18,
"16": 14,
"17": 13,
"18": 13,
"19": 16,
"2": 256,
"20": 16,
"21": 17,
"22": 17,
"23": 2,
"24": 1,
"25": 3,
"26": 3,
"27": 2,
"28": 3,
"29": 2,
"3": 289,
"30": 2,
"31": 2,
"34": 2,
"35": 6,
"38": 2,
"39": 2,
"4": 198,
"40": 4,
"41": 1,
"43": 1,
"44": 2,
"45": 1,
"47": 1,
"48": 2,
"5": 63,
"50": 1,
"6": 81,
"7": 106,
"8": 1
}
it has the form a:b where a is a reuse distance and b is how many times that reuse distance has been found during the execution.
As I'm going to design a neural network based on this data, it's necessary to find a good normalization to represent it in a different way. Any idea on how to normalize such data with such low variations, and how to represent its features vectors?

Show Series and colorAxis both in Legend

Is it possible to have both colorAxis and series in the legend? http://jsfiddle.net/6k17dojn/ i see i can only show one at a time when I toggle this setting
colorAxis: {
showInLegend: true,
}
Currently to show a basic legend with colorAxis, you need to add some code to Highcharts core. This plugin below allows you to add colorAxis to a legend if showInLegend property is set to false:
(function(H) {
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
var colorAxisItems = [],
colorAxis = this.chart.colorAxis[0],
i;
if (colorAxis && colorAxis.options) {
if (colorAxis.options.dataClasses) {
colorAxisItems = colorAxis.getDataClassLegendSymbols();
} else {
colorAxisItems.push(colorAxis);
}
}
i = colorAxisItems.length;
while (i--) {
e.allItems.unshift(colorAxisItems[i]);
}
});
}(Highcharts))
Live demo: http://jsfiddle.net/BlackLabel/hs1zeruy/
API Reference: https://api.highcharts.com/highcharts/colorAxis.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
It's possible, but not with the data you currently work with. A heatmap's data is a set of coordinates, but here, your two series overlap.
Your raw data is :
[
[0,0,0.2, 0.4],
[0,1,0.1, 0.5],
[0,2,0.4, 0.9],
[0,3,0.7, 0.1],
[0,4,0.3, 0.6]
]
From there, you're mapping two series: 2018, and 2019 via the seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}] option.
You thus end up with the following two series:
2018 2019 2019 should be
[ [ [
[0, 0, 0.2], [0, 0, 0.4], [1, 0, 0.4],
[0, 1, 0.1], [0, 1, 0.5], [1, 1, 0.5],
[0, 2, 0.4], [0, 2, 0.9], [1, 2, 0.9],
[0, 3, 0.7], [0, 3, 0.1], [1, 3, 0.1],
[0, 4, 0.3] [0, 4, 0.6] [1, 4, 0.6]
] ] ]
Notice that in both cases, the coordinates are the same, but for 2019, the x value should be 1. Since you have 0 as x coordinate for both series, they overlap.
To fix you issue, you need to change your data (or pre-process it, whatever is easier). For example:
var data = '[[0,0,0.2, 0.4],[0,1,0.1, 0.5],[0,2,0.4, 0.9],[0,3,0.7, 0.1],[0,4,0.3, 0.6]]';
var rows = JSON.parse(data);
rows = $.map(rows, function(arr){
return [[
arr[0], arr[1], arr[2], // 2018
arr[0] + 1, arr[1], arr[3], // 2019
]];
});
// and the seriesMapping changes to
data: {
rows: rows,
firstRowAsNames: false,
seriesMapping: [{x: 0, y: 1, value: 2}, {x: 3, y: 4, value: 5}]
},
You can see it in action here: http://jsfiddle.net/Metoule/qgd2ca6p/6/

GridSearchCV on XGBoost model gives error

I made a XGBoost classifier in python. I tried to do GridSearch to find optimal parameters like this
grid_search = GridSearchCV(model, param_grid, scoring="neg_log_loss", n_jobs=-1, cv=kfold)
grid_result = grid_search.fit(X, Y)
print("Best: %f using %s" % (grid_result.best_score_, grid_result.best_params_))
means = grid_result.cv_results_['mean_test_score']
stds = grid_result.cv_results_['std_test_score']
params = grid_result.cv_results_['params']
for mean, stdev, param in zip(means, stds, params):
print("%f (%f) with: %r" % (mean, stdev, param))
When running the Search I get an error like this
[Errno 28] No space left on device
I used a slightly big size dataset. Where,
X.shape = (38932, 1002)
Y.shape= (38932,)
What is the issue.? How to solve this.?
Is this because the dataset is too huge for my machine.? If so what can I do to preform GridSearch on this dataset.?
The error indicates that the shared memory is running out, It's likely that increasing the number of kfolds and/or adjusting the number of threads used i.e. n_jobs will resolve this issue
.Here is a working example using xgboost
import xgboost as xgb
from sklearn.model_selection import GridSearchCV
from sklearn import datasets
clf = xgb.XGBClassifier()
parameters = {
'n_estimators': [100, 250, 500],
'max_depth': [6, 9, 12],
'subsample': [0.9, 1.0],
'colsample_bytree': [0.9, 1.0],
}
bsn = datasets.load_iris()
X, Y = bsn.data, bsn.target
grid = GridSearchCV(clf,
parameters, n_jobs=4,
scoring="neg_log_loss",
cv=3)
grid.fit(X, Y)
print("Best: %f using %s" % (grid.best_score_, grid.best_params_))
means = grid.cv_results_['mean_test_score']
stds = grid.cv_results_['std_test_score']
params = grid.cv_results_['params']
for mean, stdev, param in zip(means, stds, params):
print("%f (%f) with: %r" % (mean, stdev, param))
The outputs is
Best: -0.121569 using {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 100, 'subsample': 1.0}
-0.126334 (0.080193) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 100, 'subsample': 0.9}
-0.121569 (0.081561) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 100, 'subsample': 1.0}
-0.139359 (0.075462) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 250, 'subsample': 0.9}
-0.131887 (0.076174) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 250, 'subsample': 1.0}
-0.148302 (0.074890) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 500, 'subsample': 0.9}
-0.135973 (0.076167) with: {'colsample_bytree': 0.9, 'max_depth': 6, 'n_estimators': 500, 'subsample': 1.0}
-0.126334 (0.080193) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 100, 'subsample': 0.9}
-0.121569 (0.081561) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 100, 'subsample': 1.0}
-0.139359 (0.075462) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 250, 'subsample': 0.9}
-0.131887 (0.076174) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 250, 'subsample': 1.0}
-0.148302 (0.074890) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 500, 'subsample': 0.9}
-0.135973 (0.076167) with: {'colsample_bytree': 0.9, 'max_depth': 9, 'n_estimators': 500, 'subsample': 1.0}
-0.126334 (0.080193) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 100, 'subsample': 0.9}
-0.121569 (0.081561) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 100, 'subsample': 1.0}
-0.139359 (0.075462) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 250, 'subsample': 0.9}
-0.131887 (0.076174) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 250, 'subsample': 1.0}
-0.148302 (0.074890) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 500, 'subsample': 0.9}
-0.135973 (0.076167) with: {'colsample_bytree': 0.9, 'max_depth': 12, 'n_estimators': 500, 'subsample': 1.0}
-0.132745 (0.080433) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 100, 'subsample': 0.9}
-0.127030 (0.077692) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 100, 'subsample': 1.0}
-0.146143 (0.077623) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 250, 'subsample': 0.9}
-0.140400 (0.074645) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 250, 'subsample': 1.0}
-0.153624 (0.077594) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 500, 'subsample': 0.9}
-0.143833 (0.073645) with: {'colsample_bytree': 1.0, 'max_depth': 6, 'n_estimators': 500, 'subsample': 1.0}
-0.132745 (0.080433) with: {'colsample_bytree': 1.0, 'max_depth': 9, ...

Naming a point on highcharts

I want to name a few points on my time data with irregular intervals. I am trying this as shown on fiddle by appending as
{ [Date.UTC(1970, 9, 27), 0 ] , name: 'point 1'},
but it is not working, any inputs ? I also want to have color for those points.
DEMO
You will have to pass data like:
data: [
{x:Date.UTC(1970, 11, 2), y:2,color:'red', name:'point 1'},
{x:Date.UTC(1970, 11, 3), y:3,color:'blue', name:'point 2'},
{x:Date.UTC(1970, 11, 4), y:4,color:'orange', name:'point 3'},
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
.......
...
Change from:
{ [Date.UTC(1970, 9, 27), 0 ] , name: 'point 1'},
To:
{ x: Date.UTC(1970, 9, 27), y: 0, name: 'point 1'},

Highcharts tilted view

I have problems with displaying an highcharts area chart.
At the jsFiddle link you can see that the red area (with negative values) is tilt or rotated or however I should describe this ;-)
Any idea what i have to do, or is this bug?
Best regards
Andi
[http://jsfiddle.net/7jGx5/1/]
Data for red series should be sorted by x, ascending.
EDIT:
[Date.UTC(2013, 3, 8, 8, 46), -177],
[Date.UTC(2013, 3, 8, 8, 47), -1072],
[Date.UTC(2013, 3, 8, 8, 48), -2199],
[Date.UTC(2013, 3, 8, 8, 49), -2265],
[Date.UTC(2013, 3, 8, 7, 52), 308],
[Date.UTC(2013, 3, 8, 7, 53), 277],
[Date.UTC(2013, 3, 8, 7, 54), 317],
[Date.UTC(2013, 3, 8, 7, 55), 154],
[Date.UTC(2013, 3, 8, 7, 56), 296],
[Date.UTC(2013, 3, 8, 7, 57), 200],
[Date.UTC(2013, 3, 8, 7, 58), -237],
[Date.UTC(2013, 3, 8, 7, 59), 207],
[Date.UTC(2013, 3, 8, 8, 0), 128],
[Date.UTC(2013, 3, 8, 8, 1), 276],
[Date.UTC(2013, 3, 8, 8, 2), 225],

Resources