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
I've created a Pie Chart, using Highcharts. I have a title and I need to inject the name of data series inside the title. So it's like this:
title: {
text: 'Data name: {name}',
align: 'center',
useHTML: true,
verticalAlign: 'middle',
y: -70
},
series: [{
type: 'pie',
name: 'Some name to be injected inside the title',
innerSize: '70%',
data: []
}]
Is it possible to do that?
I would do this by identifying or retrieving the series name first, and assigning it to a variable to be used within the chart configuration options.
Whatever method you're using to retrieve or process the data for the series object of the chart should be able to provide you the name to use independently.
Like:
//process data...
var seriesData = [['Group A', 1598],['Group B', 872],['Group C', 321]];
var seriesName = 'Chart Series Name';
$(function() {
$('#container').highcharts({
chart : { type : 'pie' },
title : { text : seriesName },
subtitle : { text : null },
tooltip : { },
plotOptions : { },
series : [{
name : seriesName,
data : seriesData
}]
});
})
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/64/
There is no direct way to do this. I suggest to use the load event of highcharts:
chart: {
/* some other code */
events: {
load: function () {
//collect information
var title_old = this.title.textStr,
title_new,
substitute= this.series[0].name,
needle = '{name}';
//replaceing 'needle' with 'substitute'
title_new = title_old.replace(needle,substitute);
//set title
this.setTitle({ text: title_new});
}
}
}
Hints:
works only if you have one series (see in code: series[0])
tested with Highcharts JS v4.1.8 (2015-08-20)
for information about String.prototype.replace() have a look here [1]
[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data
I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.
I'm using highcharts in my web application and I was wondering if there's any way to rename a series after the chart hast been created??
Thanks in advance!!
actually, there's a way now. In highchars 3.0 series added a new api, called update:
chart.series[0].update({name:"name u want to change"}, false);
chart.redraw();
it will not only update the series name below the chart, but the name in tooltip as well.
Cheers!
This seems to work :
chart.series[1].name="Renamed";
chart.redraw();
There is no method for doing this in the API. You could remove the series and add it again with another name, but that will make the animations run a second time and I think it will be colored with a new color as well.
It is not required to Redraw chart again
We can include it along with the series option in the Chart declaration as below:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'high_container'
},title: {
text: 'IO Signal Data'
},subtitle: {
text: 'Source: GPS Modem'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime',
labels: {
enabled: true,
formatter: function () { return ddd[this.value][0]; }, //<=== the value to plot chart
}
},
series: [{
data: ddd,
name: SeriesName
}]
});
You can use the following to change the series name:
$(chart.series[0].legendItem.element).children('tspan').text('newLabelName');