Plot Plotly chart with german date values - javascript

I recently started working with xslt to generate html from a given xml document. I am trying to display history values using plotly, which is already working well.
Nevertheless, I am currently facing a problem: The x-axis with the date values should be displayed in German. I have already tried to set locale to 'de_DE', but unfortunately this does not work. Does anyone have any idea of how it might work?
var myPlot = node.children[0];
trace1 = {
x: values.map(a => a.xvalue),
y: values.map(a => a.yvalue),
type:'scatter',
name:'Messung',
locale:'de_DE',
hovertemplate: '<b>Wert:</b> %{y}<br><b>Datum:</b> %{x}<br>'
};
data = [ trace1 ];
layout = {
title: 'Verlaufswert: ' + vitSigTitle,
hovermode:'closest',
xaxis: {
autorange: true,
range: [beginDate, endDate],
rangeselector: {
buttons: [
{
count: 1,
label: 'Monat',
step: 'month',
stepmode: 'backward'
},
{
count: 6,
label: '6 Monate',
step: 'month',
stepmode: 'backward'
},
{
count: 1,
label: 'Jahr',
step: 'year',
stepmode: 'backward'
},
{
count: 1,
label: 'Day',
step: 'day',
stepmode: 'backward'
},
{ step: 'all' },
]
},
rangeslider: {range: [beginDate, endDate]},
type: 'date'
},
yaxis: {
title: vitSigUnit,
autorange: false,
range: [minValue-10, maxValue+10],
type: 'linear',
locale:'de_DE'
}
};
Plotly.newPlot(node.children[0], data, layout, {locale: 'de-DE'});
console.log(Plotly.BUILD);

Just setting the locale is not enough, you also have to include the corresponding js file, see https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization

Related

Grouping dynamic data in highcharts

I'm attempting to create a highchart populated by dynamic data that looks something similar to the following image:
Where the y-axis (technically just the x-axis with the inverted: true tag) is a list of people grouped by location. However, I'm having trouble displaying the data grouped by their locations with the locations being displayed also. The actual view isn't important, just that it neatly groups the data and displays the location.
All I've managed to do so far is simply sort the data and tag the location name to the end of the person, but that's not quite what I want:
I'm aware that this is a relatively easy thing to do with categories and data series, but the only examples of this i could find didn't involve dynamic data. Here is some of my code so far:
function loadChart() {
//calculate height based on number of users displayed, and width based on the panel body width
var chartHeight = users.length * 20 + 75;
var chartWidth = $('#InOutPanelViewId').width();
chart = Highcharts.chart('ChartViewId', {
chart: {
width: chartWidth,
height: chartHeight,
type: 'columnrange',
inverted: true,
spacingLeft: 0
},
title: {
text: null
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
align: 'right',
format: '{value.User}',
style: {
color: 'black',
fontSize: '12pt'
}
}
},
yAxis: {
showEmpty: false,
title: '',
type: 'datetime',
dateTimeLabelFormats: {
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
min: startTime.valueOf(),
max: endTime.valueOf(),
plotLines: [{
color: 'grey',
value: time,
width: 1.5
}]
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [
{ name: "Data", borderWidth: 0, data: chartData }
],
tooltip: {
formatter: function () {
return '<b>' + this.point.jobcode + '</b><br>' + this.point.timespan + '<br>';
}
}
});
}
Where chartData currently looks like this:
chartData[chartData.length] = { name: user, low: displayStart.valueOf(), high: displayEnd.valueOf(), timespan: timeSpan, jobcode: value.JobCodeName, color: colour };
And is populated with dynamic data it pulls from an endpoint. The endpoint does also send back the location, so I'm wondering how I can use this structure and the location i'm sending back to group the data and display it nicely.
Any help is appreciated, thanks!

Highcharts strange grouping behaviour

I am using the lazy loading method to load OHLC data. On the server side I use Python + MySQL and have 4 tables with OHLC data and time intervals of 5min, 1hour, 1day, 1month. Actually it works well, but unfortunately Highcharts displays the candlesticks in a strange way. Especially at the initial loading and when I switch between the zooms. Here are some examples:
1. Grouping on chart initialization
On initial Loading 6h, 24h & 3d is disabled and the candlesticks are wide apart.
Only after clicking then the first time 1w the chart displays as follows, which is correct and also the zoom buttons 6h, 24h & 3d are enabled now.
2. Grouping when clicking between the rangeSelector buttons
If I click then All inside the Range Selector I get the following display (this is wrong):
Only after clicking 1m and then back on AllI get the right display:
Does anybody know whats going on? Many thanks in advance! Here is the code:
<script>
$(function () {
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
$.getJSON('http://ipaddress/data3?start=' + Math.round(e.min / 1000) +
'&end=' + Math.round(e.max / 1000), function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
//Initially load the biggest data range
$.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 6,
text: '6h',
dataGrouping: {
forced: false,
units: [['minute', [15]]]
}
}, {
type: 'hour',
count: 24,
text: '24h',
dataGrouping: {
forced: false,
units: [['minute', [30]]]
}
}, {
type: 'day',
count: 3,
text: '3d',
dataGrouping: {
forced: false,
units: [['hour', [2]]]
}
}, {
type: 'day',
count: 7,
text: '1w',
dataGrouping: {
forced: false,
units: [['hour', [4]]]
}
}, {
type: 'day',
count: 30,
text: '1m',
dataGrouping: {
forced: false,
units: [['day', [1]]]
}
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3 // Init loading button
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes
},
//minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data: data,
dataGrouping: {
enabled: true
}
}]
});
});
});
Here is the solution:
1. No grouping on chart init
To solve the grouping problem at the initialization stage, use the following lines:
Highcharts.stockChart('container', {
//.... your code ...
}, function(chart){
chart.rangeSelector.clickButton(1);
});
The problem here was that the selected button from chart options was not triggering afterSetExtremes event for xAxis.
1. No grouping when clicking the rangeSelector
To avoid Highcharts grouping the data when clicking between the rangeSelector buttons, set the chart as follows:
rangeSelector: {
buttons: [{
dataGrouping: {
forced: false }
}] }

