So I built a Highcharts application which looks somewhat like this:
https://codesandbox.io/s/angular-opcho
the chart looks like this:
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
data1;
data2;
chartOptions = {
title: {
text: "Global temperature change"
},
subtitle: {
text: "Data input from CSV"
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: []
}
A highcharts application where you can upload csv data.
If you put in csv data which looks similar to this:
"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32
you will have a nice graph with x and y axis.
Now, what i am trying to do is to build in a range selector for the y axis so i can sort out really high values and have a better view on the lower values.
My problem is, i can only find range selectors that have something to do with date and time. Is there any range selector for my specific problem?
The basic range selector uses setExtremes method, so you can do the same on yAxis:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [1, 2, 3, 1, 3, 999, 888, 979]
}]
});
document.getElementById('low').addEventListener('click', function() {
chart.yAxis[0].setExtremes(0, 10);
});
document.getElementById('high').addEventListener('click', function() {
chart.yAxis[0].setExtremes(850, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/hbf2smoc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Related
Area chart looks flat due to the fact that Y axis always starts from 0 in compare to a line chart which in the same data uses some sort of auto-fit.
Plunkr
I would like to have similar auto-fit on the area chart that works on line chart as default.
(Using yAxis[0].setExtremes is not an option really).
Is there any configuration to do so?
You can achieve it by setting xAxis.min property like that:
yAxis: {
min: 10000,
labels: {
formatter: function() {
return this.value / 1000 + 'k';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/Layfnuz4/
API reference:
https://api.highcharts.com/highcharts/xAxis.min
The second approach is to set plotOptions.area.threshold
plotOptions: {
area: {
threshold: 10000,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/r7qc1jpk/
API reference:
https://api.highcharts.com/highcharts/series.area.threshold
EDIT
Automatic approach: set series.area.softThreshold = true as line series has.
series: [{
softThreshold: true,
name: 'Data',
data: data
}]
Demo:
https://jsfiddle.net/BlackLabel/8uj3kz4a/
API reference:
https://api.highcharts.com/highcharts/series.area.softThreshold
In Highcharts.js is it possible to disable/enable a given category by clicking on it? In the same way as you can disable/enable a given series in a legend by clicking on it.
If not, what is the next best alternative?
Disabling a category by clicking on it is not supported in Highcharts by default. To acheieve the wanted result you need to add custom code. For example, in render event you can add click event to xAxis labels and update the chart with new categories and data:
var H = Highcharts,
categories = ['one', 'two', 'three'],
data = [1, 2, 3];
chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this;
H.objectEach(chart.xAxis[0].ticks, function(tick) {
if (tick.label) {
H.addEvent(tick.label.element, 'click', function() {
data.splice(tick.pos, 1);
categories.splice(tick.pos, 1);
chart.update({
series: [{
data: data
}],
xAxis: {
categories: categories
}
});
});
}
});
}
}
},
series: [{
type: 'column',
data: data
}],
xAxis: {
categories: categories
}
});
Live demo: http://jsfiddle.net/BlackLabel/8wfx5yve/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
I am using a constructor to plot the Highmaps.
$(function() {
var options1 = {
chart: {
renderTo: 'container',
},
series: [{
name: 'Countries',
mapData: Highcharts.maps['custom/world'],
color: '#E0E0E0',
enableMouseTracking: false,
}, ]
};
var drawMap = function(data) {
var newSeriesData = {
type: 'mapbubble',
mapData: Highcharts.maps['custom/world'],
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
}
options1.series.push(newSeriesData);
var chart = new Highcharts.Map(options1);
};
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function(data) {
var i = 0;
/*while (i < data.length){
drawMap([data[i]]);
i++;
}*/
drawMap(data);
});
});
jsfiddle.
Using a function I am able to plot the whole data in a one go.
I want to iterate through the data and plot it one by one so that the page won't refresh and the new data will not replace the existing ones.
I have tried doing it like:
while (i < data.length){
drawMap([data[i]]);
i++;
}
But only the last point is plotted in the map. Rest of the points are not plotted. (I guess the map is plotted with all the points without persistence. So only the last point is there.)
Note: I followed this and tried for Highmaps.
Can we disable zoom on highchart graph while graph is loading.
I have multiple graphs therfore would like to disable the zoom option until all graphs gets loaded.
It is possible to change zoomType of a chart dynamically, but it is not a part of official API. That way after all charts are loaded you will be able to change their zoomType from none to some.
$(function () {
$('#container').highcharts({
chart: {
zoomType: ''
},
xAxis: {
minRange: 1
},
series: [{
data: [1,2,3,4,5,6,7]
}]
});
function enableZoom(zoomType) {
var chart = $('#container').highcharts(),
zoomX = /x/.test(zoomType),
zoomY = /y/.test(zoomType);
chart.options.zoomType = zoomType;
chart.pointer.zoomX = zoomX;
chart.pointer.zoomY = zoomY;
chart.pointer.zoomHor = zoomX;
chart.pointer.zoomVert = zoomY;
}
$('#zoomX').click(function () {
enableZoom('x');
});
$('#zoomY').click(function () {
enableZoom('y');
});
$('#zoomXY').click(function () {
enableZoom('xy');
});
$('#noZoom').click(function () {
enableZoom('');
});
});
JSFiddle: http://jsfiddle.net/pearp126/
you can do so by simple setting zoomType as null in your chart config
zoomType: null
See the documentation here for more details
Basically the only thing you need to get done is removing the chart and replacing it with one with the settings you like.
See the code below:
var chart = $('#container').highcharts();
function renderChart(){
chart = new Highcharts.Chart(chart.options);
chart.render();
}
Once you want to enable zooming (or any other setting):
$('#container').highcharts().options.chart.zoomType = 'xy';
renderChart();
To be honest I'm not sure what happens to the old chart. Hopefully it's just overwritten and doesn't it impose a big memory issue.
I created a fiddle you can find here
Basically you can stop the "selection" event (zoom), when the loading label of the chart is displayed.
Using the default Highcharts function .showLoading() for show the loading label, and the default variable loadingShown, for verify is the loading label is displayed or not.
So, by using the function .showLoading(), let's say before doing an AJAX request, and validating with the variable loadingShown if the loading label is displayed or not, we can stop the selection event.
Another way, is to use a thirdparty loading mask, and add it to the chart's container.
In the next example you'll find how to cancel the zoom using the .showLoading() function and how to use jQuery plugin: pLoading https://github.com/joseshiru/p-loading (for show the loading mask)
$(function () {
var setEvents;
var chart;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
events: {
selection: function () {
//Quit the selection event, while the loading spinner is displayed.
if (chart.loadingShown) {
return false;
}
}
}
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
setEvents = function () {
var $showLoadingBtn = $('.show-loading');
var $hideLoadingBtn = $('.hide-loading');
var $showExternalMask = $('.show-toggle-mask');
var $hideExternalMask = $('.hide-toggle-mask');
$showLoadingBtn.on('click.showLoading', function () {
chart.showLoading();
});
$hideLoadingBtn.on('click.hideLoading', function () {
chart.hideLoading();
});
$showExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'show'});
});
$hideExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'hide'});
});
}();
});
Example in jsfiddle: http://jsfiddle.net/8p2fzbxw/3/
I found out a problem with chart (highcharts 2.3.5) when i enter datetime series with only 1 data entry, it renders it with incorrect placement on x-axis and wrong point formatting.
here is the example: http://jsfiddle.net/LAcSw/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9]
]
}]
});
});
Is there a fix know or something(it was fine on 2.2.5)?
Since you only have a single point HighCharts is making its best guess as to the yAxis range as well as what the label is on the point for the xAxis.
You are not defining any sort of formatting for the xAxis datetime labels - and HighCharts only has one point to work with so it defaults to time. If you assign a formatter for the xAxis labels you can get it to do what you want.
Here is some rough code to show you what this does:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
},
yAxis: {
min: 0,
max:50
},
And here is your jsFiddle updated.