I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)
I tried to apply it to my problem:
https://jsfiddle.net/ezcxd61m/2/
var options = {
width: 900,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: new Date(2013, 9, 13),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['HH:mm', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
},
minorGridlines: {
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['hh:mm:ss', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
}
}
};
But it seems that it doesn't work for the timeline chart. Can anyone help me?
Thanks,
Rob
I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:
hAxis: {
format: 'dd.MM.yyyy HH:MM'
}
I've applied the changes in the url you provided
https://jsfiddle.net/ezcxd61m/2/
You will need to set the hAxis.format() depending on the thresholds you set.
If this threshold is minutes, set the hAxis one way.
If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.
Just check the threshold condition before writing the chart, and apply it to the options object.
Related
I am using Chart.Js "2.8.0" and chartjs-plugin-annotation "0.5.7" to display boxes based on timestamp intervals
I am trying to show something like this:
based on timstamp intervals, but cannot find something from their docs.
The result is...:
code examples:
annotations.push({
type: 'box',
id: `status-${index}`,
xScaleID: `x-axis-${index}`,
yScaleID: `y-axis-${index}`,
backgroundColor: 'rgba(188, 170, 164, 0.2)',
borderWidth: 0,
xMin: data.linkedTime, // timestamp
xMax: data.unlinkedTime, // timestamp - can be null(till present)
label: {
enabled: true,
fontSize: 12,
drawTime: 'afterDraw',
content: data.name,
xAdjust: 0,
yAdjust: 0,
position: 'top'
}
});
chart xaxis (using dayjs let labels = items.map(({ time }) => this.$dayjs.unix(time));):
xAxes: [
{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM DD'
}
}
}
],
My guess is that i should format the xMin/xMAx values accordingly to xaxis (daysjs stuff), tried something('Oct 31' or this.$dayjs.unix(timestamp)) but it doesn't work... i guess i am missing something
Chart.js uses timestamps defined as milliseconds since the epoch. Source
Use .valueOf() to get timestamp in milliseconds from dayjs. Source
xMin: dayjs(...).valueOf(),
xMax: dayjs(...).valueOf(),
How can I display full thick label? It always gets cut off and replaced by 3 dots.
I've been trying various options from https://www.chartjs.org/docs/master/axes/index with padding and similar, but I can't find this. Full date data is there.
You are using a previous version of Charts.js. With Charts.js >2.0 axis label should grow as much as needed to display the full date unless you override the label function like done here.
Demo: https://codepen.io/adelriosantiago/pen/wvooQRR?editors=1010
Date format can be changed in options.scales:
xAxes: [{
type: "time",
time: {
unit: 'hour',
unitStepSize: 0.5,
round: 'hour',
tooltipFormat: "h:mm:ss a",
displayFormats: {
hour: 'Y MMMM D, H:M:S A'
}
}
}]
I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one.
I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10. I looked around the documentation time axis but did not find anything promising.
My definition of my xAxes looks like:
xAxes: [
{
gridLines: {
display: true
},
type: "time",
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
}
},
ticks: {
min: 0,
max: this.datapoints.length,
autoSkip: true,
maxTicksLimit: 10
}
}
]
I tried to loop over the dataset and find the 'first pretty time' object and set this object as my ticks.min object. But this did not work.
OK I found it. The property is in the time attribute:
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
},
min: firstprettyTime, // <- moment js object
},
All praise to this guy's answer.
I am using google chart which is working absolutely fine except one thing the issue is when I select custom date filter and choose only single date from it then it will show only 1 record with little dot which is also fine no issue with that but its y axis shows repetitive values in it.
Please check example :
http://awesomescreenshot.com/0f757w8k3a
it shows 0, 1, 1, 2, 2
it should show 0, 1, 2, 3, 4 or just 0, 1, 2
var options = {
vAxis: {
format: '#',
minValue: 0,
gridlines: {
color: 'transparent'
},
viewWindowMode: "explicit",
viewWindow:{ min: 0 }
},
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
colors:[{color:'#A8D1FF', darker:'#97B9D8'}]
};
var chart = new google.visualization.AreaChart(document.getElementById('PostChart'));
chart.draw(PostChartData, options);
That may be cause of small range of values for Y axis. Try using Ticks for vAxis commonly referred as vAxis.ticks
vAxis: { ticks: [5,10,15,20] } //array
vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } // A valid value as V
vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } // Dates
Click Here for Ref.
Edit1: In case your record values belongs to smaller range and and you have set the Max Value of vAxis to a higher value, It can also result in Repeated values in vAxis.
I would like to customize the date aggregate(axis labels) for amCharts, but I couldn't find a provision to do this in amCharts docs. Googling the same just pointed me to the dateFormats documentation.
amCharts provides an option for aggregating date by setting parseDates to true and adding dateFormats as shown below. This option aggregates date by doing some calculation by amCharts itself, let's say 25 days for week aggregation(Jan 5), 65 days for month aggregation(Jan) and so on, but I would like to customize the default date aggregation level.
parseDates: true,
dateFormats: [{
fff: 'period',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD', // day level
format: 'MM/DD/YYYY'
}, {
period: 'WW', // week level
format: 'MM/W/YYYY'
}, {
period: 'MM', // month level
format: 'MMM YYYY'
}, {
period: 'YYYY',
format: 'YYYY'
}]
I would like to change the default day, week, month levels in the following manner.
DAY LEVEL: <= 14 days
WEEK LEVEL: 14 < x <= 91
MONTH LEVEL: 91 < x <= 731
I would like to customize the date aggregation levels in amCharts. How could I do this? Any help would be appreciated. Thanks in advance.
You can't set this so precisely. The next period is chosen when there are too many items in the selected period. You can try adjusting minHorizontalGap value of CategoryAxis: http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap (default is 75). If you make it smaller, more items will fit and you'll have more labels.