Develop Reference

Flot chart lines with AJAX, PHP and MySQL

I'm using Flot plugin to get a chart line with two lines (Sales and Purchases) like this example but data is in mysql database and being received via AJAX. So I have this:
HTML:
<div id="graph" class="demo-placeholder"></div>
PHP:
sales.php
<?php
$sql = "SELECT * from sales where YEAR(date)='2013'";
$res = mysql_query($sql);
$return = [];
while($row = mysql_fetch_array($res)){
$return[] = [$row['date'],$row['amount']];
}
echo json_encode(array("label"=>"Sales","data"=>$return));
?>
purchases.php
<?php
$sql = "SELECT * from purchases where YEAR(date)='2013'";
$res = mysql_query($sql);
$return = [];
while($row = mysql_fetch_array($res)){
$return[] = [$row['date'],$row['amount']];
}
echo json_encode(array("label"=>"Purchases","data"=>$return));
?>
So, in my JS code I get this data via AJAX and put it a Flot chart line enabling tooltip:
var purchases,sales;
$.ajax({url: "purchases.php",
type: "GET",
dataType: "json",
success: function(resp)
{
purchases = resp.data; //Showing result:[["2013-02-01","52"],["2013-03-01","40"],["2013-03-28","200"]]
}
});
$.ajax({
url: "sales.php",
type: "GET",
dataType: "json",
success: function(resp)
{
sales = resp.data; //Showing result: [["2013-02-05","502"],["2013-03-16","240"],["2013-03-21","260"]]
}
});
var dataset = [
{
label: "Purchases",
data: purchases,
},
{
label: "Sales",
data: sales,
}
];
var chart_plot_01_settings = {
series: {
lines: {
show: true,
fill: true
},
splines: {
show: false,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 3,
show: true
},
shadowSize: 2
},
grid: {
verticalLines: true,
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#717171'
},
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
xaxis: {
tickColor: "rgba(51, 51, 51, 0.06)",
mode: "time",
tickSize: [1, "month"],
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
ticks: 8,
axisLabel: "Amount",
tickColor: "rgba(51, 51, 51, 0.06)",
},
tooltip: true,
}
if ($("#graph").length){
$.plot( $("#graph"), dataset, chart_plot_01_settings );
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#graph").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
var date = new Date(x);
$("#tooltip").html("Date: " +x + " Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
}
The problem is chart line doesn't display any data, It's in blank. I added a line console.log(sales) after if ($("#graph").length){ line and it shows undefined in console but it shows data if I put result in console inside success AJAX function.
How can I fix it? I'd like some help.
UPDATE
I modified PHP code line:
$return[] = [strtotime($row['date'])*1000,$row['amount']];
I modified JS code adding a show_chart function:
function show_chart(labell,dataa) {
var dataset = [{label: labell,data: dataa}];
var chart_plot_01_settings = {
series: {
lines: {
show: true,
fill: true
},
splines: {
show: false,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 3,
show: true
},
shadowSize: 2
},
grid: {
verticalLines: true,
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#717171'
},
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
xaxis: {
tickColor: "rgba(51, 51, 51, 0.06)",
mode: "time",
tickSize: [1, "month"],
//tickLength: 10,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
ticks: 8,
axisLabel: "Amount",
tickColor: "rgba(51, 51, 51, 0.06)",
},
tooltip: true,
}
$(document).ready(function () {
$.plot($("#graph"), dataset, chart_plot_01_settings);
//Tooltip
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#graph").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
var date = new Date(x);
$("#tooltip").html("Date: " + ('0' + (date.getMonth()+1)).slice(-2) + '/'+ date.getFullYear()+ " | Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
} //show chart
var purchases,sales;
$.ajax({url: "purchases.php",
type: "GET",
dataType: "json",
success: function(resp)
{
purchases = resp.data;
var label1 = resp.label;
show_chart(label1,purchases);
}
});
$.ajax({
url: "sales.php",
type: "GET",
dataType: "json",
success: function(resp)
{
sales = resp.data;
var label2 = resp.label;
show_chart(label2,sales);
}
});
But the problem it's only showing Sales or Purchases chart line and I want to show both chart lines (Sales and Purchases) like this example.
How can I fix it?

Your time data has the wrong format, Flot needs JavaScript timestamps. Instead of
[["2013-02-01","52"],["2013-03-01","40"],["2013-03-28","200"]]
you need
[[1359676800000,"52"],[1362096000000,"40"],[1364428800000,"200"]]
Use
strtotime("2013-02-01 UTC") * 1000
in your PHP code to generate the timestamps (see here).

Finally I could resolve it joining my 2 php files in one and put a final array:
echo json_encode(array($return,$returnn));
In AJAX success:
success: function(resp)
{
var result1 = resp[0];//purchases
var result2 = resp[1];//sales
show_chart(result1,result2);
}
And in show_cart function:
function show_chart(data1,data2) {
var dataset = [{label: "Purchases",data: data1},{label: "Sales",data: data2}];
//and continues...
}

Hide Series on Click with jQuery Flot

I have a Flot graph which I am trying to make it so that when you click a particular legend item it makes that data disappear from the chart.
I am having limited success in getting this to work. I've gotten as far as being able to click a legend item and a series line is removed, but not the points, and it appears to be the wrong line data as well.
Any help on this would be really appreciated :)
var Graphs = function () {
return {
//main function
initCharts: function () {
if (!jQuery.plot) {
return;
}
function showChartTooltip(x, y, xValue, yValue) {
$('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 40,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff'
}).appendTo("body").fadeIn(200);
}
if ($('#site_revenue').size() != 0) {
//site revenue
var previousPoint2 = null;
var plot_statistics = null;
var data = [];
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
$('#site_revenue_loading').hide();
$('#site_revenue_content').show();
var data = [{
label: "Gross Revenue",
color: ['#44b5b1'],
points: {
fillColor: "#44b5b1"
},
data: [
['Sep', 264.41],
['Aug', 6653.98],
['Jul', 921.35],
['Jun', 937.00],
['May', 1839.25],
['Apr', 1561.96],
['Mar', 2289.62],
['Feb', 2661.91],
['Jan', 6021.44],
['Dec', 4129.21],
['Nov', 0.00],
['Oct', 2865.28],
],
idx:1
},{
label: "Tax",
color: ['#8fc2ed'],
points: {
fillColor: "#8fc2ed"
},
data: [
['Sep', 0.00],
['Aug', 2865.28],
['Jul', 2661.91],
['Jun', 6653.98],
['May', 6021.44],
['Apr', 0.00],
['Mar', 2289.62],
['Feb', 1561.96],
['Jan', 921.35],
['Dec', 937.00],
['Nov', 1839.25],
['Oct', 4129.21]
],
idx: 2
}];
var plot_statistics = $.plot($("#site_revenue"), data, {
series: {
lines: {
show: true,
fill: 0.2,
lineWidth: 0,
fill: false,
lineWidth: 3
},
shadowSize: 1,
points: {
show: true,
fill: true,
radius: 4,
lineWidth: 2
},
},
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 18,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
legend: {
show: true,
placement: 'outsideGrid',
container: $('#site_revenue_legend'),
labelFormatter: function(label, series){
return ''+label+'';
}
}
});
$("#site_revenue").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint2 != item.dataIndex) {
previousPoint2 = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]);
}
}
});
$('#site_revenue').bind("mouseleave", function () {
$("#tooltip").remove();
});
}
}
};
}();
jQuery(document).ready(function() {
Graphs.initCharts(); // init index page's custom scripts
});
JSFiddle: http://jsfiddle.net/fxc4vyg3/

