I want to build up a Highchart step-by-step. I got it working, but I'm not happy with the way it gets animated. The animation origin is the y-axis in this case, but I want the bars to rise up from the x-axis.
They do rise up from the x-axis when I have data visible on load. However, I want to start with an empty chart.
http://jsfiddle.net/ueC9g/1/
This is how I initialize highcharts:
new Highcharts.Chart ({
chart: {
type: 'column',
renderTo: 'columnChart'
},
title: {
text: 'Great chart'
},
xAxis: {
categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
min: 0,
max: 10,
title: {
text: 'Age'
},
showEmpty: true
},
yAxis: {
title: {
text: 'Some numbers'
},
min: 0,
max: 20,
showEmpty: true,
alternateGridColor: '#eee'
},
series: [{
name: 'male',
data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
}, {
name: 'female',
data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
}],
plotOptions: {
column: {
events: {
}
}
},
credits: {
enabled: false
}
});
When showing/hiding series, highcharts animates the change to the axis instead of the series itself. I can't find anyway to change this behavior. As a workaround, instead of showing/hiding the series why not add it as new on the click:
var i = 0;
$('#addBar').click(function(){
try {
if (i == 0) {
columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
}
else if (i == 1) {
columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
}
i++;
} catch(e){
console.dir(e);
}
});
I'd set up an initial empty series in my config too, so that the axes draw on start:
series: [{visible: false, showInLegend: false}],
See updated fiddle here.
Please familair with this example: http://jsfiddle.net/VcJ4K/5/
$.each(chart.series[0].data, function(i, point) {
window.setInterval(function() {
point.update(point.y2);
}, 500);
});
Related
In this jsFiddle when all the series are de-selected except for series 1, it reads '-1'. Is this a bug in high charts or something I am doing wrong? I have tried a couple things, such as messing with the offset, showEmpty, nothing seems to work. Any ideas?
http://jsfiddle.net/mhant47c/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
yAxis: [{
width: '33.33%',
showLastLabel: false,
id: 'yA0'
}, {
left: '33.33%',
width: '33.33%',
offset: 0,
showLastLabel: false,
id: 'yA1'
}, {
left: '66.66%',
width: '33.33%',
offset: 0,
id: 'yA2'
}],
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis:{
showEmpty:false,
categories:['a','b','c','d']
},
series: [{
data: [1, 2, 3, 4]
}, {
data: [3, 2, 1, 6]
},
{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
},{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
}, {
yAxis: 2,
data: [123, 413, 516,23, 43, 56]
}]
});
The chart tries to center the columns which results in adding an additional category. To prevent this, use min option:
xAxis: {
min: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/6p84vx53/
API Reference: https://api.highcharts.com/highcharts/xAxis.min
English is not my native language.If you don't understand my question,please tell me.
I want to show the "beta axis title" and "beta axis label" in highchart. What I want is as follows:
However, what I got is here:
I googled.I didn't find any solution to my problem.
my javascript code is as follows.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 50,
depth: 110
}
},
title: {
text: null
},
xAxis:{
title: {
text: "构建日期"
},
categories: ["2010-10-17","2010-10-18","2010-10-19","2010-10-20","2010-10-21","2010-10-22"],
},
yAxis: {
title: {
text: "内存(MB)"
}
},
plotOptions: {
column: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10
}
},
series: [{
name: 'HUAWEI',
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
name: 'XIAOMI',
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
name: 'oppo',
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});
You need to set the zAxis categories to have the labels, and the zAxis title to have the title. It is important to note that to show the labels, you need to define a min and max. This is a minimal example that will show it all (on top of eachother):
zAxis: {
title: {
text: 'TITLE HERE',
},
min: 0,
max: 2,
categories: ["HUAWEI", "XIAOMI", "oppo"]
}
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/3/
There is a lot of options for tweaking the look of this, you should have a look at the API on zAxis labels/titles.
API on zAxis.titles: https://api.highcharts.com/highcharts/zAxis.title
For example you can rotate and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/5/
Or you can use skew3d and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/6/
It depends a lot on what you want to write as the title and labels. You will just have to experiment.
I recently encountered a weird issue with HighStock.
Firstly here is my code http://jsfiddle.net/woon123/br0e8mkw/
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#analytics_line').highcharts('StockChart', {
credits: {
enabled: false
},
title: {
text: 'Analytics of Deals'
},
subtitle: {
text: 'View Count and Redemption Count'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}],
buttonTheme: {
width: 60
},
},
yAxis: {
floor: 0,
title: {
text: 'Number'
}
},
plotOptions: {
dataLabels: {
visible: true
},
series: {
compare: 'value'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: [{
id: "First Graph",
name: "First Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [20, 23, 23, 23, 23, 23, 23, 23, 23, 23],
}, {
id: "Second Graph",
name: "Second Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [9, 12, 16, 16, 16, 16, 16, 16, 16, 16],
}, ]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker();
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function () {
this.onchange();
this.onblur();
}
});
});
In this case, First Graph is suppose to be above Second Graph according to the data. When you compare the series, First Graph values are always higher then Second Graph.
However, the graph plotted actually cause First Graph to be below Second graph although when you mouse over the lines, it gives the correct values.
Furthermore, First Graph is suppose to start at 20 but as you can see it starts at 0, and the Y-axis values are wrong as well (0-2.5-5)
However, all these errors can be solved by placing 0 at the start of the data.
For the case of First Graph it is [0, 20, 23, 23, 23, 23, 23, 23, 23, 23, 23] and Second Graph it is [0, 9, 12, 16, 16, 16, 16, 16, 16, 16, 16].
Can anyone advice why is this the case and perhaps provide a solution to allow my data to start with a positive integer rather then 0
Take out the compare on the plotOptions, series
series: {
compare: 'value'
}
Fiddle: http://jsfiddle.net/br0e8mkw/2/
From the API: http://api.highcharts.com/highstock#plotOptions.series.compare
Compare the values of the series against the first value in the visible range. The y axis will show percentage or absolute change depending on whether compare is set to "percent" or "value". When this is applied to multiple series, it allows comparing the development of the series against each other. Defaults to undefined.
I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?
I have a few date/value series on a chart, nothing complicated. I would like to have the zooming navigator at the bottom as in here but it doesn't show up on my chart.
$(function () {
$('#container').highcharts({
chart: { type: 'spline' },
title: { text: 'intensity' },
rangeSelector: { selected: 2},
xAxis: { type: 'datetime', },
yAxis: [
{ title: { text: 'Intensity (A)' }, min: 0 },
{ title: { text: 'Nb' }, min: 0, opposite: true },
],
series: [
{ name: 'serie 1', yAxis: 0, visible: false, turboThreshold: 546, marker: {enabled: false}, data: [
[Date.UTC(2013, 09-1, 25, 10, 38, 01, 0), 142.205467],
[Date.UTC(2013, 09-1, 25, 10, 43, 01, 0), 142.886567],
...]
},
{ name: 'serie 2', yAxis: 1, visible: false, turboThreshold: 20, marker: {enabled: false}, data: [
[Date.UTC(2013, 09-1, 23, 13, 58, 25, 0), 0.000000],
[Date.UTC(2013, 09-1, 23, 13, 58, 26, 0), 1.000000],
... ]
},
...
Just in case this might be the problem, I have roughly 40 series in total and 30000 points in total too.
I have tried to have navigator: {enabled: true} and similar things (setting the data serie in the navigator to be the same as my first data serie) but none worked
What should I do ? Do I HAVE to use highstocks ? Their api is more complicated than highcharts and I would prefer to use the latter if possible
Navigator is available only in highstock.js file. So you can use this file in combine with you highcharts.