In HighCharts how to set number of xAxis autoly? - javascript

As you can see , I'm using HighStock of HighCharts now in order to have scroll bar.
I want to set max number of xAxis. It works if I code like this:
xAxis: {
max: 8
categories: data.categories
}
Here is the rendering:
 
But when it concern to some data that hasn't so many xAxis data , it will show like this :
What I want to realize is that when the data is less than a certain number,for example, 8, It will occupy the chart instead of leaving so many blank.
Here is the pic:

The solution is check if categories array is bigger than 8, if not then set maximum value as categories length
xAxis: {
max: categories.length < 8 ? categories.length - 1: 8,
categories: categories
},
Example:
http://jsfiddle.net/x8azpjcw

Related

How can I change x-axis position in dygraph?

I am new to dygraph and I have one issue: while creating dygraph using Javascript negative values of the y-axis are displayed above the x-axis 0 value.
Here is my code :
g6 = new Dygraph(document.getElementById('smooth-line'),
functionData,
{
labels: ['Year', 'First','Second'],
series: {
First: {
plotter: smoothPlotter,
color: '#26a69a ',
strokeWidth: 2
},
Second: {
plotter: smoothPlotter,
color: '#e57373 ',
strokeWidth: 2
}
},
legend: 'always',
gridLineColor: '#ddd',
//valueRange: [1.0, 30.0],
//yRangePad :[-20.0,20.0]
});
}
and the output of this code is:
Output of the code
As in the image x-axis is below to -ve values of y-axis so how to set position of x-axis at the 0 value of y-axis?
First a comment. Posting examples that are not self-contained takes a lot longer to troubleshoot.
This link: http://jsfiddle.net/yLytg398/1/ provides a reasonable approximation to your code that can be tested.
You actually had the solution already in your code, valueRange is what you need. You can even use valueRange: [0, null] to automatically calculate the upper bound.
Correction: I just realized that you actually wanted to have the x axis with labels moved into the middle of the graph, my solution does not address this, but for your example picture it still works, because valueRange can set the lower end of the y range to zero, so that the x axis is at y = 0.

google visualizations align 0 axis with two different y-axes

