In below code y axis values are not readable, I guess its overlapping.
How to set suitable y axis tick range:
$(document).ready(function(){
var line1 = [82,82];
var line2 = [22,22];
var line3 = [0,0];
var ticks = [1,2];$.jqplot('line', [line1, line2, line3], {
animate: true,
axesDefaults:{min:0,tickInterval: 1},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
series: [{lineWidth: 1.5, label: 'Passed'},
{lineWidth: 1.5, label: 'Failed'},
{lineWidth: 1.5, label: 'Skipped'}],
axes: {
xaxis: {
label: "Run Number",
ticks: ticks,
tickOptions: {
formatString: "%'d Run"
},
pad: 1.2,
rendererOptions: {
tickInset: 0.3,
minorTicks: 1
}
},
yaxis: {
label: "TC Number me"
,tickOptions: {
formatString: "%'d Tc"
},
}
},
highlighter: {
show: true,
sizeAdjust: 10,
tooltipLocation: 'n',
tooltipAxes: 'y',
tooltipFormatString: '%d : <b><i><span style="color:black;">Test Cases</span></i></b>',
useAxesFormatters: false
},
cursor: {
show: true
},
grid: {background: '#ffffff', drawGridLines: true, gridLineColor: '#cccccc', borderColor: '#cccccc',
borderWidth: 0.5, shadow: false},
legend: {show: true, placement: 'outside', location: 'e'},
seriesColors: ["#7BB661", "#E03C31", "#21ABCD"]
});
});
You have either to remove the tickInterval option in axesDefaults to let jqplot computes his own ticks or add the numberTicks option in axesDefaults in order to tell jqplot to draw x ticks where x is the number given to the numberTicks option.
If you use axesDefaults:{min:0, tickInterval:1}, jqplot will draw ticks from 0 to your maximal value with an interval of 1 unit (80+ ticks from 0 to 82).
If you use axesDefaults:{min:0}, jqplot will draw 5 ticks (by default) from 0 to your maximal value computing a same gap between two ticks.
If you use axesDefaults:{min:0, tickInterval:1, numberTicks:15}, jqplot will draw 15 ticks starting at 0 and with an interval of 1 unit (15 ticks from 0 to 14).
If you use axesDefaults:{min:0, numberTicks:15}, jqplot will draw 15 ticks from 0 to your maximal value computing a same gap between two ticks.
Choose the option which best fits.
Related
By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively. I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
http://jsfiddle.net/z7eyv/60/
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
I am using Highcharts for Area Chart and displaying 2 y-axis but unable to set different min, max and tick intervals for them.
We need help in implementing multiple y axis with set values of min , max and tick intervals.
We are using Highcharts for Area Chart with 2 Y axis one on left side of the chart and other on right side of the chart.
On left side of Y Axis we need the tick interval to be of 5 which is currently being shown as 20.
Whereas on the right side of Y axis we need the tick interval of 10 which is currently being shown as 20.
Siimilarly the min and max values for both the Y axis needs to be different.
How we can we implement this ?
Appreciate the help.
Below is my highcharts config:
chart: {
type: 'area',
},
title: {
text: null
},
xAxis: {
min: 0,
max: 600,
tickInterval: 50,
title: {
text: ""
}
},
yAxis: [{
min: 10,
max: 40,
tickInterval: 5,
title: {
text: ''
}
},{
min: -30,
max: 30,
tickInterval: 10,
title: {
text: ''
},
opposite: true
}],
size: {
width: 1050,
height: 170
},
series: [{
showInLegend : false,
name: '',
yAxis: 0,
color: 'red',
lineWidth: 1,
data: [33.69, 33.68, 33.68, 33.68, 33.68, 33.86, 33.59, 33.96, 33.89, 33.98]
},{
showInLegend : false,
name: '',
yAxis: 0,
color: 'orange',
lineWidth: 1,
data: [21.71, 30.42, 30.42, 30.42, 30.42, 31.03, 21.63, 29.81, 30.92, 21.63]
},{
showInLegend : false,
name: '',
yAxis: 1,
color: 'black',
lineWidth: 1,
data: [-8.44, -8.65, -8.65, -8.65, -8.65, -8.68, -8.62, -8.77, -8.56, -8.73]
};
you will have to use
alignTicks: false
here is updated fiddle
I'm using http://www.flotcharts.org/. Why do my grid lines disappear?
Here is code for my plot options:
var options = {
grid: {
markings: EVS,
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 1,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 1
}]
}
}
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)", "rgba(255, 255, 255, 1)"],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15
},
labelHeight: 15,
tickLength: 5
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10
},
max: vmax + 20,
min: 0,
minTickSize: 1,
tickSize:20,
tickLength: 10
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60
},
tooltip: true,
tooltipOpts: {
id: 'flotTip', //"flotTip"
content: '%x : %y km/h', //"%s | X: %x | Y: %y"
shifts: {
x: 10, //10
y: 20 //20
},
defaultTheme: true, //true
lines: {
track: true, //false
threshold: 0.01 //0.05
},
onHover: function (flotItem, $tooltipEl) {
if (flotItem.seriesIndex == 1) $tooltipEl[0].innerHTML = "Postój";
}
}
};
I just want simple yaxis lines.
PS. The crosshair is from the crosshair plugin.
Don't set the tickLength option if you want to have the lines at the ticks. Flot doesn't have "grid lines" per se, but tick lines which can run through the grid. If you only want them on one axis, set the option on one axis but not the other.
From the documentation (emphasis mine):
"tickLength" is the length of the tick lines in pixels. By default, the innermost axes will have ticks that extend all across the plot, while any extra axes use small ticks. A value of null means use the default, while a number means small ticks of that length - set it to 0 to hide the lines completely.
The problem is that when I plot a graph, the last x-axis label isn't shown on the axis (even though the value is plotted correctly).
I think I've narrowed it down to the 'minTickSize' value being 1 day, but I need it to be 1 day so I'm not sure how to get around that. I've put it in a jsfiddle here: http://jsfiddle.net/s7x5ef0p/1/
JS:
function plotGraph(graphData){
var graphData = [{
data: graphData.sort(),
color: '#FFF'
}];
$.plot($('#graph'), graphData, {
series: {
points: {
show: true,
radius: 5
},
lines: {
show: true
},
shadowSize: 3
},
grid: {
color: '#FFF',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
minTickSize: [1,"day"],
tickColor: 'transparent'
},
yaxis: {
tickSize: 1
}
});
}
var graphData = [[1430953200000,107],[1430953200000,107], [1430953200000,107],[1430953200000,107],[1430953200000,107]
,[1430953200000,107],[1430866800000,107],[1430780400000,107]];
plotGraph(graphData);
The last label would be centered at the edge of the chart and therefore extend outside the container div.
The simplest workaround is to set the max value for the x axis to a larger value so that the label can be safely placed inside the chart and container.
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
minTickSize: [1,"day"],
tickColor: 'transparent',
max: 1430957400000 // max value from your data + 2 hours
},
updated fiddle
Alternatively you could specify the ticks manually:
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
ticks: [1430780400000, 1430866800000, 1430953200000],
tickColor: 'transparent',
},
updated fiddle
I am trying to deploy barchart using jqplot. Now How to decrease the width of grids and ticks?
I have removed the gridline by setting showGridline to false, But its still showing vertically.
My screen.
I want the x-axis ticks to appear something like this.
my js code.
$(document).ready(function () {
var s1 = [10, 20, 30, 40];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 15
}
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});
May be someone can help?
To remove the gridlines, apply below property on both x-axis and y-axis:
tickOptions: {
showGridline: false
}
In you code you have set the barWidth to 15px. before drawing the graph please make sure the width of the div is no less more than the number of x-axis tixks * 15 (approx).
or
Adjust the width of each bar at runtime based on the width of your div.
Here is the example which solves your problem:
JsFiddle link
HTML Code:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:310px; height:300px;"></div>
Js code:
$(document).ready(function () {
var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 25
},
shadow: false
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});