Default plot example

Default plot example from the grafica.js library https://github.com/jagracar/grafica.js

by Javier Graciá Carpio

HTML

<script src="https://cdn.rawgit.com/jagracar/grafica.js/master/releases/grafica.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

JavaScript

var sketch = function (p) {
    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(500, 350);
        p.background(150);

        // Prepare the points for the plot
        var points = [];
        var seed = 100 * p.random();

        for (var i = 0; i < 100; i++) {
            points[i] = new GPoint(i, 10 * p.noise(0.1 * i + seed));
        }

        // Create a new plot and set its position on the screen
        var plot = new GPlot(p);
        plot.setPos(25, 25);

        // Set the plot title and the axis labels
        plot.setPoints(points);
        plot.getXAxis().setAxisLabelText("x axis");
        plot.getYAxis().setAxisLabelText("y axis");
        plot.setTitleText("A very simple example");

        // Draw it!
        plot.defaultDraw();

        p.noLoop();
    };
};

var myp5 = new p5(sketch);