JQuery Flot チャートに問題があります。棒グラフ (data_campaigns) はまったく表示されませんが、(data_campaigns2) は問題なく表示されます。
ツールチップで両方のチャートのデータを表示する方法も知りたいです。現在、ツールチップにはランダムな X 変数と Y 変数が表示されていますが、クリック数を表示したいと思います。
//Chart - Campaigns
$(function () {
var data_campaigns = [
[1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11],
[1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7],
[1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12],
[1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9],
[1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14],
[1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9],
[1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0],
[1362186000,0],[1362272400,0]];
var data_campaigns2 = [
[1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11],
[1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7],
[1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12],
[1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9],
[1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14],
[1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9],
[1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0],
[1362186000,0],[1362272400,0]];
var plot = $.plot($("#placeholder"),
[ { data: data_campaigns,color:"rgba(0,0,0,0.2)", shadowSize:0,
bars: {
show: true,
lineWidth: 0,
fill: true,
fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] }
}
} ,
{ data: data_campaigns2,
color:"rgba(255,255,255, 0.4)",
shadowSize:0,
lines: {show:true, fill:false}, points: {show:false},
bars: {show:false},
}
],
{
series: {
bars: {show:true, barWidth: 0.6}
},
grid: { show:false, hoverable: true, clickable: false, autoHighlight: true, borderWidth:0 },
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
}
});
function showTooltip(x, y, contents) {
console.log(x+","+y);
var d = new Date(contents *1000);
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month++;
var curr_year = d.getFullYear();
$('<div id="tooltip"><div class="date">'+curr_date + "." + curr_month + "." + curr_year+'<\/div><div class="title text_color_3">'+x+'%<\/div> <div class="description text_color_3">CTR<\/div><div class="title ">'+y+'<\/div><div class="description">Clicks<\/div><\/div>').css( {
position: 'absolute',
display: 'none',
top: y - 125,
left: x - 40,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff',
opacity: 10
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").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,
x);
}
}
});