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
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:
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:
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"
}