How To Insert a Flotchart

Authorea Help

Flot is a JavaScript plotting library. It’s simple to use and makes attractive, interactive plots. Here’s a quick tutorial on how to add a Flot graphics to your Authorea article. Fun stuff!

This demo is using material found at

Getting Started

Step 1. From the folder view (folder icon in top sidebar), navigate to the figures folder and create a new folder, e.g., called js , and in it a new file, e.g. called js.html

Step 2. Insert the Javascript code of the Javascript visualization in the file you created. Note: for security reasons, you have to include all your data and CSS in the JS file or load it from URLs on https. Also- please load all d3 and related resources from CDNs on secure sites (https).

Step 3. Click on QuickEdit in the top bar, select , and add the path to your figure, e.g. figures/js/js.html

Step 4. Go back to your main view. You’re done! Your viz should now magically appear in the document.

So let’s have a look at a practical example: Once you have defined the HTML properties of your #placeholder, the basic syntax for plotting looks like this:

$.plot($("#placeholder"), data, options);

Let’s try to draw a line from (0, 0) to (1, 1). The command looks like this: $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

A simple line. Check the source html file to create your own.

Flot supports lines, points, filled areas, bars and any combinations of these!