Highcharts x axis formatting options - json

I am a beginner for highcharts. I was trying something and got stuck. My x axis has values repeated multiple times. Tooltip values should contain date and time as shown. but the thing i want to change is the x axis values. same value must be shown only once and not repeated everywhere where there is data.
X axis format must be DD-MMM and tooltip should be DD-MM-YY HH am/pm .
is this possible?
Here is my trial code
http://jsfiddle.net/j6oqcgp2/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
labels: {
formatter: function () {
y=(this.value).substring(1,6);
return y;
}
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function () {
y=(this.x).substring(0,15);
return y;
},
shared:false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [5,10,19,10,4,6,8]
}]
});
and this is how i want it to be

If your x-axis categories are going to be a predictable set of values (for example, four readings on each day), then you simply can add the tickInterval attribute to show a new axis label on when the day changes (see http://api.highcharts.com/highcharts/xAxis.tickInterval).
So, if you had four readings per day, you would add tickInterval: 4 to your x-axis options. This would show an axis label at every fourth reading, or, in this example, once per day.
If, however, your x-axis categories are not predictable (for example, any number of readings per day), you may want to look at this Highcharts demo, which shows a chart with irregular time periods: http://www.highcharts.com/demo/spline-irregular-time. In this demo, you'll see regular, non-repeating axis labels for whatever unit you're measuring (hours, days, etc.) and the data being plotted as frequently as it's recorded in the data.
I hope these examples and resources are helpful for you.

Related

Highchart/stockChart: Zoom with buttons into monthly-data and show affected columns

I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?

FullCalendar Time Line View

I am using Full Calendar with Time Grid plugin, all is working good. I want to change color for past date & time. By dayRender event I could change color of previous date but not time, as for example view for week starting from Sunday 8 Spetember 2019 till 14 Saturday 2019. and open page on 10 Sep 2019 at 9.00 AM, I should change color until 10 Sep 2019 at 9.00 AM but I could do it until 9 Sep 2019.
How can I include time. My code pen
https://codepen.io/milindsaraswala/pen/VwZXpRM
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
soltDuration: '00:30:00',
slotLabelInterval: '00:30:00',
minTime:'07:00:00',
maxTime:'24:00:00',
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short'
},
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { weeks:1},
buttonText: '7 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
],
//events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
events:events,
dayRender:function(day){
if (moment(day.date).isBefore(moment())) {
day.el.classList.add('disabledDates');
}
}
});
calendar.render();
});
You can restrict the previous days must more robustly by using a validRange without an end date:
validRange: function(nowDate) {
return {
start: nowDate
};
},
As well as just visually greying out the dates this will also stop events being added or dragged onto them.
Greying out the times of the current day is much more problematic. That's because there is no single HTML element representing a "time slot" on a particular day which you can target in order to do an hour-by-hour or even minute-by-minute restriction. I think the best thing you can do here is to create a background event which covers the period of the day up until the current time:
dayRender: function(day) {
var d = moment(day.date).startOf("day");
var today = moment().startOf("day");
if (d.isSame(today)) {
var now = moment();
var evt = {
start: today.format("YYYY-MM-DD HH:mm"),
end: now.format("YYYY-MM-DD HH:mm"),
rendering: "background",
className: "disabledDates"
}
calendar.addEvent(evt);
}
}
If you then wanted to restrict the creation / dragging of other events over the background event you can do via some of the date selection settings.
Demo: https://codepen.io/ADyson82/pen/pozLWjo

Highcharts Y-axis per serie csv

I'm working on highcharts to view my data.
And i would like to do a single chart with 2 lines inside, wich one lines as 1 y-axis.
I already implement the chart like this :
$.get("http://1001dev.com/Chahine/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
$('#EuropeActifs').highcharts({
yAxis: [{ // Primary yAxis
labels: {
format: '{value} M',
},
title: {
text: 'Actifs en € ',
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
labels: {
format: '{value}',
},
title: {
text: 'Nombre de parts',
}
}],
data: {
csv: csv
}
});
});
This is my CSV :
Date,Actifs en €,Nombre de parts
13/11/1998,461728.00,30286.50
11/12/1998,460454.00,30286.50
08/01/1999,499715.00,30286.50
05/02/1999,502512.00,30933.50
05/03/1999,502481.00,30933.50
02/04/1999,505413.00,31105.00
30/04/1999,519929.00,31105.00
28/05/1999,516903.00,31105.00
Obviously my CSV is longer than this. But u can see the idea i think.
I would like to have the data for Actifs en € associete to the y-axis Primary and the data for Nombre de parts associate to the y-axis Secondary
How can i do that ?
Thanks a lot for your help
Cheer
Jordan
You need to specify which yAxis you want the different series to be in, like this:
series: [{
yAxis: 1
}, {
yAxis: 0
}]
Working example based on your data: https://jsfiddle.net/ewolden/q489nsgw/2/
API on data: http://api.highcharts.com/highcharts/data
API on series.yAxis: http://api.highcharts.com/highcharts/series.line.yAxis