I'm creating a combochart with google's visualization library. I'm charting a store's traffic and revenue over the course of a day. I have set my draw options to
var options = {
seriesType: "bars",
series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}},
vAxes:{0:{title: "Revenue"},1:{title: "Traffic"}},
hAxis: {title: "Time", showTextEvery: 1},
};
which sets up the Revenue on a different Y-axis than the traffic. A sample of the data might look like this:
var data = [
// Time Revenue Traffic
['10:00-10:30', '132.57', '33'],
['10:30-11:00', '249.23', '42'],
['11:00-11:30', '376.84', '37'],
[... etc ..]
];
the problem I'm having is that Traffic values will always be positive whereas Revenue could be a negative number if there were returns. If that happens my Revenue axis will start at a negative value like -50 while Traffic starts at 0 and the horizontal baselines don't line up. I would like to have it so that even if Revenue has values less than 0 it's 0 axis will line up with the Traffic 0 axis.
Here's an example to show what's happening. See how the Traffic 0 axis is on the same level as the Revenue's -50 axis. I would like to know how to raise the Traffic baseline to the same level as the Revenue 0 axis.
I have a method that I am reasonably certain will always produce axis values with the same 0 point (I haven't proved that it can't produce axes with different 0 points, but I haven't encountered any).
To start off, get the range of the two date series (for our purposes, column 1 is "revenue" and column 2 is "traffic"):
var range1 = data.getColumnRange(1);
var range2 = data.getColumnRange(2);
For each series, get the max value of the series, or 1 if the max is less than or equal to 0. These values will be used as the upper bounds of the chart.
var maxValue1 = (range1.max <= 0) ? 1 : range1.max;
var maxValue2 = (range2.max <= 0) ? 1 : range2.max;
Then calculate a scalar value relating the two upper bounds:
var scalar = maxValue2 / maxValue1;
Now, calculate the lower bounds of the "revenue" series by taking the lower of range1.min and 0:
var minValue1 = Math.min(range1.min, 0);
then multiply that lower bound by the scalar value to get the lower bound of the "traffic" series:
var minValue2 = minValue1 * scalar;
Finally, set the vAxis minValue/maxValue options for each axis:
vAxes: {
0: {
maxValue: maxValue1,
minValue: minValue1,
title: 'Revenue'
},
1: {
maxValue: maxValue2,
minValue: minValue2,
title: 'Traffic'
}
}
The net result is that positive and negative proportions of each series are equal (maxValue1 / (maxValue1 - minValue1 == maxValue2 / (maxValue2 - minValue2 and minValue1 / (maxValue1 - minValue1 == minValue2 / (maxValue2 - minValue2), which means the chart axes should end up with the same positive and negative proportions, lining up the 0's on both sides.
Here's a jsfiddle with this working: http://jsfiddle.net/asgallant/hvJUC/. It should work for any data set, as long as the second data series has no negative values. I'm working on a version that will work with any data sets, but this should suffice for your use case.

Highcharts - How to start x axis from an arbitrary value

I am using [highcharts][1] to plot a graph between a range of values from data base. I want by X Axis values to start from the user input.
For example, if the user wants the values between range 50 and 100, I want my x axis to start from 50.
The range would be of variable size. The size of the data is large so I can't do something like getting all and using min and max for display.
Thanks in advance.
This is my chart object. I have two input fields for user that I use to query the database and return rows in between.
I use multiple type of graphs. The problem is that I have no idea on how to define the start of X axis as 50 if I am getting data from database between 50 and 100. It shows 50 values but start them from 0 upto 50.
I tried min 10 and so. That do start from that value but skips the first 10 or so values.
The input field has id 'lower' and 'upper'.
var options = {
chart: {
renderTo: ctn.attr('id'),
type: $('#graph_type option:selected').val(),
zoomType: 'x'
},
title: {
text: $('#graph_title').val()
},
subtitle: {
text: "Graph - " + (graph_no + 1)
},
xAxis: {
title: {
text: $('#x_label').val()
}
},
yAxis: {
title: {
text: $('#y_label').val()
}
},
credits: {
enabled: false
},
series: []
};
Thanks everyone for the response. I found the solution. Min max was not actually doing as I wanted it to.
I found the solution.
To start the x axis value from desired value use
plotOptions:
<your_graph_type>:{
pointStart: <your_value>
}
I think setting min and max for xAxis will work.
Refer this link
and you can say
startOnTick: false,
endOnTick:false
For example refer : example
I have values set min of y to 20 and max to 217,
yAxis: {
min: 20,
max:217,
startOnTick: false,
endOnTick:false
},
See how ther chart is displayed.
I hope this helps.

How do I set a minimum upper bound for an axis in Highcharts?

I'm trying to set a minimum upper bound, specifically:
The Y axis should start at 0
The Y axis should go to at least 10, or higher (automatically scale)
The upper bound for the Y axis should never be less than 10.
Seems like something Highcharts does, but I can't seem to figure out how. Anybody have experience with this?
Highcharts doesn't seem to have an option for doing this at chart creation time. However, they do expose a couple methods to interrogate the extremes and change the extremes, getExtremes() and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) found in their documentation.
So, a possible solution (after chart creation):
if (chart.yAxis[0].getExtremes().dataMax < 10) {
chart.yAxis[0].setExtremes(0, 10);
}
yAxis[0] references the first y-axis, and I'm assuming that you only have one axis in this case. The doc explains how to access other axes.
This isn't ideal, because the chart has to redraw which isn't too noticeable, but it's still there. Hopefully, Highcharts could get this sort of functionality built in to the options.
A way to do this only using options (no events or functions) is:
yAxis: {
min: 0,
minRange: 10,
maxPadding: 0
}
Here minRange defines the minimum span of the axis. maxPadding defaults to 0.01 which would make the axis longer than 10, so we set it to zero instead.
This yields the same results as a setExtreme would give. See this JSFiddle demonstration.
Adding to Julian D's very good answer, the following avoids a potential re-positioning problem if your calculated max varies in number of digits to your desired upper bound.
In my case I had percentage data currently going into the 20's but I wanted a range of 0 to at least 100, with the possibility to go over 100 if required, so the following sets min & max in the code, then if dataMax turns out to be higher, reassigns max up to it's value. This means the graph positioning is always calculated with enough room for 3-digit values, rather than calculated for 2-digits then broken by squeezing "100" in, but allows up to "999" before there would next be a problem.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
thisSetMax = this.yAxis[0].getExtremes().max;
thisDataMax = this.yAxis[0].getExtremes().dataMax;
if (thisDataMax > thisSetMax) {
this.yAxis[0].setExtremes(0, thisDataMax);
alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax);
}
}
}
},
title: {
text: 'My Graph'
},
xAxis: {
categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013']
},
yAxis: {
min: 0,
max: 100,
title: {
text: '% Due Tasks Done'
}
}
//Etc...
});
HigtCharts has a really good documentation of all methods with examples.
http://www.highcharts.com/ref/#yAxis--min
In your case I think you should the "min" and "max" properties of "yAxis".
min : Number
The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. Defaults to null.
max : Number
The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. Defaults to null.
If you are creating your chart dynamically you should set
min=0
max=10 , if your all data values are less then 10
and
only min=0, if you have value greater then 10
Good luck.
Try setting the minimum value of the axis and the interval of the tick marks in axis units like so:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
min: 0,
max: 10,
tickInterval: 10
}
});
Also don't forget to set the max value.
Hope that helps.

