I have a problem with Highcharts - I am trying to take an existing chart, merge it into a new one, alter a few properties and then show it.
The problem I'm getting is that I can't seem to enable the xAxis labels in the copied chart. If I turn them on in the original chart they exist in the copied one, but there seems no way of altering the enabled state. A JSFiddle is below:
http://jsfiddle.net/liamfl/a7xvfyg6/
The code is as follows:
var chart_PortfolioDetailsDistribution;
var popupChart;
$(document).ready(function () {
chart_PortfolioDetailsDistribution = new Highcharts.Chart({
chart:{animation:false,renderTo:'smallchart3'}
,title:{text:'Distribution'}
,tooltip:{headerFormat:'',pointFormat:'<b>{point.name}</b>: {point.y}'}
,legend:{enabled:false}
,credits:{enabled:false}
,plotOptions:{series:{animation:false,borderWidth:0,dataLabels:{format:'<b>{point.y}</b>'}
,groupPadding:0,pointPadding:0}
}
,yAxis:{
title:{text:null}
}
,xAxis:{
labels:{enabled:false,rotation:-90}
,title:{text:null}
,type:'category'
}
,series:[{
data:[['<-10%',0],['<-5%',3],['<-2.5%',3],['<-1%',2],['<0%',10],['>0%',3],['>1%',0],['>2.5%',0],['>5%',0],['>10%',0]],
name:'Portfolio',
type:'column'}]
});
popupChart = new Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
chart: { renderTo: 'smallchart4' },
xAxis: { labels: { enabled: true }},
legend: { enabled: true },
plotOptions: { series: { dataLabels: { enabled: true } }}
}));
});
Any ideas? I'm stumped (which for me is a natural state...)
xAxis returned by .options is actually an array of objects. So, when you merge it you need to merge with an array.
http://jsfiddle.net/a7xvfyg6/1/
Highcharts.Chart(Highcharts.merge(chart_PortfolioDetailsDistribution.options, {
chart: { renderTo: 'smallchart4' },
xAxis: [{ labels: { enabled: true }}],
legend: { enabled: true },
plotOptions: { series: { dataLabels: { enabled: true } }}
}));
Related
I can get rid of all animations with this
plotOptions: {
series: {
enableMouseTracking: true
But I want tooltips. But I don't want any other mouseover effects. I tried this suggestion:
plotOptions: {
series: {
allowPointSelect: false,
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
},
select: {
enabled: false
}
}
}
},
But it has no effect on animations. My series are still faded if I mouseover an area with null data.
To sum up:
when styledmode is turn on, and you loading default CSS file, you need to add following code to the CSS:
inactive { opacity: 1 }
when styledmode is disabled (by default), you don't need to add the default CSS file, but to achieve that use options provided by API:
plotOptions: {
series: {
states: {
hover: {
enabled: false
},
inactive: {
enabled: false
}
}
}
}
I have a set of series with markers disabled, and I want to enable all the markers on serie hover, not individual point ans the doc states here: http://api.highcharts.com/highcharts/plotOptions.series.states.hover
The closest thing I had is this:
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: true,
marker: {
enabled: false
}
}
}
}
}
With this I hoped that the markers are all off, and when hovering all the markers are showed, as I thought that the series markers.enabled was set to true, but as the docs I shown above states, this is not what happens.
I would like to do this to show the user where he can mouseover to see the next/prev tooltip, as the markers are not equidistant.
Is possible to achieve this?
You can use series.events.mouseOver and series.events.mouseOut functions for updating your series, so you will show or hide your markers.
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false
},
events: {
mouseOver: function() {
this.update({
marker: {
enabled: true
}
});
},mouseOut: function() {
this.update({
marker: {
enabled: false
}
});
}
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/hgbz7kg6/
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/
http://jsfiddle.net/wtftc/cGbUh/
$(function () {
$('#container').highcharts({
chart: {
plotBorderWidth: 1
},
xAxis: {
},
yAxis: [{
startOnTick: true,
endOnTick: true,
}, {
opposite: true,
title: {
text: null,
}
}],
title: {
text: '',
},
series: [{
data: [-67900.92, 454001.7, -204238.28, 322154.52, 162814.29, 940881.87, 454987.58, -190981.9, 77289.43, -578758.66, 232812.59, -553224.3, -161440.06, 203872.86, -487226.65, 582178.18, 88564.43, 250057.57, -62186.0600000001, 377721.25, -196420.64, 38713.0099999999, 284969.83, 166221.67],
}]
});
// the button action
$('#button').click(function() {
var chart = $('#container').highcharts();
var yAxis = chart.yAxis[0];
yAxis.options.startOnTick = false;
yAxis.options.endOnTick = false;
chart.yAxis[0].setExtremes(-1034970.057, 1034970.057);
});
});
I created a jsfiddle example of what I am trying to do. I load up a chart with the data in the example, then I want to set custom values for my axis. The extremes I am setting are -1034970.057, 1034970.057 because I want my y axis values to be symmetric.
However, what I end up with in the chart is yAxis extremes of -1.5m and +3m rather than -1.5m and +1.5m. I am asking it to be symmetric, but after you push the set extremes button, you can see that it is not symmetric.
My data is dynamic and changes based on the settings on the page they are looking at, so this data is just an example of one of the many scenarios that I can encounter. This means that I can't hard code a tick interval or tick count. Is there a way to have this be symmetric?
I got it working by setting the start/endOnTick setting to false in the chart and then to true on click.
http://jsfiddle.net/uNvvk/
yAxis: [{
startOnTick: false,
endOnTick: false,
}, {
yAxis.options.startOnTick = true;
yAxis.options.endOnTick = true;
I've no idea why that works though!
After any sort of zoom (mouse drag, range selector, date input) the datetime returned from the point click event is usually incorrect. I've not yet found this problem when using an area chart, have found it using both bar and column chart.
To recreate: run the fiddle, zoom using the mouse across a few of the columns, click a datapoint. The alert will show the datetime returned. Notice it's different from the tooltip (which is correct).Usually fails after first click, even for the same datapoint.
BTW useUTC setting doesn't matter.
Fiddle: http://jsfiddle.net/jrEDT/
Code for completeness:
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
type: 'column'
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
Highcharts.setOptions({
global: {
useUTC: false // datetime reflects time on db (ie, local) rather than GMT
}
});
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
exporting: {
enabled: false
},
rangeSelector: {
selected: 4
},
yAxis: {
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}],
offset: 25
},
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
click: function() {
var series = this.series.name;
var utc = this.x;
var d = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
alert(d);
}
}
}
}
},
tooltip: {
formatter:function(a,b,c){
var d = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
return d;
},
enable:true
},
series: seriesOptions
});
}
});
Thanks!
Have you tried to disable datagrouping http://api.highcharts.com/highstock#plotOptions.series.dataGrouping ?