Hy!
I need help with highchart. In xAxis I have datetime formated, that was come from epoch time.
Its displaying the hour:minute:seconds and milliseconds but I don't need millisec.
In codeigniter I have highchart library and I can't find out the solution to hide or remove millisec from xAxis.
Please if somebody have some idea it would be great!
Could you convert the epoch time to string format, like '2012/2/29', then add them into an array.
E.g.
xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
See highchart demo here for example.
If your chart is zoomable you'll have to set the option dateTimeLabelFormats for your xAxis
xAxis: {
...
dateTimeLabelFormats: {
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
}
}
or you can use the label formatter for the xAxis:
xAxis: {
...
labels: {
formatter: function() {
return <whatever format you wish for this.x value>;
}
}
...
}
Related
I am trying to create a stacked bar chart using Highcharts.
I also want to display data labels in the bars, but I only want to display the labels if the bars are long enough to contain them. If the text is longer than the bar, I want to hide the text
Here is an example of the chart I am trying to build:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
return 'text for value '+this.point.y;
}
}
}
},
series: [{
data: [1,2,3,4,5,6,7,8,9,10,11,12]
},{
data: [12,11,10,9,8,7,6,5,4,3,2,1]
}]
});
And here is the jsfiddle link: http://jsfiddle.net/xyszd7p4/
How can I hide the data points if they are too long? In my example, I want to hide the "text for value 1" data label because it does not fit inside the bar.
This answer shows one way of hiding labels that are too long: https://stackoverflow.com/a/49750334. That does not work directly for a bar chart (or for multiple series). But by editing it a little, like this:
chart: {
events: {
load: function() {
this.series.forEach(function(series) {
var points = series.points
points.forEach(function(point) {
console.log(point);
if (point.shapeArgs.height < point.dataLabel.width) { //using shapeArgs.height since this is a bar chart (would be width otherwise)
point.dataLabel.hide();
}
});
});
}
},
type: 'bar'
},
You can acheive what you are after.
Working JSFiddle example: http://jsfiddle.net/ewolden/87c2t4uy/
I am creating a trend report in jasper studio using highcharts reports and I have ran into an issue on how to display default date range when there is no data.
Basically I need to show 6 data points on my x-axis(6 months) as default. This is fine except the data set I am using is dynamic(taken from a mysql query) so sometimes there will be data points for all 6 months but for others there may only be a data point for one month.
How can I get the report to show all 6 months on the x axis even when there are no associated data points?
So after the sql returns my results it would look something like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan']
},
yAxis: {
max: 200
},
series: [{
data: [29.9]
}]
});
So this will just display Jan on the x-axis but I need to display following 5 months also(no data points on the report, they are just labels).
You'll need to fill out the categories and set the xAxis max
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
max: 5,
min: 0
},
series: [{
data: [29.9]
}]
});
http://jsfiddle.net/omw2enjf/
I am new to Highchart.
I have a line chart. X axis is a series of dates, and the Y values are only integers.
How can I make Highchart display only integers on the values of Y axis?
Try to null all values in xAxis or use following code.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
enabled: false
}
}
Please see the example
http://jsfiddle.net/ssgoanb5/
See the Doc: http://api.highcharts.com/highcharts#xAxis.labels.enabled
New Updates:
For avoiding decimals values on graph Axis(x/y), Add allowDecimals attributes.
See the Doc. http://api.highcharts.com/highcharts#yAxis.allowDecimals
yAxis: {
allowDecimals: false,
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
Please check the updated JSfiddle: http://jsfiddle.net/ssgoanb5/6/
I want to render a histogram/line chart using HighCharts.
I don't want to hard code the array which is used by series.
My data that I wish to render is in the object display, which looks like:
0: o, 107983,
1: 1, 347923,
2: 2, 182329,
.
.
.
My code is here:
function RenderChart(display) {
myDisplay = display;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Metric histogram'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
minPadding: 0.05,
maxPadding: 0.05
},
plotOptions: {
line: {
animation: false
},
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [myDisplay]
}]
});
};
This doesn't render the line chart. It renders an empty chart.
run a routine such that the response you get is processed as accepted by the highchart. then you can assign the resultant to the data directly.
try this, it will work
When plotting a line chart where there are values equal to the yAxis.min value, the line is hidden underneath the X Axis.
I have the Y Axis minimum set to 0 and the data set contains zeros
Here is an example:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 0, 0, 0, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
http://jsfiddle.net/egQH8/1/
If I increase the values to say 0.2, you can just see the line beginning to appear: http://jsfiddle.net/2RCdV/1/
Is there anything I can do to get round this?
Remove the min: 0 and add startOnTick: false.
That will make Highcharts compute the min value automatically and since it's no longer starting on the tick it'll draw the 0 yAxis line just a few pixels above the xAxis.
See it running here.
we fixed this like this for 4px lines:
// This fixes the "thin lines at top & bottom of chart" bug
Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
if (includes(['line','spline'], get(this, 'options.chart.type'))) {
this.clipBox.height += 6;
this.clipBox.y -= 3;
}
});