I have a 6 column chart with its 6 respective regressions.
Show all together is a little messy, and I want to hide all the regressions bu default.
I tried to use a chart.events and some other stuff, but it doen't works for me.
Image of Final state
This is my series configuration:
series: [{
type: 'column',
name: '#Html.Raw(grafic.serie1.Title)',
regression: true,
regressionSettings: {
label: '#Html.Raw(grafic.serie1.linearTitle)',
type: 'linear',
legendIndex: 1,
stack: 0,
},
data: camp1Dades,
legendIndex: 0,
stack: 0
},{
type: 'column',
name: '#Html.Raw(grafic.serie2.Title)',
regression: true,
regressionSettings: {
label: '#Html.Raw(grafic.serie2.linearTitle)',
type: 'linear',
legendIndex: 2,
stack: 0,
},
data: camp2Dades,
legendIndex: 0,
stack: 0
},...]
Thanks in advance
I finally use
chart: {
events: {
load: function (event) {
$(".highcharts-legend-item").each(function (n, item) {
if ($(this).find("tspan").html().includes(<filter-text>)) {
$(this).click()
}
});
},
}
},
Is no clean, but it works.
Related
I have four stack in a Stacked Column chart: "One Completed", "One Pending", "Two Completed", "Two Pending".
By default, I have four legends for these stacks.
What I want is to have two legends: "One" and "Two". Is it possible using Highcharts?
Edit:
Added code. Some of text/logic are removed. Most of the styling is what I found on Internet somewhere.
Highcharts.chart('', {
chart: {
type: 'column',
},
title: {
text: '',
},
xAxis: {
categories: c,
labels: {
y: 40
}
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
crop: false,
overflow: 'none',
y: 20,
formatter: function () {
return this.stack
},
style: {
fontSize: '9px',
color: (
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
//custom logic
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
},
series: {
cursor: 'pointer',
events: {
click: function (event) {
//custom click to filter logic
}
}
}
},
series: [{
name: 'One Pending',
data: one_series_pending,
color: '#7cb5ec',
stack: 'Pending'
}, {
name: 'One Completed',
data: one_series_completed,
color: '#7cb5ec',
stack: 'Completed'
}, {
name: 'Two Pending',
data: two_series_pending,
color: '#434348',
stack: 'Pending'
}, {
name: 'Two Completed',
data: two_series_completed,
color: '#434348',
stack: 'Completed'
}]
});
Sample chart:
I want single legend for same color(two stacks)
You can link one series with another and have one legend item for them by using linkedTo property.
series: [{
name: 'One Pending',
data: [9, 5],
color: '#7cb5ec',
stack: 'Pending'
}, {
name: 'One Completed',
data: [6, 2],
color: '#7cb5ec',
stack: 'Completed',
linkedTo: 0
}, {
name: 'Two Pending',
data: [35, 5],
color: '#434348',
stack: 'Pending'
}, {
name: 'Two Completed',
data: [3, 0],
color: '#434348',
stack: 'Completed',
linkedTo: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/eh5m10q9/
API Reference: https://api.highcharts.com/highcharts/series.column.linkedTo
I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this.
My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.
chart of the tree difficulties
Histogram of one difficulty
https://jsfiddle.net/vlovlo/sng4jwv8/36/
Here is my code
Highcharts.chart('skippedPatients', {
chart: {
events: {
drilldown: function (e) {
this.update({
title: {text: "Skipped patient: " + e.point.name},
xAxis:{
title:{text: "Nr of skipped patients"},
tickmarkPlacement: 'on',
},
yAxis:{title:{text: "Nr of players"}},
plotOptions:{series:{pointPlacement: 'on'}},
});
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Histogram: Easy': {
name: 'Easy',
type: 'histogram',
baseSeries: 'avgSkippedEasy'
},
'Easy': {
id: 'avgSkippedEasy',
visible: false,
type: 'column',
data: skippedPatientsList
}
},
series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Skipped patients'
},
xAxis: {
type: 'category',
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Averages per difficulty',
colorByPoint: true,
type: 'column',
data: [{
name: 'Easy',
y: 5,
drilldown: true
}, {
name: 'Moderate',
y: 2,
drilldown: true
}, {
name: 'Hard',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options.
Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/
I'm trying to implement a chart with different series but each series will have a value for different categories independently.
What I want to have:
What I have today:
With the following code:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'a',
data: [267]
},{
name: 't',
data: [0, 21, 400]
},{
name: 'l',
data: [0, 0, 0, 600, 242]
},{
name: 'p',
data: [0, 0, 0, 0, 0, 1000]
}],
});
});
There is free space between bars because series has 0 as values for some category.
I just want to have a "nice" chart with all columns one by one.
Maybe, it's a different way to configure series and categories...
Disable grouping:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/x6758dcq/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping
I looked around a bit but can't seem to find the exact answer for this.
I'm currently adding some data to highcharts. Essentially, I am using the HighStock column and candlestick chart, and it should suffice for my testing.
The issue is this. I've set up ONE of the two series' to have IDs. I would now like to retrieve an individual point object by calling [something].get("point_0"), which seems like it should be possible but doesn't seem to work. Here is the fiddle for it:
http://jsfiddle.net/mr3ezgh9/
and here is the code:
var chart = null;
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push(
{
name: data[i][0],
x: data[i][0], // the date
y: data[i][5], // the volume
color: "red",
id: "point_" + i
}
);
}
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
turboThreshold: Number.MAX_VALUE,
dataGrouping: {
units: groupingUnits
}
}]
});
alert(Highcharts.charts[0].get("point_0"));
});
});
I have tried a few variations on .get("point_0") like getting a series first (but the series doesn't have a get function), setting the chart to a variable and then getting it, and other similar changes, but nothing quite seems to work. Any insight on this?
The general problem is that in the highstock you have enabled datagrouping, so points are groupped and ids are skipped. Disable it and option will work.
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
Example: http://jsfiddle.net/mr3ezgh9/1/
I have a chart that looks like this:
http://jsfiddle.net/rtGFm/37/
I would like to have a "sort" button that sorts high to low each category, putting the columns in a different order for each category. Is this possible with HighCharts?
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'foreclosures',
'nuisances',
'distance from city center'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Alger Heights',
data: [49.9, 71.5, 50]
}, {
name: 'Shawmut Hills',
data: [83.6, 78.8, 67]
}, {
name: 'Baxter',
data: [48.9, 38.8, 100]
}, {
name: 'Midtown',
data: [42.4, 33.2, 80]
}, {
type: 'scatter',
data: [55,60,70],
marker: {
symbol: 'square',
lineColor: '#FFFFFF',
lineWidth: 1,
radius: 8
},
name: 'Average'
}]
});
});
I had the same problem :) highcharts still does not provide any solution for this problem, but it is flexibel enough so that you can sort anyway - just by javascript.
Put your data in a separate value:
var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]
In series you can just add a function which sorts your data:
series: (function(){
for(var i = 0;i<dataMain.length;i++){
dataMain[i].data = dataMain[i].data.sort(function(a,b){
return a[0] - b[0] ;
})
return dataMain;
}
Hope I got everything wright.
Got it to work, I believe. Trick is to add each column in correct order as a new serie with same type (column), reuse colors and hide legend...
Very hackish, the JS code to sort like 8 categories independently will be ugly but the result looks fine.
Edit: Updated fiddle, I see the spacing between the categories grows with series, doesn't look supernice.
My jsfiddle is here
$(function () {
$('#container').highcharts({
chart: {
inverted: true
},
title: {
text: 'Series sorted in within categories'
},
xAxis: {
categories: ['January']
},
series: [{
type: 'column',
name: 'Stockholm',
data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: 'Stockholm',
data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
br,
Jens
I think this can be done,
this may look like a little work around.
since we have a limited number of columns i mean 4 in the given example.
if we have arrays with sorting done with respect to each series then we can handle them.
on button click we can update the chart with new set of data as well as category array.
May be there is no solution from the APi.
According to me this is a possible approach.
Thanks,