Menu
Is it possible to show title for x and y axis in flot graph?
Following 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"]
});
686
On most charts, the X axis is called the category axis because it displays category names. Axis labels are words or numbers that mark the different portions of the axis. Value axis labels are computed based on the data displayed in the chart.
Click the chart, and then click the Chart Design tab. Click Add Chart Element > Axis Titles, and then choose an axis title option. Type the text in the Axis Title box. To format the title, select the text in the title box, and then on the Home tab, under Font, select the formatting that you want.
Prism 4: Double-click on the Y axis to bring up the Format Axis dialog set to the Y axis tab. At the bottom of the dialog, on the right side, you can choose to make the Y axis title go horizontally, or keep it vertical but in the other direction.
Flot does not support axis labels by itself, but you can fairly easily add them using html and css, and a bit of modification to your flot options.
The demo on the flot site has a y axis label. It is created by appending a div with certain classes to the flot container:
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 like this:
.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, there's more trickery to deal with unfortunately - you'd want your body tag to be labelled with the class of "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 additional 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 I needed to specify a fixed labelWidth for the y axis and a fixed labelHeight for the xaxis.
See a working example here: http://jsfiddle.net/ryleyb/U82Dc/
137
There is a plugin for flot out here: https://github.com/mikeslim7/flot-axislabels to implement axis labels.
However it is not supported in IE browsers less than version 9.0. @Ryley's solution is a cool one.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
