I am working with a jqPlot and was wondering if theres a way to resize/redraw it when someone changes the window size. I know there is a redraw function but im not sure how to really invoke it... Can someone give me some pointers on how to do this?
Here is my code:
$.jqplot('chart1', [line1], {
title:'Users Per Day',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
// tickInterval:'1 week',
tickOptions:{
formatString:'%b %#d, %y',
angle:-30
}
},
yaxis:{
tickOptions:{
formatString:'%.1f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
/*show: true,
zoom: true,
showTooltip: false */
}
});
'line1' is an array thats populated right before this code and chart1 is the div where the chart is plotted.
Any ideas?
Thanks,
Craig
This page on resizable plots is helpful: http://www.jqplot.com/deploy/dist/examples/resizablePlot.html
This is how I solved your particular problem for a project I'm working on (I'll just use your code as the example):
First, assign your plot to a variable:
plot = $.jqplot('chart1', [line1], {
title:'Users Per Day',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
// tickInterval:'1 week',
tickOptions:{
formatString:'%b %#d, %y',
angle:-30
}
},
yaxis:{
tickOptions:{
formatString:'%.1f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
/*show: true,
zoom: true,
showTooltip: false */
}
});
Then on your page add this function:
$(window).resize(function() {
plot.replot( {resetAxes: true } );
});
With resetAxes there it will rescale the axes as well (you do lose any min/max you may have set though). See this page for more info on replot: http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot.
I used
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
plot.replot({});
}, 100);
});
so it doesn't keep replotting for every pixel, but rather at the end of the resize.
Normally jqplot chart occupies the full area which the chart div ID holds. So try to find a way which re-size the div and redraw the chart calling redraw on plot object.
Related
I am writing the code for bar chart using jqplot. When i run the below function :
problem: Only one color is displayed in all three data(the first color)
how do display different color for ticks?
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var d1=${likes[0]};
var d2=${comonelikes[0]};
var d3=${comtwolikes[0]};
var a=[d1,d2,d3];
var ticks = [${myorg},${compOne},${compTwo}];
plot1 = $.jqplot('chart1',[a], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true },
},
seriesColors :[
'#57c1b4','#bd66a9',
'#abb3b6'
],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:ticks,
tickOptions: { mark: null,
fontSize: 0
}
},
yaxis: {
min:0,
max:3000000,
tickOptions: {formatString: '%d'},
numberticks:6
}
},
highlighter: { show: true }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Is there any solution to this?
You need to tell the plot to paint the bars in your colors, using the varyBarColor Renderer Option.
Add it to your seriesDefaults:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true },
rendererOptions: {
// Set varyBarColor to true to use the custom colors on the bars.
varyBarColor: true
}
},
Here is a working jsfiddle example with your code and the additional bar colors.
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
}
});
});
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).