I am currently struggling with my Highcharts chart with the hours format. I have a series with 65 points of data but the hour format of each point is 24 hours. I am unable to use the same format in the highchart and it automatically converts for example 13:00:00 to 01:00:00.
Here is my script
<script>
Highcharts.setOptions({ global: { timezoneOffset: 660, useUTC: true } });
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.StockChart({
chart: { renderTo:'chart1_container', type: 'spline' },
plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true } },
subtitle: { text: 'Y1' },
title: { text: 'Y1' },
tooltip: { enabled: true, formatter: function() {var s = [];$.each(this.points, function(i, point) {s.push('<span style="color:'+point.series.color+';font-weight:bold;">'+ point.series.name +' : '+point.y + '<span>'); });return s.join(' and ');}, shared: true },
xAxis: { dateTimeLabelFormats: { hour: '%H:%M', day: '%H:%M' }, type: 'datetime' },
yAxis: { title: { text: 'Y1' } },
series: [{ data: [[Date.parse('09/01/2016 12:45:34'), 0], [Date.parse('09/01/2016 12:46:11'), 0], [Date.parse('09/01/2016 12:47:24'), 0], [Date.parse('09/01/2016 12:48:59'), 0], [Date.parse('09/01/2016 12:50:41'), 1], [Date.parse('09/01/2016 12:51:43'), 1], [Date.parse('09/01/2016 12:52:01'), 1], [Date.parse('09/01/2016 12:55:14'), 1], [Date.parse('09/01/2016 13:01:12'), 1], [Date.parse('09/01/2016 13:01:30'), 1], [Date.parse('09/01/2016 13:02:37'), 1], [Date.parse('09/01/2016 13:03:31'), 1], [Date.parse('09/01/2016 13:04:19'), 1], [Date.parse('09/01/2016 13:05:14'), 1], [Date.parse('09/01/2016 13:05:32'), 1], [Date.parse('09/01/2016 13:06:52'), 1], [Date.parse('09/01/2016 13:07:47'), 1], [Date.parse('09/01/2016 13:08:06'), 1], [Date.parse('09/01/2016 13:09:01'), 1], [Date.parse('09/01/2016 13:10:14'), 1], [Date.parse('09/01/2016 13:12:27'), 2], [Date.parse('09/01/2016 13:13:15'), 2], [Date.parse('09/01/2016 13:14:03'), 2], [Date.parse('09/01/2016 13:14:40'), 2], [Date.parse('09/01/2016 13:15:35'), 2], [Date.parse('09/01/2016 13:16:30'), 2], [Date.parse('09/01/2016 13:17:55'), 2], [Date.parse('09/01/2016 13:18:21'), 2], [Date.parse('09/01/2016 13:21:30'), 2], [Date.parse('09/01/2016 13:23:58'), 3], [Date.parse('09/01/2016 13:26:39'), 3], [Date.parse('09/01/2016 13:29:18'), 4], [Date.parse('09/01/2016 13:30:14'), 4], [Date.parse('09/01/2016 13:31:29'), 4], [Date.parse('09/01/2016 13:32:36'), 4], [Date.parse('09/01/2016 13:34:10'), 4], [Date.parse('09/01/2016 13:36:39'), 5], [Date.parse('09/01/2016 13:39:01'), 5], [Date.parse('09/01/2016 13:39:38'), 5], [Date.parse('09/01/2016 13:40:46'), 5], [Date.parse('09/01/2016 13:42:01'), 6], [Date.parse('09/01/2016 13:43:09'), 6], [Date.parse('09/01/2016 13:45:32'), 6], [Date.parse('09/01/2016 13:46:59'), 7], [Date.parse('09/01/2016 13:48:26'), 7], [Date.parse('09/01/2016 13:49:04'), 7], [Date.parse('09/01/2016 13:50:11'), 7], [Date.parse('09/01/2016 13:51:46'), 8], [Date.parse('09/01/2016 13:55:18'), 8], [Date.parse('09/01/2016 13:56:04'), 8], [Date.parse('09/01/2016 13:59:37'), 9], [Date.parse('09/01/2016 14:02:25'), 10], [Date.parse('09/01/2016 14:08:38'), 11], [Date.parse('09/01/2016 14:12:13'), 12], [Date.parse('09/01/2016 14:13:12'), 12], [Date.parse('09/01/2016 14:15:58'), 13], [Date.parse('09/01/2016 14:19:44'), 14], [Date.parse('09/01/2016 14:20:35'), 14], [Date.parse('09/01/2016 14:20:55'), 14], [Date.parse('09/01/2016 14:21:53'), 14], [Date.parse('09/01/2016 14:22:52'), 14], [Date.parse('09/01/2016 14:23:51'), 15], [Date.parse('09/01/2016 14:24:30'), 15]], name: 'Y1' }]
});
});
</script>
Highcharts is not converting 13:00:00 to 01:00:00. You are using default 24-hour date time Highcharts/Highstock format. You just do not have a data point with such date that would show with a time after 12 PM, because of your timezoneOffset and other chart's settings.
Example with an extra data point: http://jsfiddle.net/68xay5jb/
for 24 hour formate try to do like below with Date.UTC
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime' //ensures that xAxis is treated as datetime values
},
series: [{
data: [
[Date.UTC(2012, 5, 22, 8, 15), 14.8],
[Date.UTC(2012, 5, 22, 8, 20), 13.9],
[Date.UTC(2012, 5, 22, 8, 25), 12.8]
//and so on...
]
}]
});
Related
I'm using the map of Europe from the Highcharts collection to draw choropleths.
It's geat but have an issue with Malta being so small, it is hard for people to see it. So my question is: is there a way to increase the size of just one country on the map? I know that normally, on a map this is done with an inset, but here I would be fine with just increasing the size so it is slightly more visible.
As an example, when I look at this map, for example, Malta (just beneath Sicily at the southern tip of Italy) is very small: https://jsfiddle.net/7j9fq8h3/
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['dk', 0],
['fo', 1],
['hr', 2],
['nl', 3],
['ee', 4],
['bg', 5],
['es', 6],
['it', 7],
['sm', 8],
['va', 9],
['tr', 10],
['mt', 11],
['fr', 12],
['no', 13],
['de', 14],
['ie', 15],
['ua', 16],
['fi', 17],
['se', 18],
['ru', 19],
['gb', 20],
['cy', 21],
['pt', 22],
['gr', 23],
['lt', 24],
['si', 25],
['ba', 26],
['mc', 27],
['al', 28],
['cnm', 29],
['nc', 30],
['rs', 31],
['ro', 32],
['me', 33],
['li', 34],
['at', 35],
['sk', 36],
['hu', 37],
['ad', 38],
['lu', 39],
['ch', 40],
['be', 41],
['kv', 42],
['pl', 43],
['mk', 44],
['lv', 45],
['by', 46],
['is', 47],
['md', 48],
['cz', 49]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/europe'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Europe'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
});
Is there any way to do this with HighMaps through the API or would my best approach be to create my own GEOJSON file for example?
Many thanks for any answers,
David
You need to find the required path element and use translate and scale transformation on it. For example:
const malta = chart.series[0].points.find(p => p.name === 'Malta');
const bbox = malta.graphic.getBBox();
const centerX = bbox.width / 2 + bbox.x;
const centerY = bbox.height / 2 + bbox.y;
const scale = 3;
malta.graphic.attr({
transform: 'translate(' +
((1 - scale) * centerX) + ', ' + ((1 - scale) * centerY) +
') scale(' + scale + ')'
}).toFront();
Live demo: https://jsfiddle.net/BlackLabel/ez6kr8a7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Useful thread: Scale path from center
I am using highcharts library to plot Sankey chart with our data, which has many number of nodes in each column. My issue is links width is reduces when it is between one of nodes on the top and one of the nodes are a bit lower than that. More longer the link is more width reduces.
I am wondering if there is any work around or some simple thing from documentation that I am missing. Any help is appreciated. Below is the fiddle
https://jsfiddle.net/Saibabu276/cqj2n413/
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
chart: {
height: 1000
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1],
['USA', 'Portugal', 1],
['USA', 'France', 1],
['USA', 'Spain', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['Portugal', 'Senegal', 1],
['Portugal', 'Morocco', 1],
['Portugal', 'South Africa', 3],
['France', 'Angola', 1],
['France', 'Senegal', 3],
['France', 'Mali', 3],
['France', 'Morocco', 3],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Spain', 'Morocco', 3],
['Spain', 'South Africa', 1],
['England', 'Angola', 1],
['England', 'Senegal', 1],
['England', 'Morocco', 2],
['England', 'South Africa', 7],
['South Africa', 'China', 5],
['South Africa', 'India', 1],
['South Africa', 'Japan', 3],
['Angola', 'China', 5],
['Angola', 'India', 1],
['Angola', 'Japan', 3],
['Senegal', 'China', 5],
['Senegal', 'India', 1],
['Senegal', 'Japan', 3],
['Mali', 'China', 5],
['Mali', 'India', 1],
['Mali', 'Japan', 3],
['Morocco', 'China', 5],
['Morocco', 'India', 1],
['Morocco', 'Japan', 3]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
To set the connection between nodes option series.sankey.curveFactor add a possibility to make the line straight completely or change the curve to lover.
Higher numbers makes the links in a sankey diagram or dependency wheelrender more curved. A curveFactor of 0 makes the lines straight.
plotOptions: {
sankey: {
nodeWidth: 10,
curveFactor: 0.1
}
},
Live demo:
https://jsfiddle.net/BlackLabel/6ac2syzx/
When using UICollectionViewFlowLayout's sectionHeadersPinToVisibleBounds = true in UICollectionView, UICollectionViewDataSourcePrefetching's func prefetchItemsAt indexPaths always repeats indexPaths, like:
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
When delete sectionHeadersPinToVisibleBounds = true (or set the value to false) array of indexPaths becomes correct in prefetchItemsAt indexPaths:
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 8], [0, 9]]
collectionView(_:prefetchItemsAt:) [[0, 10], [0, 11]]
collectionView(_:prefetchItemsAt:) [[0, 12], [0, 13]]
collectionView(_:prefetchItemsAt:) [[0, 14], [0, 15]]
collectionView(_:prefetchItemsAt:) [[0, 16], [0, 17]]
Can you please tell me how to fix this?
this is the code:
$(function () {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.2)' },
back: { size: 1, color: 'rgba(0,0,0,0.4)' },
side: { size: 8, color: 'rgba(0,0,0,0.6)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
reversed: true,
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
colorByPoint: true,
data: [[8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
},
{ type: "column",
depth: 250,
data: [0]
}],
plotOptions: {
series: {
pointWidth: 200
}
},
});
and this is jsfiddle:
http://jsfiddle.net/Rodrigoson6/2yfebsgn/
I want to have a chart that reminds the very 3d. I can do only with colors and gradients. It would be very important to add another properties at the "frame" (on top), because in that way i coulde use other colors and gradients...
But is impossible.
The yAxis is reversed, because in future on bottom (that with yaxis reversed is at the top) i will add an image...
But on bottom there will be nothing....
So, i would like to add a column in my scatter chart. But i want that the only column must be at the bottom e in the chart (now the column is at the top and half outside of chart)...
Is possible ?
Maybe another solution could be to add a rect ? but the problem is that my chart is scatter type and draggable.
Thanks
In a stacked chart with a data series in the format of [x, y] there is a larger margin on the left and on the right side. I have created the following jsfiddle to with sample data:
http://jsfiddle.net/ymyrA/4/
The code of the chart is as follows:
$(function () {
var chart = new Highcharts.Chart({
chart: {"renderTo": "container", "type": "column"},
colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a", "#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"],
credits: {"enabled": false},
plotOptions: {"column": {"stacking": "normal"}},
series: [
{"name": "Muster1", "data": [
[11, 1],
[32, 1]
]},
{"name": "Muster2", "data": [
[11, 7],
[12, 4],
[14, 4],
[15, 1],
[16, 1],
[17, 4],
[18, 6],
[19, 2],
[20, 1],
[21, 1],
[22, 1],
[25, 3],
[26, 2],
[28, 1],
[29, 1],
[30, 1]
]},
{"name": "Muster 3", "data": [
[11, 2],
[13, 2],
[15, 1],
[16, 3],
[18, 5],
[19, 11],
[20, 8],
[21, 1],
[23, 3],
[24, 12],
[27, 3],
[28, 4],
[30, 3],
[31, 3],
[33, 3],
[34, 3]
]}
],
title: {"text": null},
xAxis: {"title": {"text": "Week"}},
yAxis: {"title": {"text": "Count"}}
});
});
I have tried with min and max values, categories, etc. and nothing worked out. How can I adjust the chart to be displayed in full size?
I have updated the code and the jsfiddle with the proper sorting. I was using 3.0 and not 3.05 therefore I had no errors in the console. With the latest version I have to issues remaining. One is the above mentioned large margin at the right and left side and the other one is i am unable (even with tickInterval) to have a tick per calendar week. Based on the above mentioned sample the entire chart should have the range from x=11 to x=34 with a tick on each x.
The problem is with calculated pointRange for first series - when you have only two points, for x=11 and x=31 it is assumed that minimum interval between points in that series is 20, so Highcharts will try to set interval something about 20. For such cases you need to use pointRange for example set it to 1, see: http://jsfiddle.net/ymyrA/5/