Flot plates overlapping with my schedule

Question

Im uses the line graph function for the fleet, but Im has some difficulty keeping the x and y labels from overlapping in the graph. My schedule is as follows

Ideally, I would like to move the labels to the left and bottom so that they do not overlap with the graph. Im building such a graph

$(function() { <% js_data = [] ids = [] @user_my_objects.each do |user_my_object| ids.push( user_my_object.id ) my_object_day_time_in_ms = user_my_object.my_object.day.strftime('%Q') js_data.push( "[#{my_object_day_time_in_ms}, #{user_my_object.time_in_ms}]" ) end %> // <%= ids %> var data = [<%=h js_data.join(",") %>]; $("<div id='tooltip'></div>").css({ position: "absolute", display: "none", border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body"); $.plot("#placeholder", [data], { yaxis: { tickFormatter: formatTime }, xaxis: { mode: "time" }, points: { show: true }, lines: { show: true }, grid: { hoverable: true, clickable: true, tickColor: "#efefef", borderWidth: 0, borderColor: "#efefef" }, tooltip: true }); $("#placeholder").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); console.log("x:" + x) dateObj = new Date(parseInt(x)) var dateStr = $.datepicker.formatDate('MM dd, yy', dateObj) $("#tooltip").html( dateStr + " - " + formatTime(y) ) .css({top: item.pageY+5, left: item.pageX+5}) .fadeIn(200); } else { $("#tooltip").hide(); } }); }); 

Edit: Alas, the elusive script - http://jsfiddle.net/edc8jd31/1/

Answer 1

Run your script, add translateY(15px) to the transform lines in CSS and add labelHeight: 30 to the xaxis options. See the updated script for more details.

Explanation:
Using transform: rotate(45%) on the axis labels, you rotate them around their centers, which bring the left half above the axis. Additional translation moves the label under the axis. The labelHeight option labelHeight necessary so that the right half of the labels do not fall below the edge of the chart.

Answer 2

Add the following to your CSS :

 #placeholder div.xAxis div.tickLabel { transform: rotate(0deg) !important; margin-top:10px; } #placeholder div.yAxis div.tickLabel { margin-right: 10px !important; } 

Output:

Answer 3

I'm not sure if I understand your problem correctly, but you just want to move the labels along the x and z axis without moving the graph itself, right?

Perhaps the CSS3 transform: translate(x, y); property is useful for the x-axis transform: translate(x, y); .

And for the y-axis you can theoretically do the same, but for moving down the margin would be better.

To rotate labels use transform: rotate(degrees)

So this might work:

 #placeholder div.yAxis div.tickLabel { transform: translate(-10px, 0px); } #placeholder div.xAxis div.tickLabel { margin-top: 20px; transform: rotate(45deg); } 

Answer 4

I'm not sure I understood your problem, but are you expecting something like this?
Used simple jQuery to change the css of each X axis div.

jQuery:

 $('.xAxis.x1Axis div.tickLabel').each(function() { var newVal = $(this).css('left'); newVal = parseInt(newVal.substring(0, newVal.indexOf("px"))) + 15; $(this).css('left', newVal); //$(this).css('top', "492px"); // Instead of above commented line You can use css directly. }); 

CSS:

 .xAxis.x1Axis .tickLabel { top :492px !important; } 

 function formatTime(duration) { var milliseconds = parseInt((duration % 1000) / 100), seconds = parseInt((duration / 1000) % 60), minutes = parseInt((duration / (1000 * 60)) % 60), hours = parseInt((duration / (1000 * 60 * 60)) % 24); hours = (hours < 10) ? "0" + hours : hours; minutes = (minutes < 10) ? "0" + minutes : minutes; seconds = (seconds < 10) ? "0" + seconds : seconds; return (hours > 0 ? hours + ":" : "") + minutes + ":" + seconds + (milliseconds > 0 ? "." + milliseconds : ""); } $(function() { // [4775444, 4775496, 4775541] var data = [ [1403913600000, 2915000], [1437782400000, 2788000], [1466812800000, 2759000] ]; $("<div id='tooltip'></div>").css({ position: "absolute", display: "none", border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body"); $.plot("#placeholder", [data], { yaxis: { tickFormatter: formatTime }, xaxis: { mode: "time" }, points: { show: true }, lines: { show: true }, grid: { margin: 10, labelMargin: 5, labelWidth: 20, hoverable: true, clickable: true, tickColor: "#efefef", borderWidth: 0, borderColor: "#efefef" }, tooltip: true }); $("#placeholder").bind("plothover", function(event, pos, item) { if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); console.log("x:" + x) dateObj = new Date(parseInt(x)) var dateStr = $.datepicker.formatDate('MM dd, yy', dateObj) $("#tooltip").html(dateStr + " - " + formatTime(y)) .css({ top: item.pageY + 5, left: item.pageX + 5 }) .fadeIn(200); } else { $("#tooltip").hide(); } }); $('.xAxis.x1Axis div.tickLabel').each(function() { var newVal = $(this).css('left'); newVal = parseInt(newVal.substring(0, newVal.indexOf("px"))) + 15; $(this).css('left', newVal); //$(this).css('top', "492px"); // instead of hardcoding you can apply via css: }); }); 

 .demo-container { padding: 20px; background-color: orange; } #placeholder div.xAxis div.tickLabel { transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -o-transform: rotate(-90deg); /* Opera */ /*rotation-point:50% 50%;*/ /* CSS3 */ /*rotation:270deg;*/ /* CSS3 */ } .xAxis.x1Axis .tickLabel { top :492px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> <div class="demo-container"> <div id="placeholder" class="demo-placeholder" style="width:800px; height:500px;"></div> </div>