Echarts.js Library - Referencing pages using onclick event for pie slices

I am using the echarts.js library for pie charts,
I would like to make each slice in the pie hyperlink to another page.
Im using static data points for now, to test if it will work - and will update to dynamic data after.
Below is an example of pie1a - i would like T2, T2, T4 and N/A to reference their own pages. T2 = "http://localhost/T2.html".
//ECHART_PIE1a
var echartPie1a = echarts.init(document.getElementById('echart_pie1a'), theme);
echartPie1a.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'right',
y: 'bottom',
data: ['T2', 'T3', 'T4', 'N/A']
},
calculable: true,
series: [{
name: '(TB)',
type: 'pie',
radius: '54%',
center: ['54%', '36%'],
data: [{
value: 438,
name: 'T2'
}, {
value: 1109,
name: 'T3'
}, {
value: 42,
name: 'T4'
}, {
value: 389,
name: 'N/A'
}]
}]
});
echartPie1a.setOption(option);
echartPie1a.on('click', function (params)
{window.open('' + encodeURIComponent(params.name) + '.html', '_self');
});
Seems to have done the trick.

HighCharts OHLC - Can I provide color-information for each point with JSON-Data?

first thanks for this great community!
I didn't find anything in the Highcharts Docs and also nothing on stackoverflow or Google.
I would like to provide fill-color informations for each point in the OHLC-Chart by passing it through JSON. Is this possible?
Here is my JSON (for example)
[[973033200000,10.18,10.18,10.74,10.18],
[973119600000,10.16,10.16,10.72,10.16],
[973465200000,10.1,10.1,10.66,10.1],
[973551600000,10.16,10.16,10.72,10.16],
[973638000000,10.17,10.17,10.73,10.17],
[973724400000,10.2,10.2,10.77,10.2]]
An alternative for my purposes would be to change the point-colors for a date-range with jQuery.
May this is possible?
Thank you for answering!
You can pass information of color per point like this http://jsfiddle.net/gvkv4f50/1/
$(function () {
// create the chart
$('#container').highcharts('StockChart', {
plotOptions: {
ohlc: {
colorByPoint: true,
}
},
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: [{
open: 8.34,
high: 8.56,
low: 5.47,
close: 6.15,
color: 'yellow'
}, {
open: 8.34,
high: 8.56,
low: 5.47,
close: 6.15,
color: 'green'
}],
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]]
]
}
}]
});
});
If you want to ignore different coloring when open point has lower value than close point add this:
Highcharts.wrap(Highcharts.seriesTypes.ohlc.prototype, 'getAttribs', function (p, args) {
Highcharts.seriesTypes.column.prototype.getAttribs.apply(this, args);
});
You can see how in here - http://jsfiddle.net/chybv1mt/3/

chart width changes when a trendline is added in highcharts

I'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?
My code is:
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my JSfiddle.
Please check the images also.
Normal chart
Chart with trendline
This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.
You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.
Docs: http://api.highcharts.com/highcharts

Categories

Resources