Highcharts: Month seems to be off by one day - javascript

I have a highcharts which appears to show one day too many in the x-axis. This occurs when I set endOnTick to true, and if I instead set endOnTick to false the x-axis seems to be wrongly aligned (not in center, as if there were to be another tick that's supposed to be there). As you can see from my fiddle I am using moment.js to set the min/max dates, but startOf('month') works fine and endOf('month') should show the last day of the month, shouldn't it? I've tried to set UTC to false as you can see in the fiddle, but that didn't work. I am sorry if I'm missing something obvious here but I am quite new to both Highcharts and moment.js so please be patient with me :) Any tips would be appreciated.
Here is my code:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var myChart = $('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: moment().format('MMMM') + ' ' + moment().format('YYYY')
},
xAxis: {
title: {
text: 'DATE'
},
type: 'datetime',
endOnTick: true,
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e'
},
min: moment().startOf('month'),
max: moment().endOf('month')
},
yAxis: {
title: {
text: null
},
max: 4,
min: 1,
allowDecimals: false,
tickInterval: 1
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
},
animation: false
}
},
series: [{
data: [
[Date.UTC(2017, 6, 25), 3.2],
[Date.UTC(2017, 7, 1), 2],
[Date.UTC(2017, 7, 5), 1.75],
[Date.UTC(2017, 7, 10), 2.4],
[Date.UTC(2017, 7, 15), 2.7],
[Date.UTC(2017, 7, 23), 2.3],
[Date.UTC(2017, 7, 28), 3],
[Date.UTC(2017, 7, 31), 2]
]
}, {
data: [
[Date.UTC(2017, 7, 1), 3],
[Date.UTC(2017, 7, 5), 2.75],
[Date.UTC(2017, 7, 10), 3.2],
[Date.UTC(2017, 7, 15), 2.3],
[Date.UTC(2017, 7, 23), 3.3],
[Date.UTC(2017, 7, 28), 1.5]
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
})
}
)
And here is a fiddle with the same code: https://jsfiddle.net/t0eeab8b/1/
Thanks in advance!

Related

ApexChart fixed labels x asis for rangeBar chart

This is my chart option code:
const options = {
chart: {
type: "rangeBar",
},
series: [
{
data: [
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 12, 30), Date.UTC(2019, 3, 2, 13, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 15, 30), Date.UTC(2019, 3, 2, 16, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 18, 0), Date.UTC(2019, 3, 2, 19, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 22, 0), Date.UTC(2019, 3, 2, 24, 0)],
},
],
},
],
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
type: "datetime",
},
};
And this is the result:
I don't know how to add fixed labels from 00:00 to 24:00 hour format. That's my problem.
I also did this but doesn't work:
xaxis: {
type: "category",
categories: ["00:00", ..., "24:00"]
},
Thanks

Finally i fixed this in this repo:
https://github.com/mortezasabihi/apexchart-timeline

Problems using provider in conjunction with a controller for Highcharts graphs in angularjs

I'm building an angular web app with highcharts integration (highcharts-ng)
What I did was set up a factory provider declaring my chart config options object as follows:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
var sentimentGraph = {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
series: [
{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}
],
loading: false
};
return sentimentGraph;
});
I then set up a controller for my graphs where I pull the options object from my factory provider
angular.module('socialDashboard')
.controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) {
// Set up chart on summary page
$scope.SentimentChartSummaryConfig = SentimentChartFactory;
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
// Set up chart on Sentiment Page
$scope.SentimentChartConfigMain = SentimentChartFactory;
$scope.SentimentChartConfigMain.options.chart.height = 450;
});
This is where I declare my chart:
Summary Page:
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart>
</div>
Sentiment Page: (Different view)
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart>
</div>
The problem that I am having is that even though I declared a different value for the config atttribute both graphs are displaying as the same height (450). Why is this and how do I fix this?

The problem is because in both cases you deal with the same object, because both SummaryConfig and MainConfig are references to the same SentimentChartFactory object.
The simplest solution in this case is to make service return new object every time:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
return {
getConfig: function() {
return {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels: {
enabled: false
}
},
series: [{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}],
loading: false
}
}
};
});
and then use it like:
$scope.SentimentChartSummaryConfig = SentimentChartFactory.getConfig();
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
$scope.SentimentChartConfigMain = SentimentChartFactory.getConfig();
$scope.SentimentChartConfigMain.options.chart.height = 450;

How to show time values in stacked column using High stock

I am trying to created stacked columns in Highstock. in following js fiddle.
The code is
//http://jsfiddle.net/nishants/y0t130f3/2/
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '' +
this.series.name + ': ' + this.y + '' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
}]
});
});
The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date
unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is
very straight forward => How to put the dates on x axis of highstock.

Unlike HighCharts, I don't think HighStock support the xAxis.categories config.
However, you could specify the dates directly in serie.data like this:
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
[new Date(2014, 5, 13).getTime(), 4],
...
]
}
And the dates must be in ascending order, otherwise the chart will be broken.
Another thing is you might want to set this to make columns align with date labels correctly.
plotOptions: {
column: {
...
dataGrouping: {
enabled: true,
forced: true,
units: [
['day', [1]]
]
}
}
},
Example JSFiddle: http://jsfiddle.net/1xLny72q/2/
Hope this helps.

When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart
like in your code
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
its not work in HighStock
for this you need to pass these each separate value on each series like below
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
...
]
},name: 'Jane',
data: [
[new Date(2014, 5, 11).getTime(), 2],
[new Date(2014, 5, 12).getTime(), 3],
...
])
}, {
name: 'Joe',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 4],
...
]}
and as per #ranTarm dates must be in ascending order and dataGrouping as mention in his comment

Highcharts spline and columnrange inverted

I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?

Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.

Highcharts columns have no width (seemingly arbitrarily)

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)

Categories

Resources