jquery - how to put label tooltip on Flot Chart -
jquery - how to put label tooltip on Flot Chart -
hi trying set tooltip on flot chart, below code can body tell me problem.
class="lang-html prettyprint-override"><!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>untitled page</title> </head> <body> <!--[if lte ie 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script> <div id="placeholder" style="width:600px;height:300px;"></div> <p id="choices">show:</p> <p class="graphcontrols"> <input type="button" value="stack"> <input type="button" value="bars"> <input type="button" value="lines"> </p> <p><label><input id="enabletooltip" type="checkbox">enable tooltip</label></p> <script language="javascript" type="text/javascript" > var urldatapart = "3 10 0 1 2 3 4 5 6 7 8 9 " + "'trans1' 20 23 20 40 12 56 10 70 20 30 " + "'trans2' 15 12 25 23 56 34 45 23 12 56 " + "'trans3' 12 45 23 12 34 89 12 70 34 30 "; $(function () { var datasets=[]; var data=urldatapart.split(" "); var seriesnum = parseint(data[0]); var pointnum = parseint(data[1]); var count = 2; var intervals = []; (var = 0; < pointnum; i++) { intervals[i] = data[count]; count++; } (var = 0; < seriesnum; i++) { var d1 = []; var label_str=data[count]; count++; (var j = 0; j < pointnum; j++) { if (j == 0) { d1.push([]); } d1.push([intervals[j], data[count]]); count++; } datasets[i] = {label:label_str,data:d1}; } var = 0; $.each(datasets, function(key, val) { val.color = i; ++i; }); var choicecontainer = $("#choices"); $.each(datasets, function(key, val) { choicecontainer.append('<br/><input type="checkbox" name="' + key + '" checked="checked" id="id' + key + '">' + '<label for="id' + key + '">' + val.label + '</label>'); }); choicecontainer.find("input").click(plotaccordingtochoices); var stack = true, area=true,stackedbar = false, linegraph = true,points=true; $(".graphcontrols input").click(function (e) { var line; e.preventdefault(); stack=true; area=true; stackedbar=false; linegraph=true; points=true; stackedbar = $(this).val().indexof("bars") != -1; area = $(this).val().indexof("stack") != -1; if(stackedbar){ points=false; linegraph=false; } if(!area && !stackedbar){ stack=null; } plotaccordingtochoices(); }); function showtooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #fdd', padding: '2px', 'background-color': '#fee', opacity: 0.80 }).appendto("body").fadein(200); } var previouspoint = null; $("#placeholder").bind("plothover", function (event, pos, item) { 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 + " of " + x + " = " + y); } } else { $("#tooltip").remove(); previouspoint = null; } }); function plotaccordingtochoices() { var info = []; var data1=[[0,0]]; var flag=false; choicecontainer.find("input:checked").each(function () { var key = $(this).attr("name"); if (key && datasets[key]) data.push(datasets[key]); flag=true; }); if(!flag){ $.plot($("#placeholder"), data1, { series:{ stack:true, lines:{ show:true, fill:true, fillcolor: { colors: [ { opacity: 0.7}, {opacity: 10 } ] } }, points:{ show:true }, grid: { hoverable: true, clickable: true }, yaxis: { min: 0 }, xaxis: { tickdecimals: 0 } } }); } if (data.length > 0 && flag){ $.plot($("#placeholder"), data, { series:{ stack:stack, lines:{ show:linegraph, fill:area, fillcolor: { colors: [ { opacity: 0.7}, {opacity: 10 } ] } }, bars: { show: stackedbar, barwidth: .10 }, points:{ show:points }, grid: { hoverable: true}, yaxis: { min: 0 }, xaxis: { tickdecimals: 0 } } }); } } plotaccordingtochoices(); } ); </script> </body> </html>
you've made subtle error in plot options. grid, yaxis, , xaxis options nested within of series options. should top-level options this:
$.plot($("#placeholder"), data1, { series: { stack: true, lines: { show: true, fill: true, fillcolor: { colors: [{ opacity: 0.7 }, { opacity: 10 }] } }, points: { show: true } }, //added close series options grid: { hoverable: true, clickable: true }, yaxis: { min: 0 }, xaxis: { tickdecimals: 0 } });//removed bracket here the key thing enable hoverable business, missing.
in future, please cut down code sample relevant parts. if you're seeing error basic plot phone call , placeholder div, post code. don't need bits creating dataset , toggling (unless causing error). find eliminating complexity in other parts of code, you'll find error having (perhaps not in case, still!).
jquery flot
Comments
Post a Comment