HighStock HighCharts Setting Flag on Click Event - javascript

I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.
Here is some of the code I've tried playing with:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.
Any help on this would be greatly appreciated!

Firstly, A js-fiddle example would be highly appreciate to understand your problem.
From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
my fiddled code # http://jsfiddle.net/U2Z2x/1/
Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle update # http://jsfiddle.net/U2Z2x/2/

Related

Highcharts, vue component. 3 charts in 1

expected chart
Hi, I need to make this charts, looks like 3 charts in 1(?). I can make the 2 scatered ones, but the column charts its tricky. Thanks to Wojciech Chmiel I was able to make this columns charts with highcharts-vue, but the chart behaviour its a little odd, I cant add a yAxis, nor stop the chart from pushing to the top like a sort of responsive behaviour.
#Wojciech Chmiel
Hi, sorry for the delay. A columnrange chart with a bloxplot and 2 scatter
initChart (data) {
this.chartOptions = merge(this.getBaseChartConfig(ChartTypes.BoxPlot), {
xAxis: {
categories: data.periods
},
series: [
{
type: 'columnrange',
name: 'Observations',
data:data.peerGroupStatisticReturns.dataRange,
showInLegend: false
},
{
type: 'boxplot',
linkedTo: ':previous',
data: data.peerGroupStatisticReturns.values
},
{
type: 'scatter',
name: data.names[1],
marker: {
symbol: 'diamond',
fillColor: '#6598FD',
radius: 6
},
data: data.benchmarkReturnSeries.data
},
{
type: 'scatter',
name: data.names[2],
marker: {
symbol: 'square',
fillColor: '#FFCC33'
},
data: data.productReturnSeries.data
}
]
})
// chart settings
const boxPlotConfig = {
title: {
text: ''
},
plotOptions: {
boxplot: {
fillColor: '#0076C0',
medianColor: '#303030',
medianWidth: 1,
stemWidth: 0,
whiskerWidth: 0,
color: '#303030',
showInLegend: false
},
columnrange: {
color: '#66ADD9'
},
series: {
enableMouseTracking: false,
borderColor: '#303030'
}
},
yAxis: {
title: ''
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Now I have make the colors interspersed and move the markers so the dont overlap, one to the right inside the column and one to the left

How to render a specific data point marker on HightCharts Bell Curve?

Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: '5 Meter Sprint'
},
opposite: false,
visible: true
}],
yAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: null
},
opposite: true,
visible: false
}],
series: [{
name: null,
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
intervals: 4,
baseSeries: 1,
enableMouseTracking: false,
}, {
name: 'Data',
data: data,
visible: false,
}]
});
jsfiddle: https://jsfiddle.net/0b24mwfs/40/
So I've been try to do a highly customized bell curve chart with HighCharts, right now I'm able to disable most of the stuff expect the xAxis and the bell curve itself, but How to render a point on the curve by passing it a specific value?
Update:
Seems like it called marker on highcharts, by default it is rendering all the markers along the curve, is there a way to let it render only one by specifying the value?
You can update generated points in load event: https://jsfiddle.net/BlackLabel/g1qhj8bv/1/
chart: {
events: {
load: function () {
this.series[0].points[10].update({
marker: {
enabled: true,
fillColor: 'white',
radius: 6,
lineWidth: 2,
lineColor: 'red'
}
});
}
}
},
The only problem is to find index of a point you need: points[10]. I think you can simply loop over them, until you find the needed one, then update.

Proper Flag position over histogram bell curve

I am using histogram bell curve for a project, everything is working fine except flag position like given in picture.
Here is link of my jsfiddle https://jsfiddle.net/8q1t3mwb/4
var data = [1,2,3,4,5,6,7,8,9,10];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
id:'dataseries',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
}]
});
See full code here, https://jsfiddle.net/8q1t3mwb/4
You see the points where they currently are because your flags are on the scatter axis. If you turn on the scatter points, you will see that.
Therefore, if you set the following for the flag series:
{
yAxis: 1,
xAxis: 1,
name: 'Pointer',
type: 'flags',
...
}
And adjust your x value according to the number on the bell curve you will be able to see the flag connected to the curve.
Working example: https://jsfiddle.net/ewolden/8q1t3mwb/6/

Highcharts add a new data point

I'm trying to update the highchart line graph say every minute. something like shown in this link jsfiddle
Right now, I use a periodic javascript call to the function that draws the graph. The problem is that it starts to draw it from beginning.
Is it possible to just add the new data point to the existing line?
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php? filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
you should use the addPoint function in the data series...
here is an example of a chart that updates every second
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/

Highcharts multiple graphs stacked in seperate "<div>" with combine zooming

I am looking for a basic example from Highcharts where the following is done
a. 3 separate graphs windows stacked on top of each other
b. combine zoom option where all three separate graphs can bee zoomed for data.
what I was looking is "highstock" data where i can add more windows.
thanks,
Bilal
You can refer this example
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,
dataGrouping: {
units: groupingUnits
}
}]
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
You may use any number of y-axis i.e stacked graphs
#Bial I have created a fiddle for your use-case, view the fiddle at https://jsfiddle.net/Nishith/4b33pvc2/ Its having 3 series with navigator.
code for each series is like below :
{
name : 'critical alarm',
data :data.criticalAlarmCountTimeseries,
id : 'critical',
zIndex : 1,
lineWidth:3,
color:'red',
yAxis: 0 ,
marker : {
enabled : false
}
}
You can catch afterSetExtremes on xAxis chart and call setExtremes on the other charts to "zoom".
events: {
afterSetExtremes: function() {
if (controllingChart == "chart3") {
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
chart1.xAxis[0].setExtremes(xMin,
xMax,
true);
chart2.xAxis[0].setExtremes(xMin,
xMax,
true);
}
}
}
Example: http://jsfiddle.net/Gv7Tg/33/

Categories

Resources