I have a boxplot chart made with highcharts, and I have 2 series, one for the observations and one for the outliers. I want to hide one column in both of the series, but going through the API there doesn't seem to be a way to hide a data row, you can only remove one. Is there a way to do it with the API rather than having to hack my way around it?
Edit: Some examples on the structure:
series: [{
name: 'Observations',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]},
{
name: 'Outliers',
type: 'scatter',
data: [
[0, 2],
[1, 5]
]
}
]
This structure has 2 series, with the first series having the boxes of the boxplot, and the second having the outliers. In other graphs, like the column graph, you can add each column as a series, which gives me more options to manipulate them, but here I have each column as a data array object. In Highcharts you can hide series by triggering the hide() function on the series, but you can't hide data objects, you can only remove them. What I want to do is hide a single data array object from rendering in the view.
As a workaround I can technically remove the object I want from data array and save it somewhere else, until I need it, but what I'm wondering is whether there's a better way of doing that, maybe using plotPoints or any other way.
Here's also a demo from the highcharts website. The data here are an array, but anything in the data API above still work on them. Here's the series api for comparison.
You can borrow setVisible method from pointClass in pie series prototype:
var pieSetVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible,
point1 = chart.series[0].points[0],
point2 = chart.series[1].points[0];
pieSetVisible.call(point1);
pieSetVisible.call(point2);
Live demo: http://jsfiddle.net/BlackLabel/ahckoLn5/
I found a solution. There are apparently 2 alternative ways to setup a Boxplot chart using series (which you can hide and show using the legend or the hide() and show() methods):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}, {
type: 'scatter',
data: [[0, 1], [0,2]] // outlier points
}]},
{
name: 'Series 2',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
// no outliers here
}
]
Basically you can put Observations and Outliers in one series/column, by giving the outliers type: 'scatter' as shown above. The problem with this method is that you still can't hide the outliers for some reason by calling the hide() and show() methods.
The alternative way of doing this is putting each column observations and each outlier observations in a separate series, and giving both the same x value (the outliers should have the x of the box, in this example it's 0):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}]},
{
type: 'scatter',
name: 'Series 2: Outliers',
data: [[0, 1], [0,2]]
}
{
name: 'Series 3',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
}
]
To stack the observations and outliers over each other you have to disable grouping in the options:
plotOptions: {
series: {
grouping: false,
}
},
Related
how can I do something with my columns value in highcharts? I have two values: "total" and "current". Total is always bigger becouse it contains current value. I write some example in js Fiddle:
link to example
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
I want to dislplay chart where total value is a maxiumm value of column and current column as a part of total column. In my example in first column of "John Total" should be 8 and have part of "John Current" which is 3. In my code example values is summed and finish value is 11. How can I fix that and got columns like in picture?
This series have maxium values:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
And this series have results as a part of total. How many points John get from Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
So first column should have max value 8 and include 3 like in picture. Blue column on picture should have 8 becouse we have this in first array and black column should to have 3. How can I acheive this when I have got Maxium value and part of this value In one column?
As per your comment
How can I acheive this when I have got Maxium value and part of this value In one column?
In this case you cannot use
stacking: 'normal'
You have to use overlapping column charts
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
And series with
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
here x value represents the position of the column(if you don't define x in series, column will overlap each other)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Update as per OP
I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array
For this you can use array map function to update array of object
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Updated fiddle demo
This input would work well with highcharts:
data1 = [[2, 3, 3.5, 4], [1, 1.5, 2, 3]]
But this won't:
data2 = [[2, 3, 3.5, 4, 4.5], [1, 1.5, 2, 3]]
Here the only difference is that in the first item, there is one more data point. Why would highchart fail to make a boxplot from it? I think all it needs to generate a boxplots like median, quartiles and minimum and maximum are all there in the second dataset too.
This is my code:
dt = [
[760, 801, 848, 895, 930],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
];
Highcharts.chart('boxcontainer', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts box plot styling'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
}
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'dot',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Observations',
data: dt
}]
});
How can I solve this problem?
Highcharts accepts input data in two formats
Array of numbers
array of objects
Especially when it comes to graphs like boxplot which need multiple values to plot a single point on the graph these approaches will help you achieve what we need.
Here are the 2 ways of doing for Boxplot.
1. An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
An array of objects with named values.
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"},{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"}]
So in the first approach when an extra value appears in the array is distorted and hence is your graph.
When ever you would like to have extra values in the data that are not needed for plotting but are important, you can go with the second approach.
Here are the links for your ref:
API : https://api.highcharts.com/highcharts/series.boxplot.data
Exaample: http://jsfiddle.net/fzwu1ods/
I have an array of the following objects:
Now my goal is to create column chart that would look something like this:
And then the next object in my array.
I have been looking through the documentation and all I was able to find was something like this:
Highcharts demo
The problem is the data value that you set in the series. if you insert an array it will be split across all categories. As far as I can see you cannot lock one data series to one category.
What can I try next?
My attempt:
I'm attempting within this fiddle:
Highcharts.chart('container', {
xAxis: {
minPadding: 0.05,
maxPadding: 0.05,
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
series: [{
type: 'column',
name: 'Apples',
zoneAxis: 'x',
data: [
['First', 29.9],
['Second', 71.5],
['Third', 106.4]
]
},{
type: 'column',
name: 'oranges',
data:[
['A', 20]
]
}]
});
Fiddle
There are probably many ways to approach this, and the best option depends on how specific your needs are.
The first way that comes to mind, is to just manipulate how you structure your data and your categories.
Example:
xAxis: {
categories: ['Group 1', 'Group 2', 'Group 3'],
labels: { style: { fontWeight: 'bold' } }
},
series: [{
name: 'Subset A',
data: [{y: 10, name: '1A'}, {y: 5, name: '2A'}, {y: 7, name: '3A'}]
}, {
name: 'Subset B',
data: [{y: 5, name: '1B'}, {y: 3, name: '2B'}, {y: 4, name: '3B'}]
}]
So, assuming three groups, each with two points. You want the first category to show point A and B from Group 1, the second category to show point A and B from Group 2, etc.
Fiddle:
http://jsfiddle.net/jlbriggs/hLfajxz9/
Output:
The main potential downside to this is that the legend will show/hide points A or B, and not Group 1, 2, or 3.
You can work around this by adding a function to show/hide categories, if that's an issue.
Check out the answer on this question here:
How to show/hide categories with checkbox using highcharts?
And the related fiddle here:
http://jsfiddle.net/jlbriggs/wqwawuLq/
I am trying to use highcharts.js' drilldown with nested series. To keep things simple, I am using the official demo provided by highcharts.js:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/multi-series/
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
I would like to modify this example to also compare election years in the drilldown. The official demo's drilldown only shows a single election year for each region (north, south, etc). I would like to have the same blue/black columns (election year) in the drilldown graphs.
My attempts of nesting series in drilldowns are found here:
http://jsfiddle.net/draptik/bnvbsLd1/1/
drilldown: {
series: [{
id: 'republican-2010',
data: [{
series: [{
name: 'republican',
data: [{
name: 'north',
y: 3
}, {
name: 'west',
y: 3
}, {
name: 'east',
y: 3
}, {
name: 'south',
y: 3
}]
}, {
name: 'democrat',
Basically I just tried to nest a series in the drilldown's series data array, but this does not work.
Thankful for any pointer.
I think you should remove series property inside drilldown's data.
It'll be like this:
drilldown: {
series: [
{
id: 'republican-2010',
data: [{
name: 'republican',
y: 10,
drilldown: 'repbulican'
}]
}, // end of first series
{
id: 'repbulican',
data: [
['north' , 3],
['west' , 3],
['east', 3],
['south', 3]
]
}
] // end of series array
} // end of drilldown object
I already made an example for 'republican-2010' series only to show you how to do it.
Just do the same for other series.
I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:
John series: Blue dashed line
Mary series: Solid Red Line
Does anyone know how to accomplish this?
Options can be set separately for each series.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'John',
color: '#0066FF',
dashStyle: 'ShortDash',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
},{
name: 'Mary',
color: '#FF0000',
data: [
[Date.UTC(2010, 0, 1), 60.9],
[Date.UTC(2010, 1, 1), 40.5],
[Date.UTC(2010, 2, 1), 90.0],
[Date.UTC(2010, 3, 1), 80.4]
]
}]
});
JsFiddle Example
If you read the api here, you'll see the following text.
Serie
The actual series to append to the chart. In addition to the members listed below, any member of the plotOptions for that specific type of plot can be added to a series individually. For example, even though a general lineWidth is specified in plotOptions.series, an individual lineWidth can be specified for each series.
So you can add anything from plotOptions.
Demo:
series: [{
name: 'serie1',
data: [0,1,2,3,4,5,6,7,8,9],
color: '#FFFF00',
lineWidth: 4,
id: 'serie1',
step: true
}]
Working demo