How to display yearly values on xAxis in Highcharts

I guess this is somewhat of a stupid question. But I am struggling since quite a while with this, not finding what the right way of data formatting is for my data.
I have yearly data like this, which I want to have displayed as such - 2001, 2002, 2003, ...:
time,lat,lon,Npp_1km
Date.UTC(2001/1/1),15,-90,1.266112766
Date.UTC(2002/1/1),15,-90,1.166646809
Date.UTC(2003/1/1),15,-90,1.020591489
Date.UTC(2004/1/1),15,-90,1.016010638
Date.UTC(2005/12/31),15,-90,1.08053617
Date.UTC(2006/12/31),15,-90,1.181195745
and my Highcharts code which looks like this:
xAxis: {
labels: {
style: {
color: "#666666"
},
x: 0
},
gridLineWidth: 1,
gridLineDashStyle: 'Dot',
tickWidth: 0,
type: 'datetime'
},
But the xAxis doesn't display the years but instead some "00:00:00.001".
I have tried many different formats for the timestamp - "2001-1-1", "2001/1/1", "1/1/2001", "1-1-2001", "Date.UTC(2001/1/1)". I have changed the "dateTimeLabelFormats" as well. But all in vain. It doesn't spit out "2001 - 2002 - 2003 - 2004".
Here is a fiddle.
What is the right way to achieve this? Thanks for any hints!
You had problems with parsing your data. All of your x values was not correct - that is the reason of your issue. You need to parse it a little bit different if you want to get the correct data for your chart:
$.get('data.csv', function(data) {
var temp = []
// Split the lines
var lines = data.split('\n');
// For each line, split the record into seperate attributes
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if (lineNo !== 0) {
items[0] = items[0].substring(items[0].indexOf('(') + 1, items[0].indexOf(')'));
var x = new Date(items[0]),
y = parseFloat(items[3]);
if (!isNaN(y)) {
x = x.getTime();
options.series[0].data.push([x, y]);
}
}
});
Here you can see an example how it can work:
http://jsfiddle.net/pcpq6mtr/4/
Regards,
A simple solution can be put categories in xAxis if the time is fixed.
xAxis {
categories:[2001,2002,2003,2004,2005,2006]
}
If the time is not fixed. categories need to be calculated dynamically.

Bar chart with two series of different date/values ranges

I am using jqplot through Primefaces and Have input to Bar Chart like this:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: {"03-05-2015": 10, "06-05-2015": 3}
When I pass this data as BarChartModel, I got data wrongly drawn on the chart.
The data follows the first series, as the Series 2 is drawn after the Series 1 dates. I've to convert the data to be as follows in order to get the chart drawn fine:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, *"03-05-2015": 0*, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: { *"01-05-2015": 0* , "03-05-2015": 10, "06-05-2015": 3}
Notice the data items between * and *.
Any advice here? (if using DateAxis helps?)
I had the same problem with LinearChartModel when I has not using DateAxis.
As a workaround, I filled my series with all possible data and then reordered the list. Urg!
Should work with BarChartModel too.
Using DateAxis you just need to add your date axis with the timestamp, like this:
serie.set(new Date().getTime(), new Double(123));
or this
serie.set("2015-09-08", new Double(123));
Put the DateAxis in your LineChartModel like this:
DateAxis axis = new DateAxis("Data da inspeção");
linearModel.setZoom(true);
linearModel.getAxes().put(AxisType.X, axis);
linearModel.setExtender("linhaSetor");
And format your date in the extender.js:
function linhaSetor() {
this.cfg.axes.xaxis.tickOptions = {
show : true,
angle : 45,
formatString : '%d/%m/%y %Hh'
};
}
You don't even need to put the data in order.