I know you can pass arbitrary data into your time series points, such as:
new Highcharts.Chart( {
...,
series: [{
name: 'Foo',
data: [ { y : 10.0, customData : 'value 1' },
{ y : 20.0, customData : 'value 2' },
{ y : 30.0, customData : 'value 3' } ]
}]
} );
However, I noticed that this doesn't quite work in HighStock when your time series is comprised of a large data set (1000+ points).
For example, here is a working fiddle http://jsfiddle.net/gparajon/c5fej775/ (less than 1000 points, which also happens to be the default turboThreshold). And here's the same fiddle, with more data, which breaks the tooltip formatter: http://jsfiddle.net/gparajon/5om258az/
Any workaround?
Thanks!
The error in the console is a bug and it is not really connect why you cannot access extra info in the formatter.
The difference between a chart and a stockchart is that a stockchart does data grouping, what means that in the formatter callback you receive grouped points which does not include extra data (how should they be grouped?).
example: https://jsfiddle.net/g04La2qh/1/
If you disable data grouping, you will receive non-grouped points with extra data.
dataGrouping: {
enabled: false
},
example: https://jsfiddle.net/g04La2qh/2/
Related
I'm developing an web application that handles and shows large amounts of live data from some devices. To visualise the data I decided to use HighStock. It seems to work well on most of the data:
However, when the bottom navigator touches right border, the picture becomes quite different:
The timeline is almost the same, but the number of points is different, also vertical scale is different... What is this happening? How to fix it?
My code looks this way:
const ch1 = Highcharts.stockChart('chart1', {
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {visibility: 'hidden'},
labelStyle: {visibility: 'hidden'},
},
title: {
text: 'Metrics',
},
series: [{
name: 'Sensor 1', data: [],
}, {
name: 'Sensor 2', data: [],
}, {
name: 'Sensor 3', data: [],
}]
});
// a,b,c gets values from the server
// They are arrays of pairs of timestamp & value
ch1.series[0].setData(a);
ch1.series[1].setData(b);
ch1.series[2].setData(c);
// tm_min & tm_max are dynamically calculated using the data
ch1.xAxis[0].setExtremes(tm_min, tm_max);
Update: Here is an example with 2% of my data – try to do the same as shown above.
I found the solution. The issue is caused by your data and xAxis.ordinal that is enabled by default in Highstock. Your data has many empty points on the right side of the chart and because of ordinal, the empty space was not rendered, yet dataGrouping grouped data differently.
Check this here https://jsfiddle.net/BlackLabel/x1tgqbw6/ (disabled ordinal):
xAxis: {
ordinal: true
}
So, the solution is to disable xAxis.ordinal or generate your data without null points:
https://jsfiddle.net/BlackLabel/ex054oy8/
API reference:
https://api.highcharts.com/highstock/xAxis.ordinal
I have a data set that contains many fields. I have no control over the creation of this JSON. Sample:
data = [
{
'maparea':'3704000063',
'relatedsource':null,
'empcount':'198390',
'response':'78',
'mean':'61663.00',
},
...
]
The chart code is:
Highcharts.mapChart('container', {
chart: {
map: geojson
},
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
keys: ['maparea', 'relatedsource', 'empcount', 'response', 'mean'],
joinBy: ['fips', 'maparea'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
The geoJSON uses fips to label the areas (in this case counties in NC). The map shows the state and county elements. However, no data is used to plot. This is because the HighMaps code is expecting a value element to be present in the data I think.
Is there a way to tell HighMaps what element in the data set to use to shade the choropleth?
I don't see any option to map your unique data shape to the expected keys in the data according to the docs. Per your comment this is possible with an array, but it doesn't seem to be possible with an object.
However, it's pretty simple to just remap your object to the required shape. The code below gives a partial example.
let dataMapped = data.map(obj => {
var median = Number(obj.median);
return Object.assign(obj, { name: obj.maparea, value: median });
});
And then use dataMapped as the value for your data.
There might be a more elegant way to do this in ES6 with object spread and avoid the Object.assign I am using to merge the old object with new attributes, but I don't have time to research that at the moment.
I will need to display objects (a doublebar chart for each object). The structure of the object is:
{
dates: (5) ["2018-12-26", "2018-12-27", "2018-12-28", "2018-12-31", "2019-01-02"]
formattedDates: (5) ["2018/12/26", "2018/12/27", "2018/12/28", "2018/12/31", "2019/01/02"]
formatPoints2: (5) [1545945000000, 1546026562061, 1546284847056, 1546465543023, 1546545993086]
points: (5) ["2018-12-27T10:36:24.893", "2018-12-28T17:29:56.517", "2018-12-31T05:48:41.587", "2019-01-01T10:10:09.683", "2019-01-03T10:36:42.002"]
points2: (5) ["2018-12-27T16:10", "2018-12-28T14:49:22.061", "2018-12-31T14:34:07.056", "2019-01-02T16:45:43.023", "2019-01-03T15:06:33.086"]
formatPoints: (5) [1545924984893, 1546036196517, 1546253321587, 1546355409683, 1546529802002]
}
I took the liberty of converting the points and points 2 array using date.getTime() to get the formatPoints and formatPoints2
what I need to do is plot the time of the timestamps vs the dates.
e.g. points[0] = 2018-12-27T10:36:24.893, dates[0] = 2018-12-26
plot 10:36:24 vs 2018-12-26 and so on for each time in the array
an extra catch I need to display the FULL timestamp in the tool-tip (2018-12-27T10:36:24.893) on the chart when you hover over the bar for that point
the chart is a double bar chart where points&points2 is plotted against dates.
In your case the key is to set the right axis types. For timestamp values on yAxis the best type will be datetime and for dates on xAxis - category. Please check the example below and let me know if everything is fine.
var series = [{data: []}, {data: []}];
data.points.forEach(function(point, i){
series[0].data.push({
name: data.formattedDates[i],
tooltipText: data.points[i],
y: data.formatPoints[i]
});
series[1].data.push({
name: data.formattedDates[i],
tooltipText: data.points2[i],
y: data.formatPoints2[i]
});
});
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
type: 'category'
},
tooltip: {
pointFormat: '{point.tooltipText}'
},
yAxis: {
min: 1545945000000,
max: 1546529802002,
type: 'datetime'
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/asm64f5r/
API: https://api.highcharts.com/highcharts/xAxis.type
I'm in the process of creating a graph using HighStock (from HighCharts). I need to somehow convert the xAxis data to UTC objects but for some reason it is not graphing out the correct dates (it uses the default Jan1st).
If I import a list like ["2013-08-05 10:38:30","2013-08-06 10:38:30"] into javascript, how could I convert each element to a UTC object?
Many thanks!
$(function() {$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
xAxis : {
data : ["2013-08-05 10:38:30","2013-08-06 10:38:30"],
type : 'datetime'
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : [10,20],
tooltip: {
valueDecimals: 2
}
}]
});
});
I advice to get your all string, then use i.e split function, and use Date.UTC() function. After it you can use this as x parameter in point in serie. Like:
series:[{
data:[[Date.UTC(2012,2,2),10],[Date.UTC(2013,2,2),3]]
}]
Data cannot be used in xAxis.
NVD3 have multi bar chart and line plus bar chart. But it seem like, there isn't something like multibar plus line chart.
I sort of played around line plus bar chart to make it multi bar line chart.
Here is the format in which line plus bar graph accepts data:
[
{
"key" : "Quantity",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Price",
"values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
}
]
So to add multiple bars in this, i tried changing the data to:
[
{
"key" : "Quantity",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Quantity1",
"bar": true,
"values" : [[1136005200000, 127], [1138683600000, 271]]
},
{
"key" : "Price",
"values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
}
]
This shows both labels, Quantity and Quantity1 at the top but to total no of bars is still two(one for each instead of two for each).
Since I am getting the labels at the top, I somehow feel that this is doable :)
Here is the fiddle.
Explaining the problem statement: Lets say there is a book store with various books. I want to show the max and min no of book sold in a day over a period of one month as bars and total sale in that month as line graph. So for every month on x axis, there should be two bars and one point(for line graph).
The real answer to this question for anyone else wondering is to either set stacked to true in nv.models.multiChart or create another model based on nv.models.multiChart.
bars1 = nv.models.multiBar().stacked(true).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(true).yScale(yScale2)
Line number in source code:
https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34
And I'm passing data in like so:
data.push({
type: "bar",
key: series.name,
values: seriesData,
yAxis: 1
}
)
Check multiChart.html example from nvd3 package examples. This example uses multiChart type and displays 2 line points, 2 area points and 3 bars per each x point, so it can also display just 2 bars and 1 line point.