I tried to create the dynamic height in high chart's drill down. Depends on data. Then chart type is bar chart.
For example
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
], $("#container").css({'height':'500px'}) // here i want to change
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
], $("#container").css({'height':'300px'}) // here i want to change
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
], $("#container").css({'height':'400px'}) // here i want to change
}]
}
It is possible to add the jQuery into series section. I mentioned above. Or else any possible way for to do it?
You can catch drilldown event and then call setSize function.
chart: {
type: 'bar',
events: {drilldown:function(a){ this.setSize(300, a.seriesOptions.data.length*100) }}
}
drilldown function is trigger as an when user is click on individual bar and argument "a" is holding the series data of that particular bar which user has click, and I've calculate the length of that data with "a.seriesOptions.data.length*100" and 100 is 100px, so if length is 2 then 2*100px = 200px.
Related
I'm using linkedTo option to link multiple additional graphs (let's call them childs) to one main graph in order to get one group of graphs.
My issue is about hover highlighting. When I hover main graph all childs are highlighted as well as main graph itself. But when I hover any child graph only this one and main are highlighted, and other childs become blurred, that is not what I want.
Highcharts.chart('container', {
series: [{
id: 'main',
color: 'black',
name: 'Main',
type: 'line',
data: [[1, 3], [1.5, 2.5], [2, 2], [2.5, 1.5], [3, 1]]
}, {
linkedTo: 'main',
color: 'black',
name: 'Child 1',
type: 'line',
data: [[2, 3], [3, 2], [4, 1]]
}, {
linkedTo: 'main',
color: 'black',
name: 'Child 2',
type: 'line',
data: [[3, 3], [4, 2], [5, 1]]
}, {
linkedTo: 'main',
color: 'black',
name: 'Child 3',
type: 'line',
data: [[4, 3], [5, 2], [6, 1]]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"/>
Is there any workaround for this case?
That issue is reported here: https://github.com/highcharts/highcharts/issues/11810 and marked as an enhancement. Currently, as a workaround you can link sibling series in afterLinkSeries event:
(function(H) {
H.addEvent(H.Chart, 'afterLinkSeries', function(e) {
this.series.forEach(function(s) {
if (s.linkedParent) {
s.linkedParent.linkedSeries.forEach(function(linkedS) {
if (linkedS !== s) {
s.linkedSeries.push(linkedS);
}
});
}
});
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4972/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
EDIT:
Due to the problem with legend item click, a better solution is to overwrite Pointer.prototype.applyInactiveState method.
Highcharts.Pointer.prototype.applyInactiveState = function(points) {
var activeSeries = [],
series;
// Get all active series from the hovered points
(points || []).forEach(function(item) {
series = item.series;
// Include itself
activeSeries.push(series);
// Include parent series
if (series.linkedParent) {
activeSeries.push(series.linkedParent);
// CHANGE
series.linkedParent.linkedSeries.forEach(function(linkedS) {
activeSeries.push(linkedS);
});
// END CHANGE
}
// Include all child series
if (series.linkedSeries) {
activeSeries = activeSeries.concat(series.linkedSeries);
}
// Include navigator series
if (series.navigatorSeries) {
activeSeries.push(series.navigatorSeries);
}
});
// Now loop over all series, filtering out active series
this.chart.series.forEach(function(inactiveSeries) {
if (activeSeries.indexOf(inactiveSeries) === -1) {
// Inactive series
inactiveSeries.setState('inactive', true);
} else if (inactiveSeries.options.inactiveOtherPoints) {
// Active series, but other points should be inactivated
inactiveSeries.setAllPointsToState('inactive');
}
});
};
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4974/
I have a chart in which hovering shows all the elements represented by bars, but they are too many and this produces problems such as the appearance of a scrollbar.
I would like to know if there is a way to show only the current bar that is hovering. In the c3.js documentation I see that this property exists to change the content of the tooltip, but I don't know how to get the current bar to which it is hovering.
With this:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
console.log(d, defaultTitleFormat, defaultValueFormat, color);
return "fds";
}
this is my live code:
var query = [
["x", "Usuarios"],
["Berta Arroyave", 53],
["Rogelio Zuluaga", 52],
["Manrique Perez", 42],
["Justin Vargas", 33],
["Believer qw", 28],
["María Jimenez", 14],
["Nairo Quintan", 12],
["Adriana Cardona", 11],
["Departamento Idio", 9],
["Natalia Benjumea", 7],
["Bibliotecatos", 7],
["Jose Herrera", 7],
["Doralibia", 6],
["Secretaría General ", 6],
["Natalia Ochoa", 6],
["Viviana Cano", 5],
["Erika Valencia", 5],
["Sandra Cañon", 3],
["Lina Constanza Suaza", 3],
["Recepción User", 2],
["Facultad Medicina ", 2],
["Sandra Valencia", 2],
["Luz Sepulveda", 2],
["Heidy Zapata", 2],
["Gabriela García", 2],
["Auxiliar Administrativo", 2],
["Adriana Mejia", 2],
["Administrador", 1],
["Nathaly", 1]
]
c3.generate({
data: {
x: 'x',
columns: query,
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
how can I do it?
https://jsfiddle.net/50uej3at/
I think your problem here is that your data is in the wrong format to what you appear to be aiming for... rather than having one entry per category you've got one category with everything as an entry within it...
If you put this line after your query data definition:
query = d3.transpose(query);
You should get one bar per person and no massive tooltips
https://jsfiddle.net/yta1s9cz/1/
(I also adjusted the axis label rotation to make the labels readable)
I have a line graph which can drop down in a straight line. e.g. I have a point at (1, 100) then a point at (1,0). However, highcharts (https://www.highcharts.com/) will only display information for one of the points. Is it possible to get it to show information on both points when I hover over each of them?
The default for line type series is findNearestPoint: 'x' https://api.highcharts.com/highcharts/plotOptions.line.findNearestPointBy .
If you change that to findNearestPoint: 'xy', you'll get the behavior you want.
Highcharts.chart('container', {
series: [{
findNearestPointBy:'xy',
data: [
[0, 29.9],
[1, 50],
[1, 71.5],
[3, 106.4]
]
}]
});
http://jsfiddle.net/vt1cep0L/2/
i'm new to highcharts.
I already browse in highcharts example. but, every time I look for the sample, it came with the column bar chart like this :
All I want is like this :
But I dont know how. Maybe you can help me figured it out.
Thank you.
You can simply set x/y pairs for each of points. Then set column.grouping to false: http://jsfiddle.net/27u9zuhj/
plotOptions: {
column: {
grouping: false
}
},
series: [{
name: 'John',
data: [ [0, 5], [1, 3], [2, 4]]
}, {
name: 'Jane',
data: [ [3, 2], [4, 2]]
}]
I'm using HighChart.
I want to fill color to part of area for areaspline chart (or any type chart).
Like in this image:
How can I do that?
You need to use two series, first spline and second with area.
series: [{
data: [3, 4, 3]
}, {
type: 'areaspline',
data: [null,null,3, 4, 3, 3, 5, 4]
}]
http://jsfiddle.net/7wSuT/