Develop Reference

Using markings In Flot on a time axis

I have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:
Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.
So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:
I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on
So my question is: How do I add a marking to the graph that appears on a specific date with flot?
EDIT
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));

Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?
You'll have to set the marking from and to to the timestamp you want the marking to appear:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle has a working example of a time series axis and markings.

jQPlot Date On X axis Tick Interval Isn't Working

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.

How to show a single marker in the jqplot graph

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
}
});
});

Data labels cutting off in jqPlot

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.

Redrawing jqPlot

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.