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.
Related
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.
Hi im using jqplot graph. I need to hide the Circular points that are currently displayed on the plot chart for each value in the array except the last point.
I use the following code to display the chart. I used "show marker : false" option, but it hides all circular in the graph. Please help me how to show only one circular point in the graph.
<div id="chart2"></div>
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var plot1 = $.jqplot('chart2', [line2], {
seriesDefaults: {
showMarker: false
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
I want to achieve the below screen as my output. please help me how this could be done. Any help will be appreciated.
There is no direct way of doing this using jqplot. but you can achieve this by making the following changes: jsFiddle link
$(document).ready(function(){
var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var line3 = [['2012-10-07', 25]];
var plot1 = $.jqplot('chart1', [line2, line3], {
series: [
{
showMarker: false
},
{
showMarker: true
}
],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
formatString: '%m/%d/%Y'
},
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
show: true
},
cursor: {
show: false
}
});
});
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.