Geek Answers Handbook

Title for x and y axis in fleet graph

Is it possible to show the title for the x and y axis in the fleet graph?

Below is the code:

$.plot($("#placeholder_1w"), [d], { series: { lines: { show: true, fill: false, fillColor: "red" }, points: { show: true, fill: true,fillColor: "red" } }, grid: { hoverable: true, clickable: true , color: 'green'}, xaxis: { mode: "time", minTickSize: [1, "day"], min: (myWeekDate).getTime(), max: (new Date()).getTime() }, colors: ["red", "green", "#919733"] });
+8
jquery graph flot
source share
2 answers

Flot does not support axis labels on its own, but you can easily add them using html and css and change the parameters of your fleet a little.

The demo on the fleet site has a y axis label. It is created by adding divs to specific classes in the container for the fleet:

 var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>") .text("My X Label") .appendTo($('#placeholder_1w')); var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>") .text("Response Time (ms)") .appendTo($('#placeholder_1w'));

Then you need CSS:

 .axisLabel { position: absolute; text-align: center; font-size: 12px; } .xaxisLabel { bottom: 3px; left: 0; right: 0; } .yaxisLabel { top: 50%; left: 2px; transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; }

If you need to support IE6 / 7, unfortunately, it’s more difficult for you to get around - you want your body tag to be marked with the class “ie6” or “ie7” by doing something like this:

 <!--[if IE 6]><body class="ie ie6"><![endif]--> <!--[if IE 7]><body class="ie ie7"><![endif]--> <!--[if IE 8]><body class="ie ie8"><![endif]--> <!--[if IE 9]><body class="ie ie9"><![endif]--> <!--[if gt IE 9]><body class="ie"><![endif]--> <!--[if !IE ]><!--><body><!--<![endif]-->

And then this extra CSS:

 .ie7 .yaxisLabel, .ie8 .yaxisLabel { top: 40%; font-size: 36px; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand'); }

Finally, in my attempts to do this, I found that I need to specify a fixed width mark for the y axis and a fixed High mark for xaxis.

See a working example here: http://jsfiddle.net/ryleyb/U82Dc/

+16
source share

There is a plugin for the fleet: https://github.com/mikeslim7/flot-axislabels for implementing axis labels.

However, it is not supported in IE browsers less than version 9.0. @Ryley's solution is awesome.

+5
source share

More articles:


All Articles