Refer to the attached image. Date strings from php in format Y-m-d are plotted on the x axis. But as you can see the more dates there are the more quashed up it is. I wanted to use the tickInterval property of jqplot but it just isn't working!
It ignores the interval entirely and just plots each and every day there is. So if i have 1000 days it becomes complete unreadable.
var plot1 = $.jqplot("analyse-bottom-left",[yValues],{
highlighter: { show: true, tooltipAxes: 'both' },
seriesDefaults:{
//renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true},
},
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
},
legend: {
show: true,
placement: 'outsideGrid'
},
//series:seriesNames,
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.dateAxisRenderer },
ticks:xValues,
tickOptions:{
angle:30,
formatString:'Y-m-d'
},
tickInterval:'2 days'
},
yaxis:{
tickOptions: {formatString: '£%d'}
}
}
});
Your xaxis options aren't valid. You have set it as CategoryAxisRenderer and then try to set the ticks as DateAxisRenderer. This won't work because the axis itself needs to use DateAxisRenderer.
Try this:
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
ticks: xValues,
tickOptions:{
angle: 30,
formatString: '%Y-%m-%d'
},
tickInterval: '2 days',
min: xValues[0]
}
I have created a jsfiddle to demonstrate the usage. jqPlot has many quirks - in this case to make tickInterval work you must specify the 'min' value.
Related
How do I keep jqplot options for max, min and numberTicks when I use
plot1.replot({resetAxes: true });
I get shifted chart on the both sideof x axis. Example: chart x axis starts with 0, when I execute replot, my x axis starts with -40.
Here is the fix to your problem:
plot1.replot({
resetAxes:true,
axes: {
xaxis: {
show: true,
label: "Date/Time",
showLabel: false,
showTicks: true,
renderer:$.jqplot.CategoryAxisRenderer
},
yaxis: {
label: 'y1',
showLabel: false,
tickInterval: y1AxisInterval,
min: minYaxis,
max: maxYaxis
}
}
});
Here you can specify your old max and min values, when you replot.
In the below code, i have value at some hours of the given dates. I need 24 points per each day(per hour). So here my graph should have 2 parts(for 2 days) and each part should have 24 points even though some hours have no data. Now its showing the time interval between '2013-10-15 4:00' and '2013-10-16 11:00' ie starting from the 4th hour of first day and ending with the 11th hour of second day. How can I change my graph like so? Give me a solution please
line1=[['2013-10-15 4:00',4], ['2013-10-15 6:00',6.5], ['2013-10-16 9:00',5.7], ['2013-10-16 11:00',9]];
var plot1 = $.jqplot('chart1', [line1], {
title:'Server Activity',
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -40
}
},
series:[{lineWidth:1}],
rendererOptions: {
smooth: true
},
gridPadding:{right:35},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer, tickOptions:{
// formatString:'%b %d, %Y %H:00',
formatString:'%b %d, %Y %H:00',
tickOptions: {
mark: 'outside', // Where to put the tick mark on the axis
show: true, // wether to show the tick (mark and label),
showLabel: true, // w ether to show the text label at the tick,
formatString: '', // format string to use with the axis tick formatter
fontSize:11,
markSize: 10
}
} ,
tickInterval : '1 hour'
//numberTicks: 20
},
yaxis:{
min:0,
tickOptions: {
mark: 'inside', // Where to put the tick mark on the axis
show: true, // wether to show the tick (mark and label),
showLabel: true, // wether to show the text label at the tick,
formatString: '%d' , // format string to use with the axis tick formatter
fontSize:11
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
//series:[{lineWidth:2}],
});
I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});
Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.
I dont seem to be able to get my chart to start on the first date the plot data and finishes on the last one.
$(document).ready(function(){
var line1=[['01-Nov-12',18],['02-Nov-12',18],['03-Nov-12',18],['04-Nov-12',18],['05-Nov-12',18],['06-Nov-12',18],['07-Nov-12',18],['08-Nov-12',18],['09-Nov-12',18],['10-Nov-12',18],['12-Nov-12',0],['13-Nov-12',0],['14-Nov-12',0],['15-Nov-12',0],['16-Nov-12',0],['17-Nov-12',0],['18-Nov-12',0],['19-Nov-12',0],['20-Nov-12',0],['21-Nov-12',0],['22-Nov-12',0],['23-Nov-12',0],['24-Nov-12',0]];
var line2=[['01-Nov-12',20],['02-Nov-12',20],['03-Nov-12',20],['04-Nov-12',20],['05-Nov-12',20],['06-Nov-12',20],['07-Nov-12',20],['08-Nov-12',20],['09-Nov-12',20],['10-Nov-12',20],['12-Nov-12',0],['13-Nov-12',0],['14-Nov-12',0],['15-Nov-12',0],['16-Nov-12',0],['17-Nov-12',0],['18-Nov-12',0],['19-Nov-12',0],['20-Nov-12',0],['21-Nov-12',0],['22-Nov-12',0],['23-Nov-12',0],['24-Nov-12',0]];
var plot2 = $.jqplot('openCloseChart', [line1, line2], {
title:'Opened/Closed Complaints Chart',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
min:0,
tickOptions:{
formatString:'%d'
}
}
},
highlighter: {
show: true
},
cursor: {
show: false,
tooltipLocation:'sw'
},
legend: {
show: true,
location: 'e',
placement: 'outside',
labels:['Opened', 'Closed']
}
});
});
I have created the following example:
http://jsfiddle.net/tBZbf/5/
Can I get the graph to start on the first data point and finish on the last date dynamically? in this example 1rst of November and finish on the 24th.
xaxis:{
min:'01-Nov-12',
max:'24-Nov-12',
},
http://jsfiddle.net/QpjXd/
A more complete answer can be found here:
Why does jQPlot dateAxisRenderer not working correct?
(It just explains better how to add the hooks).
I want to draw chart dynamically..
depends of selection by user. below is screen shot for that..
in this I have doing something line this..
var plot2 = $.jqplot(div, mainArray, {
title:chartValue[1],
seriesDefaults: {
lineWidth:1,
markerOptions: { show:true, size:3 },
rendererOptions: {
smooth: true
}
},
axesDefaults: {
labelOptions:{textColor:'#313233', fontSize:'11px',fontWeight:'Bold', fontFamily:'Arial'}
},
axes:{
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickInset:0
},
//tickRenderer:$.jqplot.CanvasAxisTickRenderer,
tickOptions:{
autoscale:true,
fontSize:'10px',
fontFamily:'Arial',
angle:-90,
formatString: dFormat
},
//min: minDate,
//max: maxDate,
tickInterval:timeInterval
},
yaxis:{
min: 0,
max: maxV.length > 1 ? parseInt(maxV) + ((parseInt(maxV)/10)): parseInt(maxV)+2,
tickOptions: {
formatString: '%d',
fontSize:'10px',
fontFamily:'Arial',
showGridline: true,
showLabel: true
},
base: Math.E,
forceTickAt0: true
}
},
legend: {
show: true,
labels: legendNames,
//placement: 'outsideGrid'
renderer:$.jqplot.EnhancedLegendRenderer,
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 10, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 10 // pixel offset of the legend box from the y (or y2) axis.
},
cursor:{
show:true,
style:'auto',
followMouse:true,
zoom:true,
looseZoom:true,
showTooltip:false
}
});
in this starting of time from 12.00. but i want it near to data. how that`s possible?
Note:
mainArray = data
dFormat = string format for date time
I think you just need to set the min property that you have commented out under xaxis.
Depending on how your mainArray is formatted you may be able to get the first date value with mainArray[0][0][0] or mainArray[0][0]. Or, you may have to set/pass the variable minDate.