Skip to content
Plot Canvas Graphing an Equation
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Online Example and JS Classes

This package build a graph (cartesian plane) in Canvas [HTML5] through a determinate equation. Any Canvas element can be used to plot the graph, until with width and height responsives.

The Online Example show a plot of linear function with many options to user interface. The user can in real-time do changes to the values of variables, event.mousemove to see a (x, y) in draw and event.mouseclick to pause the draw events. Also, use Canvas responsive (with Bootstrap) to display the program in various devices. This example is in the files.


The package is in ./dist/jPlotGraph/, and are defined by two main classes:

  • file plot.axis.js - class PlotGraph()
    • This class management all system of draw graph. Here you can modify colors, equation, axis, sizes, margins and texts.
  • file - json.functions events
    • These functions realize the user interface (UI) interaction (like: mousemove, mouseleave and click). Here you can modify how behave the UI with the Canvas element.

But, the package don't work without func_mmy and func_plot. That's functions have to be included before of the plot graph. Theses functions define how draw the equation and how fit max and min values of f(x). See file plot.func.linear.js, used in example.

Also look ~

You can’t perform that action at this time.