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/
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'm trying to get something like this:
and I'm having trouble with adding those small ticks on the xAxis?
The code I have right now looks something like this: JSFIDDLE DEMO
How in the world do I get those tiny tick marks between the dates? I've read abount tickIntervals, and minorTickIntervals in tha API documentation, but nothing seems to work.
Thank you for any help and guidance.
EDIT: It seems that tick intervals don't work when I have categories in the xAxis options.
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
minorGridLineWidth: 0,
minorTickPosition:'inside',
minorTickLength:10,
minorTickWidth: 1,
minorTickInterval:0.1,
},
I have been stuck on this for a while now and despite several attempts and a lot of research I have yet to find the solution.
I am building charts with two Y axis. Everything works just fine except that the highcharts computed max Y value is always much higher than it should be. Resulting in a zoomed out graph.
I've replicated the problem here : http://jsfiddle.net/9vmtz3nf/
I cannot hardcode any max value as it will always depend on the data coming in from the DB and there is a very wide margin of values possible.
So basically, how can I tweak the options and parameters to make sure the graph max value is set to the closest tick (150/600 in the jsfiddle example) ?
Thank you in advance
$(function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
title: {
text: 'Primary Axis'
},
}, {
title: {
text: 'Secondary Axis'
},
opposite: true
}],
plotOptions: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 124.0, 126.0, 135.6, 111.5, 116.4, 114.1, 95.6, 54.4]
}, {
data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
yAxis: 1
}]
});
});
This is a result of the chart trying to find a common denominator. Even if you do hard code a max value, the chart will behave this way.
Setting the alignTicks property to false will fix this.
chart: {
alignTicks: false
}
Fiddle:
http://jsfiddle.net/jlbriggs/9vmtz3nf/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
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