Depending on the value of the highcharts range selector, I would like to change the data grouping. In my column chart, if one week is selected, there should be 7 bars, if one day is selected, there should be 24 bars, if one month is selected, there should be a bar for each day of the month.
There doesnt seem to be any way to supply a function inside the highchart configs to accomplish this, but I may be missing something.
My current plan was to handle a click event on the range selector to update the series data to contain the correct amount of points. But there may be a better way.
Thanks
There certainly are a bunch of options available in highstock for data grouping.
The primary one that you should look at is units. Here you can specify what kind of groups are allowed.
Top this up with groupPixelWidth and you have what you need, this width defines how small can a point in your chart be, if the number of points on the chart goes higher, the width per point decreases, once it goes below this threshold highcharts would force grouping. Keep this large enough to force grouping of next level, given you want not more than ~30 points on the screen.
dataGrouping: {
units: [
['hour', [1]],
['day', [1]],
['month', [1]],
['year', null]
],
groupPixelWidth: 100
}
#jsFiddle
Instead of using events you can combine range selector buttons with data grouping.
See: "Data grouping by buttons" in the API https://api.highcharts.com/highstock/rangeSelector.buttons
Example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/datagrouping/
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}]
},
We tried a Hack around this, where we used Highstock's (Splinechart) RangeSelector, Event and DataGrouping. On click of weekly rangeselectorButton we catch this event through setExtremes. Post catching the event approximate it to "sum". If you are using two series than iterate the object.
events: {
setExtremes: function (e) {
if (e.rangeSelectorButton != undefined) {
var triger = e.rangeSelectorButton;
if (triger.type == 'week') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['week', [1]];
});
} else if (triger.type == 'day') {
$.each(this.series, function (index, obj) {
obj.options.dataGrouping.units[0] = ['day', [1]];
});
}
}
}
},
#fiddle
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 stacked bar chart made with C3.js which uses the following code to be generated:
stacked_bar_chart = c3.generate({
bindto: '#stacked_bar_chart_container',
data: {
columns: [
["Critical", 446, 863],
["High", 1160, 2301],
["Medium", 3106, 8258],
["Low", 277, 119],
["Informational", 7374, 23240]
],
type: 'bar',
groups: [
['Low', 'Medium', 'Informational', 'High', 'Critical', 'Unknown']
],
},
grid: {
y: {
lines: [{ value: 0 }]
}
},
axis: {
x: {
type: 'category',
categories: ["Remediated", "Unconfirmed"] // Notice the x-axis has categories
},
y: {
label: 'Number of Findings'
}
},
});
I am trying to make it so that at the click of a button, I am able to hide the bar called Remediated from the graph. I have tried to unload it by doing the following:
stacked_bar_chart.unload("Remediated");
but this has no effect, and I am pretty sure it is because I am using type: 'category' for the x-axis. I would prefer to not have to unload the data anyways so that later on I can re-display the bar as needed without retrieving the data again.
After some research in the C3.js reference page, I think that there is no easy API function for this to be accomplished, so I have come up with my own tested implementation of this feature that I am currently using.
Firstly, with the way that I do it I am keeping track of three separate global variables which will hold the data currently in the chart and also will hold the data we remove from it. This is the way I decided to choose because the data for my chart is coming from a web resource, so it would be inefficient to keep making AJAX calls and refreshing the data every time a category is added or removed.
// Our three new variables
var removed_from_stacked_bar = {};
var stacked_bar_categories = ["Remediated", "Unconfirmed"];
var stacked_bar_data = [
["Critical", 446, 863],
["High", 1160, 2301],
["Medium", 3106, 8258],
["Low", 277, 119],
["Informational", 7374, 23240]
];
function initialize_stacked_bar_chart(data, categories) {
stacked_bar_chart = c3.generate({
bindto: '#stacked_bar_chart_container',
data: {
columns: data, // Coming from the parameter
type: 'bar',
groups: [
['Low', 'Medium', 'Informational', 'High', 'Critical', 'Unknown']
],
},
grid: {
y: {
lines: [{ value: 0 }]
}
},
axis: {
x: {
type: 'category',
categories: categories // Coming from the parameter
},
y: {
label: 'Number of Findings'
}
},
});
}
initialize_stacked_bar_chart(stacked_bar_data, stacked_bar_categories);
Now I wrote a function called update_stacked_bar_chart() which has a category parameter in order to remove / add the category that is passed in from the chart whenever it is called.
function update_stacked_bar_chart(category) {
var categoryIndex = stacked_bar_categories.indexOf(category);
var removed_values = [];
if (categoryIndex != -1) { // Removing the item since it exists in the bar chart's categories
stacked_bar_categories.splice(categoryIndex, 1); // Removing the category name from the bar chart's category list
stacked_bar_data.forEach(function (item, index) {
var temp = item.splice(categoryIndex + 1, 1); // Removing the value this category held (in-place) in the sublist for each severity
removed_values.push(temp); // Pushing each removed value into the array of removed values (in order from Critical, High, Medium, Low, Informational).
});
removed_from_stacked_bar[category] = removed_values;
} else { // Re-adding the item if it was not found in the current chart's categories
stacked_bar_categories.push(category); // Adding the category name to the bar chart's category list
removed_from_stacked_bar[category].forEach(function (item, index) {
stacked_bar_data[index].push(item); // Adding the value for each severity into the respective severity list
});
delete removed_from_stacked_bar[category];
}
initialize_stacked_bar_chart(stacked_bar_data, stacked_bar_categories); // Remaking the bar chart with the new data and categories.
}
This function will allow you to toggle any category from your bar chart every time it is called. You can attach it to an event listener so that it is called as you need it.
Here is an example of how it can be used to toggle bars as it is called:
update_stacked_bar_chart("Remediated"); // Removes the "Remediated" bar
update_stacked_bar_chart("Remediated"); // Re-adds the "Remediated" bar
update_stacked_bar_chart("Remediated"); // Removes the "Remediated" bar
update_stacked_bar_chart("Unconfirmed"); // Removes the "Unconfirmed" bar
update_stacked_bar_chart("Remediated"); // Re-adds the "Remediated" bar
update_stacked_bar_chart("Unconfirmed"); // Re-adds the "Unconfirmed" bar
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 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/
In highstock range selector I added a custom range selector button (named: my dates) and would like to set a custom extremes when this button is called. I know it works if you put simple button outside the chart and call: chart.xAxis[0].setExtremes(30,80);.
But my scenario is different I want to add a button beside "1m 1y All" range selector buttons, and want that new button to set a custom extremes dates. Using xAxis events setExtremes, does not seems to work unless I am missing something. http://jsfiddle.net/Aeaz3/1/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{
type: '',
count: 2,
text: 'My dates'
},{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
},
title : {
text : 'AAPL Stock Price'
},
xAxis: {
events:{
setExtremes: function(e) {
var xMin = e.min;
var xMax = e.max;
var zmRange = computeTickInterval(xMin, xMax);
this.chart.xAxis[0].options.tickInterval =zmRange;
this.chart.xAxis[0].isDirty = true;
},
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
The setExtremes callback:
Fires when the minimum and maximum is set for the axis, either by
calling the .setExtremes() method or by selecting an area in the
chart. The this keyword refers to the axis object itself. One
parameter, event, is passed to the function. This contains common
event information based on jQuery or MooTools depending on which
library is used as the base for Highcharts.
So it's not really meant to be used to set extremes but is rather a notification when something else does some extreme setting.
That said, I still think it is possible to leverage it for your use case by catching the call when your button is clicked and then resetting it to your custom range:
xAxis: {
events:{
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "My dates"){
// it is your button that caused this,
// so setExtrememes to your custom
// have to do in timeout to let
// highcharts finish processing events...
setTimeout(function(){
Highcharts.charts[0].xAxis[0].setExtremes(1198681756385,1368144000000)
}, 1);
}
}
},
Updated Fiddle here.
One approach would be to modify highstock to use the values of e.min and e.max if they are changed in your event handler. This can be done by modifying 3 lines of code.
in highstock.src.js line 7447 (in version 2.0.4). The method is called setExtremes.
Change:
fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler
axis.userMin = newMin;
axis.userMax = newMax;
To:
fireEvent(axis, 'setExtremes', eventArguments, function (event) { // the default event handler
axis.userMin = event.min;
axis.userMax = event.max;
And now changing e.min or e.max in the xAxis.setExtremes event will work. (Don't call setExtremes())