I want to show multiple lines on a chart plotting numbers and dates. I want to X Axis to always show all the months, starting at January through to December, even if there is only data for, say, february and march. I have created a fiddle here. How can I do this? You can see in the fiddle that only the months I have data for show.
I would also like the X axis to show 'Jan', 'Feb' etc, and no numbers. Is this possible?
My code so far is:
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: "datetime"
},
series: [{
data:[[1456444800000,173682],[1456531200000,21136],[1457049600000,21136],[1457395200000,199158],[1457913600000,413265],[1458777600000,21136],[1459209600000,199158],[1459987200000,413265],[1460505600000,21136],[1461024000000,199158],[1461715200000,413265],[1462406400000,199158]]
}]
});
Set a min and max value for your x axis:
xAxis: {
type: "datetime",
tickInterval:86400000 * 30,
min: Date.UTC(2016,0,1),
max: Date.UTC(2016,11,31)
}
Example:
http://jsfiddle.net/jlbriggs/ejjtc73h/2/
Related
I am using highcharts.js to generate my graph. Actually , I am formatting time and populating in x-axis ticks and I am giving Y-axis label. when there is single json response both the x-axis ticks and y-axis labels are coming properly but when there is more than a single response x-axis ticks get disbled and y-axis label is coming without any error.\
xAxis: {
type: 'datetime',
tickInterval: 2 * 3600 * 1000,
min: stime,
max: etime,
dateTimeLabelFormats: {
hour: '%I %p'
},
title: {
text: undefined
}
},
yAxis: {
title: {
text: "Calories History"
},
min: 0
},
help me to resolve the issue I want the y-axis label as well as x-axis ticks when there are more resposne in my json response
We are using Highchart's API for generating some line charts. One of the requirement for these charts is that we should end the xAxis scale with the last xAxis value of the data provided and show that tick label for it.
Data: [[2014-08-28,.434],[2014-10-17,.234],[2014-11-5,.134],[2015-01-12,.274]]
Expected:
Last plot for xAxis on: 2015-01-12 (Line chart finish at the end of the chart area)
Last tick label for xAxis: Jan '12
Actual (http://jsfiddle.net/u2pa6qqL/3/):
Last plot for xAxis: 2015-01-12(gap between the last plot and the end of the chart area)
Last tick label for xAxis: Feb'15
$(function () {
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: 'datetime',
endOnTick: true,
dateTimeLabelFormats: {
day: '%b %e'
},
},
series: [{
data: [[new Date('2014-08-28').getTime(),.434],[new Date('2014-10-17').getTime(),.234],[new Date('2014-11-5').getTime(),.134],[new Date('2015-01-12').getTime(),.274]]
}]
});
});
I have tried with highchart settings showLastLabel, endOnTick, the xAxis extreme MAX & Min and setExtreme. nothing worked.
Can anyone please shed some light on this,
Thanks,
Sarath
You can use tickPositions or tickPositioner to print ticks in defined positions.
I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?
You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/
I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.
I use Highstock to display a graph showing the number of visitors in column and I need the zoom to display the number of visitors per day, per month and per year
In my graph I can display a number of visitor per day, but I would like display a number of visitor per month and per year too.
But when I look my graph (per month) I don't have a graph with 12 column, I have a graph with 365 column (one per day).
I use the type datetime for xAxis, but it doesn't work...
x rangeSelector: {
inputDateFormat:'%d.%m.%Y',
inputEditDateFormat:'%d.%m.%Y',
buttonTheme: {
width: 80
},
buttons: [{
type: 'day',
count: 7,
text: 'day'
}, {
type: 'month',
count: 12,
text: 'month'
}, {
type: 'year',
count: 1,
text: 'years'
}],
selected: 0
},
Axis: {
minTickInterval: 24 * 3600 * 1000,
type: 'datetime',
title: {
text: 'Time'
},
dateTimeLabelFormats: {
day: '%d.%m<br/>%Y'
}
}
How can I have a graph with "a addition of the visitors per column" ?
Below is what I get now. The first graph is OK, but the second, it's not OK. I would 12 columns and not 365.
Per Days:
Per Years:
Range selector buttons affecting to the time span which should be displayed on a chart. If you want to display specific unit on a chart, you need to use forced dataGrouping, see:
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.forced
Example could be found here: http://www.highcharts.com/stock/demo/candlestick-and-volume
I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.
When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:
mainChart = new Highcharts.StockChart({
chart: {
renderTo: 'linegraph'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 d'
}, {
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'month',
count: 1,
text: '1 mo'
}, {
type: 'year',
count: 1,
text: '1 yr'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
series: [{
name: 'Electricity usage (kWh)',
data: graphData,
tooltip: {
valueDecimals: 2,
valueSuffix: "kWh"
}
}],
});
I had the same issue, but it was everything normal with timestamps on X axis.
Resolved it by sorting data by ascending (provided firstly in reversed order).
It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.