Monday, December 9, 2013

How to Get Axis Labels in Flot Charts

Have you tried adding axis labels in to any type of Flot chart ? By default Flot does not support axis labels. But it is very easy to get the axis labels with the aid of a simple plugin. So let's see how we can get it done in 3 steps !!!

  1. Git clone this repository and place the jquery.flot.axislabels.js inside the folder where you have other Flot related libraries or plugins.
                          git clone https://github.com/xuanluo/flot-axislabels.git

    2.  Import the script file in the Flot chart file as follows.

      <script language="javascript" type="text/javascript" src="../../jquery.flot.axislabels.js"></script>

    3. Pass the axis names and their formatting in the options section along with the other options of X-axis and Y-axis as in the below snippet.


                       xaxis: {
                     axisLabel: 'X',
                      axisLabelUseCanvas: true,
                      axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5

                 },
            yaxis: {
axisLabel: 'Sin(X)',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5

               },

Now you can see the axis labels appearing in your chart as shown in the below image. 


We are done :) It is simple as that.

Have a look at the README section of the cloned repository  for more details. (Although I said a repository, it is just a single file )

You can refer the full sample code given below in-case if anything was unclear.



 
 Flot Axis Labels
 
 
 
 
 
 



 
Acknowledgement
[1] https://github.com/xuanluo/flot-axislabels


1 comment: