Flot is a plotting library for jQuery, with a focus on simple usage, attractive looks, and interactive features. This library provides some plugins to extend your cases. The Flot library can be found at http://www.flotcharts.org. Some Flot files are shown in the following screenshot:
For the demo, we will visualize random data using the Flot library on web applications. You can follow these steps to perform the demo:
- For testing, we create an HTML file, flotdemo.html. Firstly, we put jQuery Flot and jQuery into a HTML header. You can also define styles for your web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flot Demo</title>
<script src="libs/jquery-3.2.1.js"></script>
<script src="libs/jquery.flot.js"></script>
<style>
#placeholder
{
width: 100%;
height: 500px;
}
</style>
</head>
- In the HTML body, we will generate a chart into the div attribute with the placeholder ID using the JavaScript scripts:
<body>
<div id="placeholder"></div>
<script language="JavaScript">
// generate a chart
</script>
</body>
</html>
- In this demo, we generate data from the sin math formula. Then, we insert data from the Flot object:
$(document).ready(function() {
show_data();
});
function show_data(){
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
$.plot("#placeholder", [{
data: d1,
lines: { show: true, fill: true }
}]);
}
- Save this HTML file. Then, you can run that into the web server so you should see a graphic in the browser, as shown in the following figure:
You have learned how to work with the Flot library on a web application to visualize data.
Now you have already learned how to visualize data with three libraries, D3.js, Chart.js, and Flot. All the data is static data. Next, we will visualize the progressive data, such as real-time sensor data.