You must be tired, you just have an off-by-one error, and you only called the update for the lines, not the points.
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
seriesIdx--; // ***HERE***
previousPoint2[seriesIdx].points.show = // ***AND HERE***
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
Here's the fixed fiddle: http://jsfiddle.net/it_turns_out/fxc4vyg3/3/

Flot Chart show dates

First of all, excuse me for my english!
I want to show a flot chart with jquery. My code is the following:
charts.chart_simple =
{
// data
data:
{
d1: []
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid:
{
color: "#dedede",
borderWidth: 1,
borderColor: "transparent",
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: false,
lineWidth: 2,
steps: false
},
points: {
show:true,
radius: 5,
lineWidth: 3,
fill: true,
fillColor: "#000"
}
},
xaxis: {
mode: "time",
tickColor: 'transparent',
tickDecimals: 2,
tickSize: 2
},
yaxis: {
tickSize: 10
},
legend: { position: "nw", noColumns: 2, backgroundColor: null, backgroundOpacity: 0 },
shadowSize: 0,
tooltip: true,
tooltipOpts: {
content: "%s : %y.3",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
placeholder: "#chart_simple",
// initialize
init: function()
{
// this.options.colors = ["#72af46", "#466baf"];
this.options.colors = [successColor, primaryColor];
this.options.grid.backgroundColor = { colors: ["#fff", "#fff"]};
var that = this;
if (this.plot == null)
{
this.data.d1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var elem = new Array(date, intVal);
this.data.d1[o] = elem;
o++;
}
}
}
this.plot = $.plot(
$(this.placeholder),
[{
label: "Consumo Medio",
data: this.data.d1,
lines: { fill: 0.05 },
points: { fillColor: "#fff" }
}], this.options);
}
};
// uncomment to init on load
charts.chart_simple.init();
The problem is the variable "date". If I put a number it works perfectly.
Variable "date" has this format -> 2014-02-26