Highcharts Column Chart overflowing the plot area

The problem is as follows:
If I have a very sparsely populated date time x axis with column chart type then some columns are getting cut.
Here is a fiddle example: http://jsfiddle.net/qzqnX/
In this example, I have two columns and the column on extreme ends is getting cut.
If I increase data to have 3 columns, one of the series gets completely hidden.
Here is fiddle example: http://jsfiddle.net/GrKKt/
I would like to have the columns displayed within the plot area and not get partially cut or hide. It would also be nice if they draw with some margin from the plot area extremities. Thanks.
I have found two solutions to the problem above:
First solution as given in first answer is to add nulls. I have found that adding two nulls is optimum and works fine. Even if you have lots of series in your data.
Example: http://jsfiddle.net/vwzeP/
Second solution is to add minPadding, maxPadding to xaxis. There is no need to add nulls to your input either. But highcharts is a little inconsistent in its behavior for padding. So you need to apply different values for min/maxPadding properties. Once you have more than 6 points on datetime x-axis the column width are automatically according to plot area and you can set minPadding/maxPadding to their default of 0.01.
good padding values are following:
switch (numberOfPointsInDataArray) {
case 1:
case 2:
padding = 0.25;
break;
case 3:
padding = 0.13;
break;
case 4:
padding = 0.075;
break;
case 5:
padding = 0.05;
break;
case 6:
padding = 0.03;
break;
}
Example of padding with 2 points in data array: http://jsfiddle.net/J7zsk/
hope this helps others.
The widths of columns are not handled very well when a datetime axis is used, the best way to work around this is to enter null values for the dates inbetween. Like so:
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [29.9, null, null, null, null, null, 71.5],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 1 * 24 * 3600 * 1000 // one day
},
{
data: [29.9, null, null, null, null, null, 71.5],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 1 * 24 * 3600 * 1000 // one day
}]
This will make the calculated widths to be evenly spaced between 7 days in this case. Example on jsfiddle.

Categories