I want to create a Spider Graph with Each axis having a different scale.
Example :
First axis Min : 0 and Max : 1
Second axis Min : 0 and Max : 100
Third axis Min : 0 and Max : 1
Fourth axis Min : 0 and Max : 5
Is it possible ?
Set the min and the max for each yAxis and assign the correct axis to each series:
yAxis: [{
min: 0,
max : 1,
angle: 0
}, {
min: 0,
max: 100,
angle: 90
},{
min: 0,
max: 5,
angle: 180
}],
series: [{
data: [.8, .7, .6, .5, .4, .3, .2, .1],
yAxis: 0
}, {
data: [11,22, 33, 44, 55, 66, 77, 88],
yAxis: 1
}, {
data: [1, 4, 2, .7, 3, .6, 4, .5],
yAxis: 2
}]
});
http://jsfiddle.net/z8kawx9m/1/
Related
I am using advanced accessible high charts and I need to be able to increase and decrease the height of gridlines based on the data points for a particular series. If the data points for a particular series is less than 10 I want the height of the gridline to be 30 px else if the data points is between 10 and 15 I want the height to be 50px if the data points are more than 20 i will need the gridline height to be 100px
The only solution that came to my mind is to attach each series into an independent axis which allows setting each axis height (in percentage or pixel value).
xAxis: [{
height: '30%',
}, {
height: '60%',
top: '30%',
offset: 0
}, {
top: '80%',
height: '10%',
offset: 0
}],
series: [{
data: [2, 3, 4],
xAxis: 0
}, {
data: [10, 12],
xAxis: 1
}, {
data: [10, 12],
xAxis: 2
}]
Demo: https://jsfiddle.net/BlackLabel/8pu13s7d/
API: https://api.highcharts.com/highcharts/yAxis.height
API: https://api.highcharts.com/highcharts/yAxis.top
Can we fill colors like this in boxplot chart of Highcharts?
Please refer the image below:
You can calculate point color based on some algorithm, for example:
chart: {
type: 'boxplot',
events: {
load: function(){
var points = this.series[0].points,
color,
length = points.length;
Highcharts.each(points, function(point, i){
color = 'rgb(255,' + Math.floor(i * 255 / length) + ', 0)'
point.update({ fillColor: color }, false)
});
this.redraw();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5k8wfrgc/
Yes, its possible to control the fillColor for a boxplot.
This is a demonstration to show you:
http://jsfiddle.net/mqunbjrs/
If you take a look at the highcharts API you will see that instead of using an array with the 6 plot values, you can use an object with named values: https://api.highcharts.com/highcharts/series.boxplot.data
instead of this:
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
You would use this:
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
fillColor: "#00FF00"
}, {
x: 2,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
fillColor: "#FF00FF"
}]
I have this chart
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
plotOptions: {
series: {
gapSize: 5 * 24 * 3600 * 1000,
gapUnit: 'relative'
}
},
rangeSelector: {
selected: 5
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json', function (data) {
if (i==0) {
var first = [], last = [];
first.push.apply(first, data.slice(0,1)[0]);
last.push.apply(first, data.slice(0,1)[0]);
first[0] = first[0] - 1900 * 24 * 3600 * 1000;
last[0] = last[0] - 130 * 24 * 3600 * 1000;
data = [];
data.push(first);
data.push(last);
}
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
and as you can see there are three stocks shown. If you hover the chart with the mouse and go to the beginning you'll notice MSFT stock which has only 2 points and that's intentional. After MSFT there should be about 6 year gap, however on the chart it's shown in a few pixels.
How can I configure stockChart to show real gaps? In other words, I want to see the gap of 6 years so from 2005 till 2011 there will be empty space proportional to the whole chart?
The discussion in the comment section of the first answer reveals that OP wants to hide no-data periods only in some cases.
The solution here might be to set ordinal to false (as #ewolden) suggested and use breaks instead:
xAxis: {
breaks: [{
breakSize: 24 * 3600 * 1000,
from: Date.UTC(2017, 0, 6),
to: Date.UTC(2017, 0, 9)
}],
ordinal: false
},
series: [{
data: [
[Date.UTC(2017, 0, 2), 6],
[Date.UTC(2017, 0, 3), 7],
[Date.UTC(2017, 0, 4), 3],
[Date.UTC(2017, 0, 5), 4],
[Date.UTC(2017, 0, 6), 1],
[Date.UTC(2017, 0, 9), 8],
[Date.UTC(2017, 0, 10), 9],
[Date.UTC(2017, 6, 1), 4],
[Date.UTC(2017, 6, 2), 5]
]
Example: http://jsfiddle.net/BlackLabel/ocg0dujg/
In the above demo I was able to hide the weekend (7 and 8 Jan) and maintain the space between January and July.
API reference: https://api.highcharts.com/highstock/xAxis.breaks
What you are after is ordinal.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Setting ordinal to false, like this, will give you the gap you are after:
xAxis: {
type: 'datetime',
ordinal: false,
},
There are some other issues with your code, if you look in console, you are getting error 15 which states that highcharts requires data to be sorted. You get this because of how you add the series data to your MSFT series. You add both the x and the y to a single 1D array, which means highcharts tries to plot both your x and y values on the x axis.
I did a workaround that gives it the right format in this fiddle: http://jsfiddle.net/2cps91ka/91/
defs: {
patterns: [{
'id': 'budget-pattern',
'path': {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
stroke: 'rgba(255, 0, 0, 0.1)',
strokeWidth: 3
}
}]
},
Here the stroke is hardcoded with 'rgba(255, 0, 0, 0.1)' but I want to have different stroke for every column in highchart.
thank you
You can set series's colorByPoint to true.
plotOptions: {
series: {
colorByPoint: true
}
},
Reference: http://api.highcharts.com/highcharts/plotOptions.column.colorByPoint
OR Refer Highcharts Fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-colorbypoint-true/
I would like to put x-axis starting value as 2.0 and end value to 19.0 with tick-interval as 0.60. When i give difference as 0.60 its starts from 1.8 and ends at 19.2 even if i give minimum and maximum value. Please help me to sort out this!
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
startOnTick: true,
min:2.0,
step: 2,
max: 19.0,
startOnTick: true,
endOnTick: true,
tickInterval: 0.60
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16,17,18,19]
}]
});
});
http://jsfiddle.net/aparnaunny/6mHfw/1/
^ This is what i tried.
Thanks,
Aparna Unny
The problem is that you want a range of size 17 (19 - 2) with a tickInterval of 0.6. 17 doesn't devide equally by 0.6, so the chart has to adjust the min/max.
Also, 2 isn't a multiple of 0.6, so startOnTick must be false if you want to start at 2.
Either pick a different ticker interval (e.g. 0.5) or chose a min/max range which devides eqully by 0.6 e.g. 2 / 19.2
xAxis: {
min:2.0,
step: 2,
max: 19.0,
startOnTick: true,
endOnTick: true,
tickInterval: 0.50
},
or
xAxis: {
step:2,
min:2.0,
max: 19.4,
startOnTick: false,
endOnTick: false,
tickInterval: 0.60
},