Static | Dynamic | Interactive

Integrate a Static Plot

This demo shows how to add a simple static plot to your webpage which requires no user interaction.

Live example

HTML

In your HTML page, include the icanplot.js file. Create a Canvas element and give it an unique id which you will also need to specify in subsequent javascript code. In this case, we have give the canvas element an id plot-area.






JavaScript

While the canvas element to show the figure is defined in HTML, the plotting functions are called in a javascript code. (The icanplot.js file should be included before the following javascript to ensure that the required objects are available.) Here is a simple example with 4 data vectors with 10 values each. We also have a vector with names for the 10 points. Though the values are static in this case, they could be dynamically generated by your application.

Call the init() function and pass the id of the Canvas element created in the HTML. In this case, the id is plot-area. You could set the minimum and maximum size of the points, axis labels, etc. Thereafter calling the plotting function plots the figure in the Canvas element.

Line 3 ensures that the plotting javascript code is called after the page is loaded to avoid slowing the rendering of the page to draw the figure.