Develop Reference

Highstock Stock Tools Creating Indicator GUI Does Not See Chart Series - javascript

I have a chart with several series that have data monthly. I am trying to use the stock tools GUI to enable users to add/alter the SMA indicator. I can get the stock tools to load and have the popup to modify the SMA properties. Except, the GUI has no series listed in the drop down. I have created a very simplified version using unemployment data and just one series here.
I am adding the libraries as per usual and my chart code is nothing fancy. My series looks like:
type: 'line',
name: 'Unemployment Rate (%)',
tooltip: {
valueSuffix: '%',
valueDecimals: 1
},
visible: true,
showInNavigator: true,
data: [{
x: 189406800000,
y: 4.50
},
{
x: 192085200000,
y: 4.30
},
{
x: 194590800000,
y: 3.60
},...
I get no errors in the console - just no way to create the SMA series linked to a series of my choosing. Note that if I manually create the SMA series and link to my data series it does appear but I do not want to create a default ahead of time.

You need to add id property to your series:
series: [{
id: 'one',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/t91qeu3z/
API Reference: https://api.highcharts.com/highstock/series.line.id

Related

I am using highstock module, indicator module and highcharts into my angular application. For example , here's the option of my highstock chart with indicator.
this.stock = new StockChart({
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'AAPL',
id: 'AAPL',
type: 'candlestick',
data: [
[1487635200000, 2354.909912, 2366.709961, 2354.909912, 2365.379883],
[1487721600000, 2361.110107, 2365.129883, 2358.340088, 2362.820068],
[1487808000000, 2367.5, 2368.26001, 2355.090088, 2363.810059],
[1487894400000, 2355.72998, 2367.340088, 2352.870117, 2367.340088],
[1488153600000, 2365.22998, 2371.540039, 2361.870117, 2369.75],
[1488240000000, 2366.080078, 2367.790039, 2358.959961, 2363.639893],
[1488326400000, 2380.129883, 2400.97998, 2380.129883, 2395.959961],
[1488412800000, 2394.75, 2394.75, 2380.169922, 2381.919922],
[1488499200000, 2380.919922, 2383.889893, 2375.389893, 2383.120117],
[1488758400000, 2375.22998, 2378.800049, 2367.97998, 2375.310059],
[1488844800000, 2370.73999, 2375.120117, 2365.51001, 2368.389893],
[1488931200000, 2369.810059, 2373.090088, 2361.01001, 2362.97998],
[1489017600000, 2363.48999, 2369.080078, 2354.540039, 2364.870117],
[1489104000000, 2372.52002, 2376.860107, 2363.040039, 2372.600098],
[1489363200000, 2371.560059, 2374.419922, 2368.52002, 2373.469971],
[1489449600000, 2368.550049, 2368.550049, 2358.179932, 2365.449951],
[1489536000000, 2370.340088, 2390.01001, 2368.939941, 2385.26001],
[1489622400000, 2387.709961, 2388.100098, 2377.179932, 2381.379883],
[1489708800000, 2383.709961, 2385.709961, 2377.639893, 2378.25],
[1489968000000, 2378.23999, 2379.550049, 2369.659912, 2373.469971],
[1490054400000, 2379.320068, 2381.929932, 2341.899902, 2344.02002],
[1490140800000, 2343, 2351.810059, 2336.449951, 2348.449951],
[1490227200000, 2345.969971, 2358.919922, 2342.129883, 2345.959961],
[1490313600000, 2350.419922, 2356.219971, 2335.73999, 2343.97998],
[1490572800000, 2329.110107, 2344.899902, 2322.25, 2341.590088],
[1490659200000, 2339.790039, 2363.780029, 2337.629883, 2358.570068],
[1490745600000, 2356.540039, 2363.360107, 2352.939941, 2361.129883],
[1490832000000, 2361.310059, 2370.419922, 2358.580078, 2368.060059],
[1490918400000, 2364.820068, 2370.350098, 2362.600098, 2362.719971],
[1491177600000, 2362.340088, 2365.870117, 2344.72998, 2358.840088],
[1491264000000, 2354.76001, 2360.530029, 2350.719971, 2360.159912],
[1491350400000, 2366.590088, 2378.360107, 2350.52002, 2352.949951],
[1491436800000, 2353.790039, 2364.159912, 2348.899902, 2357.48999],
[1491523200000, 2356.590088, 2363.76001, 2350.73999, 2355.540039],
[1491782400000, 2357.159912, 2366.370117, 2351.5, 2357.159912]
]
}, {
type: 'sma',
linkedTo: 'AAPL',
params: { period: 5 }
}]
});
}
this code looks like this
If you see, there are two tooltips. One for the candlestick series and another one for SMA series. I want to merge these two tooltips into one in such a way that in one tooltip after open , high , low , close values. SMA series name and the value should come. I tried to do using tooltip formatter but maybe I am missing something so it is not coming in the way I want.

Have you tried to play with the tooltip.shared and tooltip.split parameters? Here is the code:
tooltip: {
split: false,
shared: true
},
Live example: https://jsfiddle.net/s8m90bjt/
API Reference:
https://api.highcharts.com/highstock/tooltip.shared
https://api.highcharts.com/highstock/tooltip.split

Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?

In my opinion the answer is no.
Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/
I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.
Workaround
This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/
First I added additional two series that have no data:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series.
I created visible flag for every leaf for controlling its visibility.
Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.
legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Update
If you want an animation to happen use addPoint and removePoint instead of setData.
API references:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Series#removePoint

I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.

[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.

I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels

The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}

There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]

If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.