Main Data History
Show Index Toggle 0 comments
  •  Quick Edit
  • 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.