I'm trying to chart the duration of something using flot and having some issues. In my sql table I have two datetime columns and I am performing the below select to get the difference between them as a timestamp that works with flot (I think)
$p1Query = $db->rawQuery("SELECT AVG((synth.page2-synth.page1)) AS difference FROM (SELECT (UNIX_TIMESTAMP(pageoneloadtime))*1000 AS page1, (UNIX_TIMESTAMP(pagetwoloadtime))*1000 AS page2 FROM usersession) synth");
$p1Average = floor($p1Query[0]['difference']);
The javascript section of my chart looks like this.
var pageTimeData = [["Page 1",<?= $p1Average ?>],["Page 2",<?= $p2Average ?>],["Page 3",<?= $p3Average ?>],["Page 4",<?= $p4Average ?>]];
$.plot("#pageTimeChart", [ pageTimeData ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
mode: "time",
timeformat: "%M:%S",
minTickSize:[2,"seconds"]
}
});
But I can't figure out why my chart isn't displaying any bars. I have verified that I have loaded the necessary javascript files
I realized it was just a simple type. minTickSize:[2,"seconds"] needs to be minTickSize:[2,"second"]
Related
I have created a dynamic bar graph using jqplot, the problem is that some values are quite big i.e. 10000000 and others are pretty small i.e. 2000 or 10000. Because of this range issue, i am only able to see the bigger valued graphs while the rest dont even appear up or appear as just a line on the axis.
Could someone please let me know how this range issue could be solved?
Following my comment, and your need to achieve a solution which includes jqplot bar chart, i'll suggest illustrating the massive difference of values by adding a second line graph to the plot.
$(document).ready(function(){
var data = [10000000, 5000000,10000,2000];
var options= {
title: 'Bar and Line Chart',
series:[{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5,
fillToZero: true
},
pointLabels: {
show: true,
seriesLabelIndex:1,
hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: ' logarithmic scale',
rendererOptions: { forceTickAt0: true}
}
},
};
$.jqplot('graph', [data,data], options );
});
Here is a working solution in jsfiddle
I have a chart that is being generated using flot. Due to large variation in data and a lot of columns I get following:
where some names are longer when columns and they start covering them. I am trying now to move names so they would stay under the chart.
mechanism I am using ATM
function onCancellationAgentsReceived(series) {
$("#agentcancellations").empty();
$.plot("#agentcancellations", [series], { bars: { show: true, align: "center" }, xaxis: { mode: "categories", tickLength: 0, position :"bottom", } });
}
How do I move labels under the chart?
Im trying to generate graph with jquery Flot.
This is the script Im using:
var plot = $.plot("#placeholder", [
{ data: data2, label: observation_obj.concept_name}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
},
xaxis: {
mode: "time",
timeformat: "%d.%m"
}
});
The result I'm getting is this:
http://i62.tinypic.com/25uk51z.png
My data is contains of two points, I dont know why in the x axis I see 4 points,
Can anyone help?
Thanks
The ticks on the x-axis are automatically generated so that they are evenly spaced on the axis. If you want to change that you can give flot an array of (in your case) timestamps which match the timestamps from your data (only examples here):
xaxis: {
mode: "time",
timeformat: "%d.%m",
ticks: [1383582043000, 1383682043000]
}
See the documentation for more infos / examples.
I am using code below to display some daily statistics:
var data2 = [[[1401897069000, 10], [1401983469000, 20], [1402069869000, 15]]];
$.plot('#pieChart2', data2, {
series: {
bars: {
show: true
},
},
xaxis: {
mode: "time",
timeformat: "%Y/%m/%d"
}
});
Is there any way of setting time axis step because otherwise there are duplicated labels on time axis and bars looks like just lines.
See jsfiddle (Firefox only)
The section "Time Series Data" section of Flot's API.md documents the minTickSize option.
From the documentation:
"...you can specify that you just don't want ticks at a size less than a specific tick size with "minTickSize". Note that for time series, the format is an array like [2, "month"], see the next section."
You can set the minTickSize option as specified in the documentation like so:
$.plot('#pieChart2', data2, {
series: {
bars: {
show: true
},
},
xaxis: {
mode: "time",
timeformat: "%Y/%m/%d",
minTickSize: [1, "day"]
}
}
I've updated your JSFiddle with an example: http://jsfiddle.net/cH29a/3/
I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?
Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):