You have to use timestamps. See the documentation for explanation and examples.

Thank you very much for your replies.
Finally I found the solution.
var data1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var date = group[e][0];
var year = date.substring(0,4)
var month = date.substring(5,7)
var day = date.substring(8,10)
console.log(year + " | " + month + " | " + day);
var elem = new Array(gd(year, month, day), (group[e][1]/group[e][2]));
data1[o] = elem;
o++;
}
}
var dataset = [
{
label: "Consumo Semana",
data: data1,
color: "#FF0000",
xaxis:2,
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
}
];
var dayOfWeek = ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"];
var options = {
series: {
shadowSize: 5
},
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: 0,
axisLabel: "2012",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
xaxes: [{
mode: "time",
tickFormatter: function (val, axis) {
return dayOfWeek[new Date(val).getDay()];
},
color: "black",
position: "top",
axisLabel: "Weekday",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
{
mode: "time",
timeformat: "%d/%m",
tickSize: [1, "day"],
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}],
grid: {
hoverable: true,
borderWidth: 2,
borderColor: "#633200",
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
},
colors: ["#FF0000", "#0022FF"]
};
$.plot($("#chart_simple_2"), dataset, options);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
The problem was the way that I was introducing date data. With this tutorial I found the answer.
http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html
Thank you very much again!
Regards!

Multi axes flot chart with orderd stacked bars, not stacking neither adjusting bar position

I need help with the following chart, is a multiseries with multiaxes and I need the some bars stacked and others not. I paste the code and here is a demo http://jsfiddle.net/Willem/aAb3E/17/
This are my first axis data (lines not stacked):
var data1 = [
[1375302600000, 33],
[1375300800000, 26]
];
var data2 = [
[1375302600000, 0],
[1375300800000, 12]
];
These are the bars (stacked by user and date(first value)):
var user1_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user1_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user1_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];
var user2_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user2_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user2_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];
I set the dataset options by series; data1 and data2 no bars and stack false; others bars show: true and the order set because I want them to solape by user and datetime.
var dataset = [{
label: "Answer",
data: data1,
bars: {
show: false
},
stack: false,
xaxis: 2
}, {
label: "Not answer",
data: data2,
bars: {
show: false
},
stack: false,
xaxis: 2
}, {
label: "User1_estado1",
data: user1_estado1,
bars: {
show: true,
order:1
},
xaxis: 1,
yaxis: 2,
}, {
label: "User1_estado2",
data: user1_estado2,
bars: {
show: true,
order:1
},
xaxis: 1,
yaxis: 2,
}, {
label: "User1_estado3",
data: user1_estado3,
bars: {
show: true,
order:1
},
xaxis: 1,
yaxis: 2,
}, {
label: "User2_estado1",
data: user2_estado1,
bars: {
show: true,
order:2
},
xaxis: 1,
yaxis: 2,
}, {
label: "User2_estado2",
data: user2_estado2,
bars: {
show: true,
order:2
},
xaxis: 1,
yaxis: 2,
}, {
label: "User2_estado3",
data: user2_estado3,
bars: {
show: true,
order:2
},
xaxis: 1,
yaxis: 2,
}];
Plot them, setting barwith (each half time) this I don´t know how to adjust :(, and the diferent axes, xaxes now by time but I need the xaxe1 to show each user.
var plot = $.plot(
$("#placeholder"), dataset, {
series: {
bars: {
barWidth: 60*30*1000,
align: "center",
fill: true,
},
//pointLabels:{show:true, stackedValue: true},
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 2,
mouseActiveRadius: 10
},
xaxes: [{
show: true,
mode: "time",
timeformat: "%H:%M",
tickSize: [0.5, "hour"],
axisLabel: "Usuario",
axisLabelFontSizePixels: 3,
axisLabelPadding: 5
}, {
show: true,
mode: "time",
timeformat: "%H:%M",
tickSize: [0.5, "hour"],
axisLabel: "Usuarios ocupados",
axisLabelFontSizePixels: 3,
axisLabelPadding: 5
}],
yaxes: {
color: "black",
axisLabel: "Usuarios ocupados",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 8,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5,
tickDecimals: 0
}
});
Here I add some interactive to the graph showing some tooltips.
var previousPoint = null,
previousLabel = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = new Date(item.datapoint[0]);
var y = item.datapoint[1];
var color = item.series.color;
showTooltip(item.pageX, item.pageY, color,
"<strong>" + item.series.label + "</strong><br>" + (x.getMonth() + 1) + "/" + x.getDate() +
" : <strong>" + y + "</strong> llamadas");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 30,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
My problem is to align the bars per user and time (better being stacked) and to not stack the two lines. I also like to show in the axis1 the ticks by user (not the time).
You can see it here http://jsfiddle.net/Willem/aAb3E/17/
Please need some help for driving this :).
Thank you very much!

