I plot data with jqPlot using logAxisRenderer to have two logarithmic axes.
Everything is fine except of two problems:
jqPlot creates a lot of empty space between 0 and 1.
There are two zeros on the x-axis, since I format the numbers to "%'i" (one for 0.0 and one for 0.5).
I tried to use min:1 and max:100000 in order to hide the empty space and the zeros. But this didn't work. The resulting plot has no line and all x-axis labels are on the same spot on the left side of the axis.
Here is the code I use to create this plot:
$.jqplot(divId, [ line ], {
title : title,
series:[{showMarker:false}],
axes : {
xaxis : {
label:'Users',
renderer : $.jqplot.LogAxisRenderer,
tickOptions:{
tickDistribution: "power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis : {
label:'Frequency',
renderer : $.jqplot.LogAxisRenderer,
tickOptions:{
tickDistribution:"power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
},
});
You can use force ticks to solve this problem:
$.jqplot(divId, [ line ], {
title : title,
series:[{showMarker:false}],
axes : {
xaxis : {
label:'Users',
renderer : $.jqplot.LogAxisRenderer,
ticks: [1, 10, 100, 1000, 10000],
tickOptions:{
tickDistribution: "power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
// ...
},
});
This does not really solve your problem in a general way, but it does help. For me (jqPlot 1.0.4r1121) setting "min: 1" results in the behaviour you described. Settings both "min: 1" and "max: 10000" works for me but does not set power distributed ticks but even spaced ones.
Related
I have three Y axis and two of which has got multiple spline series to be shown. My data is a time series data and it is all working as expected. Just that the labels of one of the Y axis is mixing up with chart area.
https://codesandbox.io/s/github/ismusidhu/yaxis_alignment_issue_highcharts/tree/master/
You can resolve it by setting appropriate yAxis.offset:
yAxis: [{
title: {
text: "POAI [W/m2]"
},
opposite: true,
offset: 70,
min: 0,
labels: {
format: "{value} W/m2"
}
}]
Demo:
https://codesandbox.io/s/alignment-of-highcharts-tertiary-y-axis-issue-bo7h4
I have created a dynamic bar graph using jqplot, the problem is that some values are quite big i.e. 10000000 and others are pretty small i.e. 2000 or 10000. Because of this range issue, i am only able to see the bigger valued graphs while the rest dont even appear up or appear as just a line on the axis.
Could someone please let me know how this range issue could be solved?
Following my comment, and your need to achieve a solution which includes jqplot bar chart, i'll suggest illustrating the massive difference of values by adding a second line graph to the plot.
$(document).ready(function(){
var data = [10000000, 5000000,10000,2000];
var options= {
title: 'Bar and Line Chart',
series:[{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5,
fillToZero: true
},
pointLabels: {
show: true,
seriesLabelIndex:1,
hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: ' logarithmic scale',
rendererOptions: { forceTickAt0: true}
}
},
};
$.jqplot('graph', [data,data], options );
});
Here is a working solution in jsfiddle
I'm using flot library and I found from the docs that I can send a json object with any option I can right at the charting call.
So let's say I call:
$.plot($("#placeholder"), [ [] ], { yaxis: { show: true, max: 100, min: -100 }, xaxis: { show: true, max: 100, min: -100} });
However this is what I get as result (with a non empty data argument):
But I don't want vertical lines marked at every axis tick, but two lines corresponding to the axis.
I don't want ending with the x=0 and y=0 plots. I would even have to obtains points arrays for it. How can I do this with flot or is there any recommended library to plot x,y points series with not much thrills.
To get lines on the axes, add this to your options object:
grid: { markings: [{ xaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 },
{ yaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }] };
If the other lines are still present after adding this, please provide a more complete example (e.g. a fiddle).
This fiddle uses multiple series and displays an axis for each of them. Is it possible to use a single series to make several Axes? http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-multi-axes/
xAxis:[{
categories:setup.x_mixed,
maxZoom:5,
minPadding: 0.2,
labels:{
"enabled":setup.categories_label,
"y":1,
"style":{
"fontSize":13,
"color":"#999",
fontFamily:"'helvetica neue',helvetica",
whiteSpace:"nowrap",
textOverflow:"clip",
width:"100%",
marginTop:legendSpacing
},
formatter:function () {
return this.value.split("|")[0]
}
},
lineColor:"rgba(255,255,255,0)",
tickWidth:0,
offset:0
}, { // Secondary yAxis
categories:setup.x_mixed,
maxZoom:5,
minPadding: 0.2,
labels:{
"enabled":setup.categories_label,
"y":16,
"style":{
"fontSize":13,
"color":"#999",
fontFamily:"'helvetica neue',helvetica",
whiteSpace:"nowrap",
textOverflow:"clip",
width:"100%",
marginTop:legendSpacing
},
formatter:function () {
return this.value.split("|")[1]
}
},
lineColor:"rgba(255,255,255,0)",
tickWidth:0,
offset:0
}],
You can also use linkedTo paramtetr on extra axis http://api.highcharts.com/highcharts#yAxis.linkedTo
its pretty simple,
declare 2 xAxis same like the yAxis you mentioned in the example with one of them as
opposite:true
As you have only one series set the second axis extremes same as the first one using getExtremes() and setExtremes(), as shown in this fiddle here http://jsfiddle.net/W43Zb/
Hope this will help you
I have been using jqPlot for a project I am in and so far I am quite satisfied with it. Is very complete. However, the feature I am working on right now requires an horizontal bar chart. My issue is that my chart currently shows xaxis ticks as decimal numbers increasing by 0.5. I don't need decimal values. I need integers increasing by 1. My config is a little something like this:
var chartConfig = {
seriesDefaults: {
showMarker: false,
shadowAngle: 135,
pointLabels: {
show: true,
labelsFromSeries: true,
seriesLabelIndex: 2,
edgeTolerance: -50
},
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 0,
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
min: 0,
max: 4,
tickInterval: 1
},
yaxis: {
showTicks: true,
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -50,
labelPosition: 'middle'
}
}
}
};
However, looks like jqPlot is completely ignoring the xaxis tickInterval, min and max option values. My output chart looks as follows:
I need to know what I am doing bad here. My config looks to be okay, but I can't get jqPlot to use the values I pass for the X axis. Any help on this matter will be very much appreciated.
Thanks.
I have been having problem with the tickInterval on horizontal bars also. I found that you have to specify both the min and max along with the tick interval for the axis you need it for.
This you have done but I wanted to state this somewhere as I spent a long time trying to find why tick interval wasn't working and this post kept coming up in my searches so hopefully it will help others.
For your issue, is possibly something to do with your data sets.
If this is still causing you problems maybe post the full script with your values as the code is only partial atm.
Thanks
Richard