gnh1201/seeddms-code
1
0
Fork 0
mirror of https://git.code.sf.net/p/seeddms/code synced 2025-05-13 13:11:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add tooltips for line graph

Browse Source
This commit is contained in:
Uwe Steinmann 2014-04-08 15:28:38 +02:00
parent 9da9b10b88
commit e9b0968b93
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
views/bootstrap/class.Charts.php
View File

@ -74,6 +74,16 @@ echo "<div class=\"well\">\n";
?> ?>
<div id="chart" style="height: 400px;" class="chart"></div> <div id="chart" style="height: 400px;" class="chart"></div>
<script type="text/javascript"> <script type="text/javascript">
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
padding: "5px",
color: "white",
"background-color": "#000",
"border-radius": "5px",
opacity: 0.80
}).appendTo("body");
<?php <?php
if($type == 'docsaccumulated') { if($type == 'docsaccumulated') {
?> ?>
@ -84,10 +94,33 @@ if($type == 'docsaccumulated') {
} }
?> ?>
]; ];
$.plot("#chart", [data], { var plot = $.plot("#chart", [data], {
xaxis: { mode: "time" } xaxis: { mode: "time" },
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
}); });
$("#chart").bind("plothover", function (event, pos, item) {
if(item) {
var x = item.datapoint[0];//.toFixed(2),
y = item.datapoint[1];//.toFixed(2);
$("#tooltip").html($.plot.formatDate(new Date(x), '%e. %b %Y') + ": " + y)
.css({top: pos.pageY-35, left: pos.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
<?php <?php
} else { } else {
?> ?>
@ -120,19 +153,8 @@ foreach($data as $rec) {
} }
}); });
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
padding: "5px",
color: "white",
"background-color": "#000",
"border-radius": "5px",
opacity: 0.80
}).appendTo("body");
$("#chart").bind("plothover", function (event, pos, item) { $("#chart").bind("plothover", function (event, pos, item) {
if(item) { if(item) {
// console.log(item.series);
var x = item.series.data[0][0];//.toFixed(2), var x = item.series.data[0][0];//.toFixed(2),
y = item.series.data[0][1];//.toFixed(2); y = item.series.data[0][1];//.toFixed(2);
@ -143,9 +165,7 @@ foreach($data as $rec) {
$("#tooltip").hide(); $("#tooltip").hide();
} }
}); });
function labelFormatter(label, series) { function labelFormatter(label, series) {
console.log(series);
return "<div style='font-size:8pt; line-height: 14px; text-align:center; padding:2px; color:black; background: white; border-radius: 5px;'>" + label + "<br/>" + series.data[0][1] + " (" + Math.round(series.percent) + "%)</div>"; return "<div style='font-size:8pt; line-height: 14px; text-align:center; padding:2px; color:black; background: white; border-radius: 5px;'>" + label + "<br/>" + series.data[0][1] + " (" + Math.round(series.percent) + "%)</div>";
} }
<?php <?php