say we are using this example: http://www.highcharts.com/demo/column-drilldown, and that one chooses firstly chrome, and he is redirected to the next level. Then if he clicks on v17.0, if there was another level, we would be sent to the third level. But how one could implement this feature: when we click on version for example 17.0, we get a table with its child values, but without affecting at all the current 2nd level graph. So we have the graph with the versions, and whenever we click on each column, we get a table under the graph with the next level values.
For that drilldown series add click events for points:
drilldown: {
series: [{
data: [1, 2, 3, 4, 5, 6, 7], // some data e.g. Chrome
point: {
events: {
click: function() {
// show your table after click on one of column
}
}
}
}]
}
Related
I have a sparkline chart of temperature sensor data,
Its a year of data sampled at every 1 min
I first load a blank chart, then I do a server call, bring the results back and display it by calling
getchart.addSeries({
name: thisGroup,
id: probeItem[0],
data: probeDataArray,
keys: ['x', 'y', 'specialId'],
there could be upto 20 series, and they all load on the screen one by one
This renders quite quickly, however I now need to add a label annotation where the temperature goes over a certain Value (i.e. in add a warning symbol when its alarm state)
Currently I'm looping through each point and seeing if its over a certain value:
currentSeries.points.forEach(function (point) {
However this is very slow.
I have an array of the alarms, and can reference them as
['x', 'y', 'specialId']
However I cannot see how I can add an annotation label by x,y or specialId.
I can only seem to add the label if i loop through all the points already rendered
Is there a way to add a label by using my Id's?
I also need to resize the graph and the labels to remain in the same place
Alternatively if this is not possible, is there anyway to add the labels as i'm adding the series?:
getchart.addSeries({
name: thisGroup,
id: CurrentGroupID,
dashStyle: 'ShortDot',
data: groupLogArray,
keys: ['x', 'y', 'specialId'],
showInNavigator: true, //this shows the series data in the small bottom navigator
point: {
events: {
click: function () {
//alert("test click");
}
}
}
});
You can add an annotation by x and y axis values:
chart.addAnnotation({
labels: [{
text: 'Alarm',
point: {
x: 2,
y: 3,
xAxis: 0,
yAxis: 0
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/k6trha3e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation
As an alternative, you can also use data labels: http://jsfiddle.net/BlackLabel/n4586xzq/
I have a line chart that plots multiple datasets where each dataset has two lines associated with it: a reference line and a measured line.
To plot all of these lines, I added individual series for each subset of data, giving the reference line a dashed appearance and the measured line a solid appearance.
The tooltip formatter displays a popover of detail data for a specific point based on the cursor position. It only displays data for one series.
How might I group the series together in such a way that I can display a tooltip for multiple series, but not necessarily all of the series?
Highcharts seems to have an option for shared that displays a tooltip for all of the series that correspond to the cursor's X coordinate, but is there a way to do some sort of grouping? Is there something I can do to the series configuration so that each series renders two lines on the chart but with different appearances?
Not sure if what I'm trying to do is possible with Highcharts. Might need to be a custom chart.
There is no such default functionality in Highcharts, but for now I see two possible workarounds:
slight change in x value:
series: [{
data: [1, 1, 1]
}, {
data: [[0.0001, 2], [1.0002, 2], [2.0002, 2]]
}, {
data: [3, 3, 3]
}, {
data: [[0.0001, 4], [1.0002, 4], [2.0002, 4]]
}]
Live demo: http://jsfiddle.net/BlackLabel/v1uxp3jh/
wrap of the refresh method to exclude some of the unwanted points:
(function(H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
points.forEach(function(p, i) {
if (p.series.name === "Series 2") {
points.splice(i, 1);
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/qd4mnx8e/
Docs: https://www.highcharts.com/docs/extending-highcharts
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/
To ease graph readability, I've turned markers off on my highstock spline chart (markers : enabled : false). I also wanted to broke the graph in case of irregular interval between data and so I have successfully set the gapSize to 1. However, this has the bad side of hidding single data that are not linked from one side or an other.
Here's an example (you'll easily see that some of the points are hidden) : http://jsfiddle.net/qosdc6hr
series: [{
marker:{
enabled:false
},
gapSize: 5,
[...]
}]
I want to have these single points drawn on the chart to make them visible at first glance. Is there a way to do it?
You can enable marker for a specific point like this:
data: [
{ x: Date.UTC(1970, 9, 27), y: 0, marker: { enabled: true }},
live example: http://jsfiddle.net/3eco7Lmz/
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()