Home
Welcome to the Plotarithmic wiki!
Plotarithmic is a very specific jQuery based graphing library. While there exist many great graphing libraries such as Flot, they have all sacrificed speed for general use. In my application, speed was a paramount necessity, so I have done the reverse. This graphing tool has very limited options and scope but is very fast.
I designed it to be as simple as possible, with an interface similar to Flot to make for an easy understanding and transition. Here is as an example setup I created to demonstrate a graph:
Below is the HTML and Javascript used to create the image above, which can be found at My Website.
<script type="text/javascript" src="BackgroundDrawer.js"></script>
<script type="text/javascript" src="DataFormatter.js"></script>
<script type="text/javascript" src="EventsHandler.js"></script>
<script type="text/javascript" src="MainPlotter.js"></script>
<script type="text/javascript" src="Plotarithmic.js"></script>
<script type="text/javascript" src="HelperFunctions.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<html>
<head>
<title>Plotarithmic Example</title>
</head>
<body style="background: gray;">
<div>
<div id="GraphExample" style="height: 300px; width: 600px;"></div>
</div>
<div>
<div id="GraphExample2" style="height: 300px; width: 600px;"></div>
</div>
</body>
</html>
The Javascript code to utilize Plotarithmic is as follows, showing 2 examples:
$(function () {
var dataArray1 = [];
for (var i = 1; i < 100; i++) {
dataArray1.push([i, (i / 10.0)]);
}
var dataToSend = {
data: dataArray1,
color: "#FFFF00",
visible: true,
index: 0,
control: {
visible: true,
draggable: false,
background: "#FFFF00",
forecolor: "#000000",
location: [10, 5]
}
};
var GraphBounds = {
minXValue: 1,
maxXValue: 100,
minYValue: -20,
maxYValue: 20
};
var GraphOptions = {
ControlSize: 16,
left: 30,
right: 50,
top: 20,
bottom: 50
}
var PlotExampleVariable = new Plotarithmic("ExamplePlotID", [dataToSend], $("#GraphExample"), GraphBounds, GraphOptions);
var dataArray2 = [];
for (var i = 1; i < 2000; i++) {
dataArray2.push([i, (i * 2)+500]);
}
var dataToSend2 = {
data: dataArray2,
color: "#028482",
visible: true,
index: 0,
control: {
visible: false
}
};
var GraphBounds2 = {
minXValue: 1,
maxXValue: 2000,
minYValue: -5,
maxYValue: 5000
};
var GraphOptions = {
ControlSize: 16,
left: 50,
right: 50,
top: 20,
bottom: 50
}
var PlotExampleVariable = new Plotarithmic("ExamplePlotID2", [dataToSend2], $("#GraphExample2"), GraphBounds2, GraphOptions);
});