To prevent the lines from stacking, get rid of some options that you don't really need:
var dataset = [{
label: "Answer",
data: data1,
xaxis: 2
}, {
label: "Not answer",
data: data2,
xaxis: 2
}, ...
To be honest I'm not entirely sure why 'false' caused them to stack; that seems like a bug, but in any case simply removing the option solves the problem, since the default is not to stack.
I'm not clear on what you mean by 'align the bars per user and time'; can you explain?

Flot chart tooltip

I am using Flot interactive chart, the data being displayed is taken in from a datatable.
When the user hover's over a point the tooltip displays "Height(cm) on 6.00 = 168", basically the "168" represents the y value which is correct as it corresponds with the y-axis labels.
However the "6.00" should be a date, as is displayed on the chart along the x-axis, "6.00" is the sequence number , I need to get the label.....
any ideas ?
//Show ToolTip Part 2
function showTooltip(x, y, contents)
{
$('<div id="tooltip">' + contents + '</div>').css(
{
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #333',
padding: '4px',
color: '#fff',
'border-radius': '3px',
'background-color': '#333',
opacity: 0.7
}
).appendTo("body").fadeIn(400);
}
//Show ToolTip Part 1
var previousPoint = null;
$("#VitalsChart").bind("plothover", function (event, pos, item)
{
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item)
{
if (previousPoint != item.dataIndex)
{
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " on " + x + "=" + "<strong>" + y + "</strong>");
}
}
else
{
$("#tooltip").remove();
previousPoint = null;
}
});
//Plot Data
var plot = $.plot($("#VitalsChart"), [{ data: weight, label: "Weight (kg)" },
{ data: height, label: "Height (cm)" }],
{
series:
{
lines:
{
show: true,
lineWidth: 2,
fill: false,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.1 }] }
},
points: { show: true },
shadowSize: 7
},
grid:
{
hoverable: true,
clickable: false,
tickColor: "#ddd",
borderWidth: 1,
minBorderMargin: 10
},
colors: ["red", "blue"],
xaxis:
{
ticks: xLabels,
tickDecimals: 0
},
yaxis:
{
ticks: 11,
tickDecimals: 0
}
});
}

Try:
var x = xLabels[item.datapoint[0] - 1][1];
Your ticks (xLabels) is an array of 2 element arrays. You need just the second element, the label itself.