I am rendering a category chart with time on the y-axis. This chart will show the completed time for each ticket.
`` http://jsfiddle.net/6oz3075d/14/
However, I am unable to show the date and time in DD:MM:YY format. Also the interval is in years. I tried using dateTimeFormat,tickInterval etc. Nothing seems to help.
You can use formatter and Highcharts.dateFormat
labels:{
formatter:function(){
return Highcharts.dateFormat('%d:%m:%Y', this.value);
}
},
http://jsfiddle.net/6oz3075d/15/
Related
In my Ruby on Rails application , i have the below json and i am displaying the linechart from chartkick. In linechart , it shows previous day's date though date is correct in the json. When i use format it displays the date fully. How we can display only the date in x axis. My json from controller
[["2018-05-27T00:00:00.000Z", #<BigDecimal:558070d10920,'0.3206E2',18(18)>],
["2018-05-29T00:00:00.000Z", #<BigDecimal:558070d10060,'0.23848E3',18(18)>],
["2018-05-30T00:00:00.000Z", #<BigDecimal:558070d0b420,'0.33899E3',18(18)>],
["2018-05-31T00:00:00.000Z", #<BigDecimal:558070d0a548,'0.83962E3',18(18)>]]
Please find the code used
<%= line_chart [name: 'Sales Amount ', data: #daily_sales_debit_data],
xtitle: 'Period',
ytitle: 'Sales Amount',
library: {
vAxis: { format: "currency" },
legend: { position: 'in'},"format":"dd/MM/yy"},
"discrete":true%>
In the graph , it is being displayed as below . how can i format the date being displayed in x axis without time .
2018-05-08T00:00:00.000Z
2018-05-09T00:00:00.000Z
2018-05-14T00:00:00.000Z
2018-05-15T00:00:00.000Z
2018-05-16T00:00:00.000Z
2018-05-18T00:00:00.000Z
2018-05-19T00:00:00.000Z
2018-05-21T00:00:00.000Z
2018-05-22T00:00:00.000Z
2018-05-25T00:00:00.000Z
2018-05-27T00:00:00.000Z
2018-05-29T00:00:00.000Z
2018-05-30T00:00:00.000Z
2018-05-31T00:00:00.000Z
Formatting the date in the proper format - "MM-DD-YYYY" worked
I'm feeding my Highcharts.js series object with data containing date and a number, for example: ["2017-1-22",262] which shows up correctly when hovering a point, but which is not displayed correctly in the xAxis. Below codes does not do much, probably because the date format is not what Highcharts expects? But what format is expected? Unixtime does not seem to work.
xAxis: {
type: 'datetime'
}
https://jsfiddle.net/80v2k0tv/
Highcharts expects time in the form of milliseconds since 1970.
See for example: https://api.highcharts.com/highcharts/series.line.data.x
The x value of the point. For datetime axes, the X value is the timestamp in milliseconds since 1970.
Unixtime is in seconds, so using unixtime * 1000 will give the correct highcharts time.
I have a drill down report, which has to show the issues for the selected range of date say 2014 to 2015 till date. More than 4000 issues filed. The report got rendered, but when i drilldown not thing is show(Empty page).
Unable to test with jsfiddle.
What is the max data points that we can show in the drill down?
turbo threshold should be set(by default it is 1000): http://api.highcharts.com/highcharts#
plotOptions.series.turboThreshold
plotOptions:{
column:{
borderWidth:0
},
series:{
turboThreshold:5000
}
},
updated fiddle
fiddle - http://jsfiddle.net/z8fw7/
When I hover over the column I can see this weird big number, where is it coming from.
If I add one more date entry. e.g
[Date.UTC(2010,2,31), 28.84],
[Date.UTC(2011,2,31), 28.84],
[Date.UTC(2012,2,31), 32.65]
The tooltip then displays the proper year value as expected. It works flawlessly with 3 data values while it does not work with 2 data values. How can I make sure that it works with even 2 data values.
Looks like a bug in Highcharts with 2 data points when using the pointFormat. I suggest using the more customizable formatter function.
So in your option for configuring the tooltip, use this:
tooltip: {
formatter: function() {
var date = new Date(this.x);
var year = date.getFullYear();
return year + '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y + '%';
},
}
Works fine with the 2 data points or 3, etc. See: http://jsfiddle.net/UqbKQ/
the value you are seeing is the timestamp of the data point from the x axis.
This formatting (or lack thereof) seems like a bug to me...
I don't see an obvious answer except to use the formatter function to fully customize the tooltip display.
Im trying to mark certain Day Times on my Chart - iE: 15:00 - 21:00
The Date information comes in form of a timestamp - "1365362890000" for example.
Is there any convenient way to say start from time X and go until time Y?
Else I would probs need to loop through all the times to find start/end points.
The timeframe can be anything from a day to a month.
(The plotBands themselves are working for me - just looking if there might be a better way then looping through all the data)
Edit: I meant something like you see in my picture here - its working like this and all is fine. Im just wondering if there was a simple way to say - "mark time x to time y with color z" instead of doing "by hand".
Yes, plotBands have a #from and #to property. Just use the #from and #to of the converted datetime (i.e. the unix time * 1000)
$('#container').highcharts('StockChart', {
xAxis: {
plotBands: [
{
from: 1374658200000,
to: 1374681600000,
color: "rgba(68, 170, 213, .2)"
}
]
}
});
In the xAxis you can set min value and tickInterval.
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.min (should be timestamp too)
Also you can define pointStart for serie: http://api.highcharts.com/highcharts#plotOptions.series.pointStart and pointInterval http://api.highcharts.com/highcharts#plotOptions.series.pointInterval