I want to use a button to make the candlestick visible by day, week, and month, but I want the moving average line to not change automatically (only the day moving average line).
_chart = new Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
type: 'ohlc',
id: 'aapl',
name: 'AAPL Stock Price',
data: data
}, {
type: 'sma',
linkedTo: 'aapl'
}, {
type: 'sma',
linkedTo: 'aapl',
params: {
period: 50
}
}]
});
});
change(function() {
var unit = $(this).val();
console.log(123123);
_chart.series.forEach(function(ser) {
ser.update({
dataGrouping: {
units: [ [unit, [1]] ]
}
}, false);
});
console.log(unit);
_chart.redraw(unit);
console.log(_chart);
});
Related
This is the script I am using. chart should take space according to his size. But he is taking 400px height. Please let me know if you have any solution for this issue.
renderChart() {
this.view = 'chart'
setTimeout(() => {
jQuery('.user-charts').each((index, element) => {
Highcharts.chart(jQuery(element).attr('id'), {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['100% BHV.nl B.V.']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5]
}, {
name: 'Jane',
data: [2]
}, {
name: 'Joe',
data: [3]
}]
});
})
}, 1000)
// chart
var char_div = document.querySelector('.chart');
},
I want to manipulate the var series before I configure the highchart-code.
But I get 68 series!! instead of my 2 series I defined before.
What can be the error?
var series;
function refresher() {
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]";
$.getJSON(url,
function(data) {
chart = new Highcharts.StockChart
({
chart: { renderTo: 'container', zoomType: 'x', type: 'line', width: 900 },
legend: { enabled: true, verticalAlign:'bottom' },
title: { text: 'You see the data of the last measured hour!' },
credits: { enabled: false },
xAxis: { type: 'datetime', title: { text: 'time' } },
yAxis: { title: { text: 'hallo' } },
rangeSelector:{ enabled: false },
navigator : { enabled: false },
series: series,
tooltip: { xDateFormat: '%e. %b.%Y %H:%M:%S', valueDecimals: 2, },
exporting: { enabled: true },
});
// Format the y-data.
Highcharts.numberFormat(this.y, 2, '.', ',');
});
};
The problem is in the series variable.
1st of all, it's a string, and not an object.
I don't know why you are using it like that but if you really want it to be a string, you'll have to eval it when given it to the series object:
...
series: eval(series)
...
Also, it's not:
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]"
The equal signs are incorrect.
It has to be:
series = "[{ name: 'test1', data: data[0]},{ name: 'test', data: data[1]}]"
(I've replaced the equal signs by colons.)
When using a stacked colomn chart and xAxis type is datetime on the yAxis a lot of dates, although dispatched only 2 dates.
http://jsfiddle.net/jBxbe/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [[1367280000000,8],[1369872000000,26349]]
}, {
name: 'Ex2',
data: [[1367280000000,19196],[1369872000000,31213]]
},]
});
});
With such a minimal amount about data, you are probably better off using a category xaxis instead of datetime. This will give you better control on the display.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apr 2013','May 2013']
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [8,26349]
}, {
name: 'Ex2',
data: [19196,31213]
},]
});
});
Fiddle here.
You can use pointRange parameter http://api.highcharts.com/highcharts#plotOptions.column.pointRange / tickInterval (http://api.highcharts.com/highcharts#xAxis.tickInterval) two categories http://api.highcharts.com/highcharts#xAxis.categories
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.
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,