Search code examples
javascriptjqueryflot

Can graphs generated by flot include quadrants II-IV with clearly defined xy-Cartesian axes plus origin?


I've started using JS graphing APIs to plot data. I recently found flot and can plot a simple line (y = x + 1):

<script type="text/javascript">
var d1 = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5]];
$(document).ready(function () {
    $.plot($("#GraphScreen"), [d1], {
        xaxis: {
            tickDecimals: 0, font: {
                size: 10, weight: "bold", color: "#000"
            }
        }, 
        yaxis: {
            font: {
                size: 10, weight: "bold", color: "#000"
            }
        }
    });
});
</script>

The graph looks fine

flot - Line in Quadrant1

and is plotted in Quadrant I only. However, it is obvious most mathematical functions, when graphed, also have interesting features in Quadrants II-IV!

I changed the dataset to include points that would fall on the line in Quadrants II and III:

<script type="text/javascript">
var d1 = [[-4, -3], [-3, -2], [-2, -1], [-1, 0], [0, 1], [1, 2], [2, 3], [3, 4], [4, 5]];
$(document).ready(function () {
    $.plot($("#GraphScreen"), [d1], {
        xaxis: {
            tickDecimals: 0, font: {
                size: 10, weight: "bold", color: "#000"
            }
        }, 
        yaxis: {
            font: {
                size: 10, weight: "bold", color: "#000"
            }
        }
    });
});
</script>

The line is "correct", but the image lacks any clearly-identified Cartesian axes which include an obvious origin:

flot - Axes not identified

Is there a way to accentuate/make clearly visible the (labeled) axes in flot such that all 4 quadrants are differentiated on the graph? I have read the documentation, searched Stack Overflow (closest I found was this: flot question, and searched the web for this topic, but I did not find anything helpful.

Thus far, my solutions are as follows:

  1. Live with Quadrant I only (not preferable but take it over not having any plots at all)
  2. Hack - Stitch 4 flot containers together using css and js, with each axis appropriately labeled (I'd rather not try this)
  3. Try a different web app such JSXGraph (notice that the quadrants are differentiated as shown here: JSXGraph example) - this seems like the best option if flot flops

Solution

  • I created a simple JSFiddle to demonstrate how to add the Cartesian-like axis to flot using the jquery.flot.coordinate.js plugin.

    After including the plugin script file, adding the following to your options variable does the trick:

     coordinate: {
         type: "rectangular"
     }