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...
}
Related
I've been working so hard to make a chart render automatically but now I've come to the situation where all the previously prepared data is not being useful.
I'm passing to a js chile some user data in order to render a chart...then I do some extra treatment in javascript to finish with the data preparation. I'm using a template which has a predefined way of showing the chart.
This is what I've done so far:
if ($('#interactive-chart').length !== 0) {
var previous = '';
var usersData = data['periodicity'];
var months = [[1,0], [2,0], [3,0], [4,0], [5,0], [6,0], [7,0], [8,0], [9,0], [10,0], [11,0], [12,0], [13,0]];
var overlapped = months.slice();
var monthConn = [];
for (var i = 0; i < usersData.length; i++) {
var user = usersData[i].vusr_user;
if (usersData[i].yearly == currentYear) {
if (user !== previous) {
previous = user;
if (i !== 0) {
monthConn.forEach(function(monthData){
overlapped[monthData[0]-1][1] = monthData[1];
});
var overlapped = months.slice();
var monthConn = [];
}
monthConn.push([usersData[i].month, usersData[i].count]);
}else{
monthConn.push([usersData[i].month, usersData[i].count]);
}
};
};
Next to that there is this jQuery predefined function:
$.plot($("#interactive-chart"), [{
data: data1,
label: "Page Views",
color: blue,
lines: {
show: true,
fill: false,
lineWidth: 2
},
points: {
show: true,
radius: 3,
fillColor: '#fff'
},
shadowSize: 0
}, {
data: data2,
label: 'Visitors',
color: green,
lines: {
show: true,
fill: false,
lineWidth: 2
},
points: {
show: true,
radius: 3,
fillColor: '#fff'
},
shadowSize: 0
}],
{
xaxis: {
ticks: xLabel,
tickDecimals: 0,
tickColor: '#ddd'
},
yaxis: {
ticks: 10,
tickColor: '#ddd',
min: 0,
max: 200
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#ddd",
borderWidth: 1,
backgroundColor: '#fff',
borderColor: '#ddd'
},
legend: {
labelBoxBorderColor: '#ddd',
margin: 10,
noColumns: 1,
show: true
}
}
);
and I wish to pass the data from my function (the 1st one I wrote) to the second on where it says "data1", "data2"...
How am I suppose to do that?
Assuming your prepared data is formatted in a way that can be used by the chart, it's as easy as:
data:monthConn,
That's pretty much it really.
I am trying to implode my php variable which is an array as one variable into my flot chart.
I implode my PHP variable with JS chart and it worked for me as you can see in the image :
I am trying to get Flot bar data same output with JS Bar chart. Any idea please ?
Thank you
var data = [ 0, <?php echo '['.implode(", ", $studentages).']'?>];
var dataset = [
{ label: "Exams By Student Age", data: data, color: "#5482FF" }
];
var ticks = [ [0, "0-2"]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.6 ,
vertical: true ,
show:true
},
xaxis: {
axisLabel: "Exams By Student Ages",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
tickLength:0,
ticks: ticks
},
yaxis: {
axisLabel: "Number of Exams",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
max:20, tickSize:1,
tickFormatter: function (v, axis) {
return v;
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
clickable: true,
borderWidth: 1,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plotclick", function (event, pos, item) {
var links = [ '../../Chart/StudentTests/result.php'];
if (item)
{
//alert("clicked");
// window.location = (links[item.dataIndex]);
window.open(links[item.dataIndex], '_blank');
console.log(item);
}
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 - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 10
}).appendTo("body").fadeIn(200);
}
That's what I am getting after I used your code.
If $studentages is an array of integers, this means that
var data = [ 0, [1, 2, 3, 4, 5]];
This is not the correct format for flot data which expects an array of arrays.
So, try:
var data = $.map(<?php echo '['.implode(", ", $studentages).']'?>, function(val, idx){
return [[idx, val]];
});
var dataset = [
{ label: "Exams By Student Age", data: data, color: "#5482FF" }
];
var ticks = [ [0, "0-2"] ]; // expand this for each idx in data
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/
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!
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?