Suppose I have two panes in my highstock, can I remove one of the panes dynamically. So if I click on a pane, I should be able to trap the event alongwith the id of the pane(yaXis) and subsequently delete the axis alongwith its series.
I have added the panes dynamically like following( so I axis have Id etc. with me)
chartX.addAxis({ // Secondary yAxis
id: studyName,
title: {
text: studyText
},
isX: false,
lineWidth: 2,
lineColor: '#08F',
//opposite: true,
top: startHeight,
height: 100,
offset: 0
});
var chartToUpdate=chartX.addSeries({
name: 'ADBE',
id: 'studyNew',
color: 'black',
data: studyData,
yAxis: studyName
});
$("#selectStudy").append("<option value='"+countNoOfStudiesAdded+"'>"+studyName+"</option>")
}
Is it possible to delete the pane as mentioned above. Any other method that can help achieve dynamic removal of the pane will be appreciated.
Thanks.
OK I got the solution by tinkering...
The best one was by adding the events such that whenever I click on the legend of the series, its pane is removed.
var chartToUpdate=chartX.addSeries({
name: 'ADBE',
id: studyName,
color: 'black',
data: studyData,
yAxis: studyName,
events: {
legendItemClick: function(event) {
this.yAxis.remove();
countNoOfStudiesAdded--;
}
}
});
If someone wants the exact answer to my question then the solution is to have a dropdown select/option and a button. Once the button is clicked, we find the pane to be deleted from dropdown and then delete it as follows:
$('#remove').click(function() {
if($("#selectStudy").val()!=0) {
var studyToDelete=chartX.get($("#selectStudy option:selected").text());
while(studyToDelete!=null) {
studyToDelete.remove();
$("#selectStudy option:selected").remove()
studyToDelete=chartX.get($("#selectStudy option:selected").text());
}
}
});
where id of button is remove, id of selection dropdown list is selectStudy. So we find all the series attached to the pane having same id as that of yAxis ad delete them.
You can use Axis.remove() function to remove axis.
http://api.highcharts.com/highcharts#Axis.remove()
Related
I am getting image from highchart server to add into my pdf. But when I eport an column chart the column bars are coming at below the x-axis and not on the axis itself. Below is demo url
https://jsfiddle.net/ztcv2rhj/6/
Highcharts.chart('column-container-print',{
chart: {
animation: false,
type: "column",
marginLeft: 80
},
credits:false,
title:{
text: "Top 5 Questions"
},
subtitle: false,
yAxis: {
allowDecimals: false,
min: 0,
} ,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: ["Are the characters clear and readable? Keyboards should be kept clean. If characters still can't be read, the keyboard may need modifying or replacing. Use a keyboard with a matt finish to reduce glare and/or reflection.","Does the keyboard tilt? Note, the tilt need not be built in.","Does the user have good keyboard technique?","Is it possible to find a comfortable keying position? Try pushing the display screen further back to create more room for the keyboard, hands and wrists. Users of thick raised keyboards may need a wrist rest.","Is the keyboard separate from the screen?"],
labels: {
rotation: -45
},
},
series: [{"name":"No","data":[1,1,1,1,1]}]
});
This issue occurs because you are providing chart.options as options to export. Instead, you should provide chart.userOptions.
Code:
var optionsStr = JSON.stringify(chart.userOptions);
var dataString = encodeURI('async=true&type=jpeg&scale=4&options=' + optionsStr);
Demo:
https://jsfiddle.net/BlackLabel/6mw03r7c/
I have an application where user can select a region by clicking. Then the map rewrites itself and zoomsTo() to the selected area. So far everything else works, but I haven't get any idea how to color the selected area programmatically. The area (or different statistics) may also be selected from a drop-down list, so I have to redraw the map in any case.
var mapChart=$('#mapcontainer').highcharts();
mapChart.get(jQuery( "#selected-region" ).val()).zoomTo();
mapChart.mapZoom(5);
I have tried things along the line:
mapChart.get(jQuery( "#selected-region" ).val()).color="rgb(255,0,0)";
but so far no breakthrough :/
Any ideas?
hank
Using jquery to select point is not the best solution. Highcharts provides point events like click where you have an access to clicked point instance, or you can select a point using the chart.get() method by point id.
To change the selected area color you have to define color property when a point (area) is selected:
series: [{
states: {
select: {
color: '#a4edba'
}
}
}]
Now you have to invoke select() method on the clicked or selected point, as well as you invoked zoomTo() method:
series: [{
point: {
events: {
click: function() {
var point = this;
point.zoomTo();
point.select();
}
}
},
states: {
select: {
color: '#a4edba'
}
}
}]
});
Demo:
https://jsfiddle.net/wchmiel/yzco1023/
i have a chart used grouped categories highcharts, i have succesfull make a charts but i got a bit problem.
example charts:Fiddle here
it is possible to remove space / or change space between column which have same parent, so it will be near each other ?
in that example :
apple, banana, orange = group as fruit
carrot, potato, tomato = group as vegetable
cod, salmon, tuna = group as fish
i wanted :
between apple, banana, orange the column is near
and between orange - carrot is still have space.
i have tried to change on style but i still can't figure it out.
thanks
You can use these options under plotOptions inside and verticalAlign to show lables at the bottom.
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'bottom',
formatter: function() {
return this.point.name;
}
},
}
},
I had to change the structure of the series to make it easy to display:
series: [{name:'Fruits',
data: [{y:4, name:'Apple'}, {y:14, name:'Banana'},{y:18, name:'Orange'}]
}, {name:'Vegetable',
data: [{y:5, name:'Carrot'}, {y:6, name:'Potato'}, {y:5, name:'Tomato'}]
}, {name:'Fish',
data: [{y:14, name:'Cod'}, {y:15, name:'Salmon'} ,{y:18, name:'Tuna'}]
}]
});
example jsfiddle
i have figure it out too with diffrent style [jsfiddle][1]
[1]: http://jsfiddle.net/rikad/gptrz8Lh/
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I want to disable the use of navigator in highcharts but still show it as "full" small chart.
Is it possible?
Yes, you can hide them in callback: http://jsfiddle.net/nX37D/
But user still will have possibility to change extremes by using handles (even if they are invisible). To change that behavior, you will need to edit sources.
$('#container').highcharts('StockChart', options, function (chart) {
var handles = chart.scroller.handles;
setTimeout(function () {
handles[0].hide();
handles[1].hide();
}, 1);
});
Another way to hide them within the API is:
navigator: {
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
}
},
Fiddle here.