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!
Related
I am currently working with the creating a bar chart and would like to accomplish the following requirements:
labels for each bar
Center the bars in the middle of the grid
Here is my jquery code:
var data = [[0,206],[1,118],[2,37]];
var dataset = [
{ label: "", data: data, color: "#296292" }
];
var ticks = [[0,"CPU"],[1,"Hung Process"],[2,"Disk Queue"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5, fill: 1
},
xaxis: {
axisLabel: "Alerts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks
},
yaxis: {
//axisLabel: "Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
debugger
$.plot($("#top5Alerts_canvas"), dataset, options);
});
Here is my expectation:
I would like to display the label at the top of each bar, how do i set this?
How do I set the equal width between the grid and the bar tick?
Currently, I am getting this:
Any help would be greatly appreciated. Thanks in advance.
You have to use a plugin for that (or write the code yourself). For example https://github.com/winne27/flot-valuelabels .
You can achieve that by setting min and max values for the x axis.
See the code snippet for the full example.
// valuelabel plugin code (https://github.com/winne27/flot-valuelabels)
!function(a){"use strict";function e(e){e.hooks.draw.push(function(e,t){var l,s,o,i,r,n,d,f,u,b,h,v,x,g,c,L,w,p,m,M,y,z,O,C={},P="left";a.each(e.getData(),function(a,B){if(B.valueLabels.show||B.stack){var k=B.valueLabels.showLastValue,A=B.valueLabels.showMaxValue,S=B.valueLabels.showMinValue,F=B.valueLabels.showTextLabel,V=B.valueLabels.labelFormatter,Z=B.valueLabels.xoffset,T=B.valueLabels.yoffset,I=B.valueLabels.xoffsetMin||Z,D=B.valueLabels.yoffsetMin||T,R=B.valueLabels.xoffsetMax||Z,X=B.valueLabels.yoffsetMax||T,Y=B.valueLabels.xoffsetLast||Z,j=B.valueLabels.yoffsetLast||T,Q=B.valueLabels.valign,W=B.valueLabels.valignLast||Q,q=B.valueLabels.valignMin,E=B.valueLabels.valignMax,G=B.valueLabels.align,H=B.valueLabels.rotate||0,J=B.valueLabels.horizAlign,K=B.valueLabels.horizAlignMin||J,N=B.valueLabels.horizAlignMax||J,U=B.valueLabels.horizAlignLast||J,$=B.valueLabels.fontcolor||"#222222",_=B.valueLabels.shadowColor,aa=B.valueLabels.font||B.xaxis.font||"9pt san-serif",ea=B.valueLabels.hideZero,ta=B.valueLabels.hideSame,la=B.valueLabels.reverseAlignBelowZero,sa=B.valueLabels.showShadow,oa=B.valueLabels.useDecimalComma,ia=B.stack,ra=B.valueLabels.decimals,na=B.valueLabels.useBackground,da=B.valueLabels.backgroundColor,fa=B.valueLabels.useBorder,ua=B.valueLabels.borderColor,ba=B.bars.order||0;B.seriesIndex=a;var ha=null,va=-1e3,xa=-1e3,ga="categories"==B.xaxis.options.mode,ca="categories"==B.yaxis.options.mode;if(O=B.points.show?B.points.radius-B.points.lineWidth/2:0,(S||A)&&"undefined"!=typeof B.data[0]){B.data[0][0]=+B.data[0][0],B.data[0][1]=+B.data[0][1];for(var La=+B.data[0][0],wa=+B.data[0][0],pa=+B.data[0][1],ma=+B.data[0][1],Ma=1;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1],+B.data[Ma][0]<La&&(La=+B.data[Ma][0]),+B.data[Ma][0]>wa&&(wa=+B.data[Ma][0]),+B.data[Ma][1]<pa&&(pa=+B.data[Ma][1]),+B.data[Ma][1]>ma&&(ma=+B.data[Ma][1])}else{S=!1,A=!1;for(var Ma=0;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1]}g=S||A||k;for(var Ma=0;Ma<B.data.length;++Ma)if(null!==B.data[Ma]){if(s=B.data[Ma][0],d=B.data[Ma][1],l=F&&B.data[Ma].length>2?B.data[Ma][2]:!1,g){if(c=!1,S&&pa==d&&!B.bars.horizontal?(c=!0,n=I,h=D,v=q,S=!1):S&&La==s&&B.bars.horizontal?(c=!0,n=I,h=D,x=K,S=!1):A&&ma==d&&!B.bars.horizontal?(c=!0,n=R,h=X,v=E,A=!1):A&&wa==s&&B.bars.horizontal?(c=!0,n=R,h=X,x=N,A=!1):k&&Ma==B.data.length-1&&!B.bars.horizontal?(c=!0,n=Y,h=j,v=W):k&&Ma==B.data.length-1&&B.bars.horizontal&&(c=!0,n=Y,h=j,x=U),!c)continue}else la&&0>d&&!B.bars.horizontal?(n=Z,h=-1*T,"above"==Q?Q="below":"below"==Q&&(Q="above"),v=Q):(n=Z,h=T,v=Q,x=J);if("top"==v&&(v="above"),ga&&(s=B.xaxis.categories[s]),ca&&(d=B.yaxis.categories[d]),!(s<B.xaxis.min||s>B.xaxis.max||d<B.yaxis.min||d>B.yaxis.max)){if(l!==!1)L=l;else{if(L=B.bars.horizontal?s:d,null==L&&(L=""),0===L&&(ea||ia))continue;ra!==!1&&(L=parseFloat(L).toFixed(ra))}if(B.valueLabels.valueLabelFunc&&(L=B.valueLabels.valueLabelFunc({series:B,seriesIndex:a,index:Ma})),L=""+L,L=V(L,{series:B,point:B.data[Ma]}),!ta||L!=ha||Ma==B.data.length-1){if(B.bars.horizontal&&(t.font=aa,y=fa||na?10:6,Math.abs(B.xaxis.p2c(s)-B.xaxis.p2c(0))<t.measureText(L).width+Math.abs(n)+y&&"outside"!=x&&(n=-1*n,x="outside")),oa&&(L=L.toString().replace(".",",")),w=0,ia){var ya=s+"-"+ba;if(C[ya]||(C[ya]=0),w=C[ya],C[ya]=C[ya]+d,!B.valueLabels.show)continue}o=B.xaxis.p2c(s)+e.getPlotOffset().left,f=B.yaxis.p2c(d+w)+e.getPlotOffset().top,(!ta||Math.abs(f-xa)>20||o>va)&&(ha=L,va=o+8*L.length,xa=f,B.bars.horizontal?(b=f,z="middle",s>=0?"outside"==x?(P="left",n+=4):"insideMax"==x?(P="right",n-=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="left",o=e.getPlotOffset().left+B.xaxis.p2c(0)+3+n):"outside"==x?(P="right",n-=4):"insideMax"==x?(P="left",n+=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="right",o=e.getPlotOffset().left+B.xaxis.p2c(0)-4+n),r=o+n):("bottom"==v?(z="bottom",f=e.getPlotOffset().top+e.height()):"middle"==v?(z="middle",M=e.getPlotOffset().top+e.height(),f=(M+f)/2):"below"==v?(z="top",h=h+4+O):"above"==v&&(z="bottom",h=h-2-O),r=o+n,b=f+h,0>=f&&(b+=16),o>=e.width()+e.getPlotOffset().left?(r=e.width()+e.getPlotOffset().left+n-3,P="right"):P=G),t.font=aa,(fa||na)&&(m=t.measureText(L).width+5,m%2==1&&m++,p=parseInt(aa,10)+7,"top"==z?(u=b,b+=3):"bottom"==z?(u=b-p-2,b-=2):"middle"==z&&(u=b-(p+1)/2,b+=1),"right"==P?(i=r-m+1,r-=2):"left"==P?(i=r,r+=3):i=r-m/2,t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0,fa&&(t.strokeStyle=ua,t.strokeRect(i,u,m,p)),na&&(t.fillStyle=da,t.fillRect(i,u,m,p))),t.fillStyle=$,t.save(),sa?(t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=1.5,t.shadowColor=_):t.shadowBlur=0,t.translate(r,b),0!=H&&t.rotate(H*Math.PI/180),t.textAlign=P,t.textBaseline=z,t.fillText(L,0,0),t.restore())}}}}})})}var t={series:{valueLabels:{show:!1,showTextLabel:!1,showMaxValue:!1,showMinValue:!1,showLastValue:!1,labelFormatter:function(a){return a},align:"center",valign:"above",valignMin:"below",valignMax:"above",horizAlign:"insideMax",xoffset:0,yoffset:0,rotate:0,useDecimalComma:!1,decimals:!1,hideZero:!1,hideSame:!1,reverseAlignBelowZero:!1,showShadow:!1,shadowColor:!1,useBackground:!1,backgroundColor:"#cccccc",fontcolor:"#222222",useBorder:!1,borderColor:"#999999"}}};a.plot.plugins.push({init:e,options:t,name:"valueLabels",version:"2.2.0"})}(jQuery);
// code for chart
var data = [
[0, 206],
[1, 118],
[2, 37]
];
var dataset = [{
label: "",
data: data,
color: "#296292",
valueLabels: {
show: true
}
}];
var ticks = [
[0, "CPU"],
[1, "Hung Process"],
[2, "Disk Queue"]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
fill: 1
},
xaxis: {
axisLabel: "Alerts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
min: -0.5,
max: 2.5
},
yaxis: {
//axisLabel: "Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$(document).ready(function() {
debugger
$.plot($("#top5Alerts_canvas"), dataset, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div id="top5Alerts_canvas" style="height: 300px;"></div>
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 getting a strange behaviour in my chart using JQuery Flot.
When I'm plotting an anual chart, the blue fill is inverted like the image below.
The Monthly chart it's OK.
CHART
CODE
var data2014 = [];
var result = [[[1388534400000, 120371436.81027323], [1356998400000,187385608.24066913]]];
var p = 1;
var i = 0;
for (i = 0; i < result.length; i++, p++) {
data2014.push({
label: "Receitas",
data: result[i],
xaxis: p
});
}
var dataMaxSplines = (new Date(new Date().getFullYear() + "/1/1")).getTime();
var graficoTipoSpLines = {
series: {
splines: {
show: true,
tension: 0.19,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: "#d5d5d5"
},
colors: ["#00508F", "#F47920"],
xaxes: [
{
mode: "time",
tickSize: [1, "year"],
tickLength: null,
colors: ["#838383", "#838383"],
timeformat: "%Y",
max: dataMaxSplines
},
{
ticks: false
}
],
yaxis: {
ticks: 4,
tickFormatter: function (val, axis) {
if (val > 999999) {
return val.toString().replace(/\d{6}$/, "M");
} else if (val > 999 && val <= 999999) {
return val.toString().replace(/0{3}$/, 'K');
} else {
return val;
}
}
},
legend: {
backgroundOpacity: 0.5,
noColumns: 1,
position: "nw",
color: "#000000 !important"
}
}
$.plot($("#container"), data2014, graficoTipoSpLines);
http://jsfiddle.net/fbknhrk5/1/
In the series options replace splines with lines. See this updated fiddle.
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/
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?